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という密集したマーカー

798

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

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

flickr-logo

Flickr API Keyの取得

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

761

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

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

flickr-logo

Flickrアカウントの作成

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

no image

Google Chart Toolsを使って円グラフ

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

no image

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

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

no image

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

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

Comment

Message

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


*

PAGE TOP ↑