Googleマップの吹き出し(infowindow)内にコンテンツを表示する

前回、Google Maps上にinfowindow(吹き出し)を表示させました。infowindowに表示データを追加し、デザインをしてみました。どうやら普通にHTMLを書けばいいようです。画像とリンクとテキストを表示させてみます。

<style>
#div799 label { width: auto; display:inline; }
#div799 img { max-width: none; max-height: none; }
</style>

<div id="div799" style="width:940px; height:600px"></div>

<script type="text/javascript">
$(document).ready(function(){

// マップ作成
    // マップ中心座標設定
    var latlng = new google.maps.LatLng( -34.580083, -58.381577);
    // オプション
    var myOptions = {
        zoom: 4,                                  // マップのズーム度
        center: latlng,                           // 中心座標をセット
        mapTypeId: google.maps.MapTypeId.ROADMAP  // 表示するマップのタイプ
    };
    // マップ作成
    var map = new google.maps.Map(document.getElementById( "div799"), myOptions);

//    マーカー作成
    //    マーカーデータを格納
    var markers = [<?php echo $latlngs; ?>];
    var infowindow = new google.maps.InfoWindow({
        maxWidth: 300                             // infowindowの最大幅を設定
    });

    // マーカー作成
    var marker, i;
    // markers[i][0] - タイトル
    // markers[i][1] - 緯度
    // markers[i][2] - 経度
    // markers[i][3] - テキスト
    // markers[i][4] - リンク用ID
    // markers[i][5] - 画像ファイル
    for (i = 0; i < markers.length; i++) { 
        marker = new google.maps.Marker({
            position: new google.maps.LatLng( markers[i][1], markers[i][2]),
            map: map
        });
        google.maps.event.addListener( marker, 'click', ( function( marker, i) {
            return function() {
                infowindow.setContent(
                    // infowindo内のコンテンツ(html)を作成
                    '<div class="infowindow">' +
                    '<img src="/img/map/' + markers[i][5] + '" width="75" height="75">' +
                    '<a href="/showdetail/' + markers[i][4] + '" target="_blank">' +
                    markers[i][0] +
                    '</a>' +
                    '<br />' +
                    markers[i][3] +
                    '</div>'
                    // ここまで
                );
                infowindow.open( map, marker);
            }
        }) ( marker, i));
    }
})
</script>

今回、infowindowの横幅を設定しましたが、その他いくつかオプションが用意されています。
infowindowのオプション一覧

デモはこちら

PHP

function mapsmultimarkers2(){
    $this->data = $this->Map->find( 'all');
    $array_size = count( $this->data);
    $latlngs = null;
    for ( $i = 0; $i < $array_size; $i++) {
        $latlngs = $latlngs . "[" . 
        "'" . $this->data[$i]['Map']['name']  . "'" . "," .// タイトル
        $this->data[$i]['Map']['lat']  . "," .             // 緯度
        $this->data[$i]['Map']['lng']  . "," .             // 経度
        "'" . $this->data[$i]['Map']['note'] . "'" . "," . // テキスト
        $this->data[$i]['Map']['id'] . "," .               // リンク用ID
        "'" . $this->data[$i]['Map']['picture'] . "'" .    // 画像
        "]";
        if ($i != $array_size -1 ){
            $latlngs = $latlngs . ",";
        }
  }
}

Related

Google Chart Toolsを使って円グラフ Google Places Autocompleteを使って地名入力補助 ChromeのCookieデータの場所と覗く方法 DELL純正マウスを求めて秋葉原へ ソーシャルボタン設置 プラグイン Google Maps APIを使用して住所から緯度・経度を取得(ジオコーディング) Googleマップ上のマーカーをまとめてくれる「MarkerClusterer」 Googleマップ上に複数マーカー・吹き出しを表示する