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 . ",";
        }
  }
}
  • このエントリーをはてなブックマークに追加

関連記事

no image

Googleマップ上のマーカーをまとめてくれる「MarkerClusterer」

以前、google Maps上にマーカー(と吹き出し)を表示するサンプルを作成しましたが(記事)、密集していると見づらい場合がありますよね。そこで、MarkerClustererという密集したマーカー

no image

Google Places Autocompleteを使って地名入力補助

ユーザに地名入力を促す際には、Google Places Autocompleteが便利です。 簡単なサンプルを以下に スクリプト 実装 function in

no image

Google Maps APIを使用して住所から緯度・経度を取得(ジオコーディング)

Google Maps APIを使用して入力された住所から緯度・経度へ変換できるようです。 「ジオコーディング」というらしいですが定義は以下 Google Geocoding API 通常、「ジオ

Foursquare APIのvenue searchを使って周辺のランドマークを取得

Foursquare APIを使用して、緯度と経度をもとに周辺の店情報などを取得するWebアプリをつくってみました。venue search (https://api.foursquare.com/v

Flickr API Keyの取得

前回のアカウント作成ができたらAPI keyを取得します。ログイン後、API key作成ページへアクセスします。 http://www.flickr.com/services/apps/by をク

no image

Google Chart Toolsを使って円グラフ

昨日某政党が行っていたアンケート結果の円グラフですが、このツールを使っていたようでした。 ページをリロードするとアンケート総数が減ってみたり、途中でリセットしてみたりと迷走を続けた中、最終的に結果を

Googleマップ上に複数マーカー・吹き出しを表示する

Google Maps上に複数のマーカーとクリックすると吹き出しを表示するサンプルを作成しました。CakePHP経由でDBからデータを取得し表示しています。 デモはこちら スクリプト

Flickrアカウントの作成

Flickrを使用したWebサイトを構築するためFlickr API Keyを取得しました。まずは、API key取得のために必要なアカウントの作成方法を追います。 Flickr Flickr

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

PAGE TOP ↑