Google Mapにマーカー(目印)を表示する

こんにちわ、開発者のⅠです。

さて、前回は便利機能の表示の切替についてお話しましたが、今回はマーカーを表示させる方法についてお話したいと思います。

マーカーは皆さんご存知でしょうか？
Google Map上で建物などのスポットをクリックしたり、キーワード検索を行うと現れる"赤い目印"のことです。
なんとなく愛嬌がありますね。


それでは早速、実践してみましょう。

マーカーを表示させるには、経度と緯度が必須です。
以下のコードを、 関数 initializeに追加してみてください。

var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

var markers = [
    ['東京タワー',35.658589, 139.745615],
    ['浅草 雷門',35.711020, 139.796336],
    ['中央本線 笹子駅',35.603862, 138.825087],
    ];
for (var i = 0; i < markers.length; i++) {
var name = markers[i][0];
var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
createMarker(latlng,name,map)
}

さらに、以下の関数を新規に追加します。

function createMarker(latlng,name,map)
{
var infoWindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({position: latlng,map: map});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(name);
infoWindow.open(map,marker);   
});
}

これで、三箇所にマーカーが表示されていると思います。 しかし、この方法ではマーカーを表示させたい箇所が増減した場合にその都度、ソースの編集が必要になります。 次回は、マーカーの座標を外部ファイルから読み出す方法についてお話したいと思います。 それでは、また！