GHWEB06.GRASSHOPPER

配列を使用してGoogleMapに複数のマーカと情報ウィンドウを表示する

  • Category:Web関連
  • Web関連の備忘録
  • Google Mapsの表示にはAPI登録が必須になりました
    Google Mapsが表示されない場合は、APIキーの登録をお試し下さい。

    APIキーの取得方法につきましては以下サイト様の記事をご確認下さい。
    APIキーの取得 | Google Maps API入門

mapGoogleMapで複数のマーカと情報ウィンドウを配列を使用して表示してみました。
メリットは、個別にマーカーと情報ウィンドウを記述した時と比べるとソースも短く見やすくなる事とメンテナンス(マーカー追加等)が簡易になります。
★追記記事を書きました。

スクリプトとサンプル

Google Maps API を読み込む

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

地図を表示するためのスクリプト

function initialize() {
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(33.53910, 133.56010),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var markers = [
	['高知県立美術館',33.56104,133.57295],
	['牧野植物園',33.54661,133.57790],
	['高知城',33.56067,133.53147],
	['桂浜',33.497145,133.57480],
	['高知市文化プラザかるぽーと',33.55826,133.54725]
	];
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);   
});
} 
google.maps.event.addDomListener(window, 'load', initialize);

サンプル

スクリプトの処理内容

function initialize() {

/* 地図のオプションを指定 */
var myOptions = {

/* 地図拡大率 */
zoom: 12,

/* 地図中心値 */
center: new google.maps.LatLng(33.53910, 133.56010),

/*
地図の種類を選択
ROADMAP は、2D地図。
SATELLITE は、航空写真。
HYBRID は、航空写真と地形。
TERRAIN は、地形。
*/
mapTypeId: google.maps.MapTypeId.ROADMAP
};

/* 地図を表示 */
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

/* 地図情報の配列です */
var markers = [
	['高知県立美術館',33.56104,133.57295],
	['牧野植物園',33.54661,133.57790],
	['高知城',33.56067,133.53147],
	['桂浜',33.497145,133.57480],
	['高知市文化プラザかるぽーと',33.55826,133.54725]
	];

/* for文で markers.length の配列要素分、繰り返し処理を行います。*/
for (var i = 0; i < markers.length; i++) {

/* 配列markers[i][0]を変数nameに格納 */
var name = markers[i][0];
	
/* 配列markers[i][1]とmarkers[i][2]を変数latlng に格納 */
var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);

/* 関数createMarkerに引数を指定します */
createMarker(latlng,name,map)
}
}

/* 引数で渡された値を変数に代入し{}内の処理を実行 */
function createMarker(latlng,name,map){
		
/* InfoWindowクラスのオブジェクトを作成 */
var infoWindow = new google.maps.InfoWindow();

/* 指定したオプションを使用してマーカーを作成 */
var marker = new google.maps.Marker({position: latlng,map: map});

/* addListener を使ってイベントリスナを追加 */
/* 地図上のmarkerがクリックされると{}内の処理を実行。*/
google.maps.event.addListener(marker, 'click', function() {
	
/* InfoWindowOptionsオブジェクトを指定します。*/
infoWindow.setContent(name);

/* マーカーに情報ウィンドウを表示 */
infoWindow.open(map,marker);   
});
} 
/* ページ読込時に地図を表示 */
google.maps.event.addDomListener(window, 'load', initialize);
RELATED ARTICLE
  • 掲載: