GoogleMapAPIでマーカーをクリックで詳細を表示

GoogleMapAPIでマーカーをクリックで詳細を表示する方法です。

GoogleMapAPIの基本的な使用方法はこちら。

以前の記事でマーカーを複数表示する方法をご紹介したので、今回は以前作成したマーカーをクリックで詳細を表示したいと思います。

使用方法

HTML

前回と同じく、div#mapを使用します。

<div id="map"></div>

JavaScript

$(function(){
	function createMessage(marker, content) {
		//infowindowが開いていたら閉じる
		if(infowindow){
	    	infowindow.close();
	  	}
	  	//infowindowにコンテンツを入れたものを作成
	  	infowindow = new google.maps.InfoWindow({
	    	content: content
	  	});
	  	//クリックイベントを設定
	  	google.maps.event.addListener(marker, 'click', function(){
	    	infowindow.open(marker.getMap(), marker);
	  	});
	}
    function init() {
        var map, infowindow;
        //Mapの中心を指定する
        var latlng = new google.maps.LatLng("35.689185", "139.691648");
        var opts = {
            //ズーム
            zoom: 6,
            //地図の種類
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: latlng
        };

        //GoogleMapを使用する#idを指定する
        map = new google.maps.Map(document.getElementById("map"), opts);

        //Markerをセットする
        var markerOpts = new Array();
        //Markerの数だけ追加する
        markerOpts.push({
            //緯度経度を指定
            position: new google.maps.LatLng("35.689185", "139.691648"),
            map: map,
            //コンテンツを指定する
            content: "<p>test</p>"
        });
        markerOpts.push({
            position: new google.maps.LatLng("34.689185", "139.691648"),
            map: map,
            content: "title"
        });

        var marker = new google.maps.Marker(markerOpts);
        for (i = 0; i < markerOpts.length; i++) {
	        var myMarker = new google.maps.Marker({
	            position: markerOpts[i].position,
	            map: map,
	            content: "<p>test2</p>"
	        });
	        createMessage(myMarker, markerOpts[i].content);
		}
    }
    init();
});

このように使用することが出来ます。

詳細にはHTMLを使用することが出来ます。