静的なマーカーの表示

[OpenLayers] OpenLayers によるOpenStreetMap の表示では、OpenLayersを使って地図を表示しました。次は、マーカーを追加したいと思います。

最初は、静的なマーカーを表示してみます。index.html は前と同じようにしておきますがファイル名・関数名などは適宜読み替えてください。

// 
// Static Marker sample
// http://openstreetmap.piyolab.net/markeronmap.php を参考
//
function static_marker_sample() {
    
    var options = {
        controls:[
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.NavToolbar(),
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.ScaleLine(),
//         new OpenLayers.Control.ZoomPanel(),
            new OpenLayers.Control.Attribution()
            ],
    };
    
    var map = new OpenLayers.Map("demoMap", options);
    map.addLayer(new OpenLayers.Layer.OSM());
    
    console.log(map.getProjectionObject().getCode());
    
    map.setCenter(new OpenLayers.LonLat(139.76, 35.68)
        .transform(
                new OpenLayers.Projection("EPSG:4326"),  // WGS84
                new OpenLayers.Projection("EPSG:3857")   // Google Map / OSM / etc の球面メルカトル図法
        ), 8
    );
    
    // マーカー
    var markers = new OpenLayers.Layer.Markers("Markers");
    map.addLayer(markers);
    var marker = new OpenLayers.Marker(
        new OpenLayers.LonLat(139.76, 35.68)
            .transform(
                new OpenLayers.Projection("EPSG:4326"),
                new OpenLayers.Projection("EPSG:900913")
            )
    );
    markers.addMarker(marker);  

    var marker2 = new OpenLayers.Marker(
            new OpenLayers.LonLat(140.76, 35.68)
                .transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    new OpenLayers.Projection("EPSG:900913")
                )
        );
    markers.addMarker(marker2);     
}