Googleマップでマーカーに情報ウィンドウを表示させる

Googleマップでは、マーカーに付随する情報を表示することが出来ます。
情報ウィンドウ内にはhtmlタグも使えて便利です。
今回はマウスオーバーで表示させる方法と、最初から表示されている方法をご紹介します。

基本設定

必要なファイルを読み込む

Google Maps API のスクリプトを読み込みます。
v3からAPIキーが不要になっているので、以下のコードをそのまま貼り付けて使えます。

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

html

地図を表示したいエリアに任意のid名を付けます。

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

css

地図の縦幅、横幅を設定しないと表示されないので、必ず設定します。

#map {
width: 100%;
height: 300px;
}

マウスオーバーで情報ウィンドウを表示させる

JavaScript

例ではマウスオーバーにしていますが、その他にclickなどのイベントでも使えます。
緯度経度を調べるにはこちらのサイト様が便利です。

//マウスオーバーで情報ウィンドウを表示させる
function map_canvas() {
    //マーカーの情報
    var data = new Array();
    data.push({
        lat: '35.681382', //緯度
        lng: '139.7660843', //経度
        content: '東京駅<br />迷子にならないように！' //情報ウィンドウの内容
    });
    data.push({
        lat: '35.678187',
        lng: '139.76817',
        content: '<p style="color:#d50000">八重洲ブックセンター</p>'
    });
    //初期位置に、上記配列の最初の緯度経度を格納
    var latlng = new google.maps.LatLng(data[0].lat, data[0].lng);
    var opts = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), opts);
 
    var markers = new Array();
    //マーカーを配置するループ
    for (i = 0; i < data.length; i++) {
        markers[i] = new google.maps.Marker({
            position: new google.maps.LatLng(data[i].lat, data[i].lng),
            map: map
        });
        markerInfo(markers[i], data[i].content);
    }
}
 
function markerInfo(marker, name) {
    google.maps.event.addListener(marker, 'mouseover', function (event) {
        new google.maps.InfoWindow({
            content: name
        }).open(marker.getMap(), marker);
    });
}
 
//地図描画を実行
google.maps.event.addDomListener(window, 'load', map_canvas);

初期表示で情報ウィンドウを表示させる

JavaScript

//最初から情報ウィンドウを表示させる
function map_canvas() {
    //マーカーの情報
    var data = new Array();
    data.push({
        lat: '35.681382', //緯度
        lng: '139.7660843', //経度
        content: '東京駅<br />迷子にならないように！' //情報ウィンドウの内容
    });
    data.push({
        lat: '35.678187',
        lng: '139.76817',
        content: '<span style="color:#d50000">八重洲ブックセンター</span>'
    });
    //初期位置に、上記配列の最初の緯度経度を格納
    var latlng = new google.maps.LatLng(data[0].lat, data[0].lng);
    var opts = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    //地図を表示させるエリアのidを指定
    var map = new google.maps.Map(document.getElementById("map"), opts);

    var markers = new Array();
    //マーカーを配置するループ
    for (i = 0; i < data.length; i++) {
        markers[i] = new google.maps.Marker({
            position: new google.maps.LatLng(data[i].lat, data[i].lng),
            map: map
        });
        markerInfo(markers[i], data[i].content);
    }
}
function markerInfo(marker, name) {
    new google.maps.InfoWindow({
        content: name
    }).open(marker.getMap(), marker);
}
//地図描画を実行
google.maps.event.addDomListener(window, 'load', map_canvas);