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 . ","; } } }
関連記事
-
Flickrアカウントの作成
Flickrを使用したWebサイトを構築するためFlickr API Keyを取得しました。まずは、API key取得のために必要なアカウントの作成方法を追います。 Flickr Flickr
-
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 をク
-
Google Places Autocompleteを使って地名入力補助
ユーザに地名入力を促す際には、Google Places Autocompleteが便利です。 簡単なサンプルを以下に スクリプト 実装 function in
-
Google Maps APIを使用して住所から緯度・経度を取得(ジオコーディング)
Google Maps APIを使用して入力された住所から緯度・経度へ変換できるようです。 「ジオコーディング」というらしいですが定義は以下 Google Geocoding API 通常、「ジオ
-
Googleマップ上に複数マーカー・吹き出しを表示する
Google Maps上に複数のマーカーとクリックすると吹き出しを表示するサンプルを作成しました。CakePHP経由でDBからデータを取得し表示しています。 デモはこちら スクリプト
-
Google Chart Toolsを使って円グラフ
昨日某政党が行っていたアンケート結果の円グラフですが、このツールを使っていたようでした。 ページをリロードするとアンケート総数が減ってみたり、途中でリセットしてみたりと迷走を続けた中、最終的に結果を
-
Googleマップ上のマーカーをまとめてくれる「MarkerClusterer」
以前、google Maps上にマーカー(と吹き出し)を表示するサンプルを作成しましたが(記事)、密集していると見づらい場合がありますよね。そこで、MarkerClustererという密集したマーカー
- PREV
- Googleマップ上に複数マーカー・吹き出しを表示する
- NEXT
- Flickrアカウントの作成
Comment
“Googleマップの吹き出し(infowindow)内にコンテンツを表示する | Think deeply, Do less, More effective” http://t.co/LGBwNLJYnI