Googleマップでアイコンと吹き出しを表示する[Google Maps API]
Googleマップの「Google Maps JavaScript API」を使用してマーカーのアイコンの変更と吹き出しを表示する方法です。
[サンプルの実行例]

Google API Console
JavaScriptでGoogleマップを操作するにはGoogle API Consoleでプロジェクトを作成します。次に「Google Maps JavaScript API」を有効にして「APIキー」を取得します。
サンプルコード
このサンプルではマーカーのアイコンをオリジナルアイコンに変更します。そして、アイコンをクリックすると吹き出し(バルーン)が表示されるようになっています。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <div id="map" style="width: 98%;height: 350px;margin: 0 8px 0 8px;"></div> <script type="text/javascript"> function initMap() { var map = new google.maps.Map(document.getElementById("map"), { center: {lat: 35.68109, lng: 139.76393694444}, zoom: 12 }); var marker = new google.maps.Marker({ position: {lat: 35.68109, lng: 139.76393694444}, map: map, icon: 'xxx.gif' }); var infoWindow = new google.maps.InfoWindow({ content: '<div><h3 style="text-decoration:none;">3,280万円/㎡ 1.1億円/坪</h3> <span style="color:green;">千代田区丸の内2-4-1</span></div>' }); marker.addListener('click', function() { infoWindow.open(map, marker); }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script> </body> </html>
20行目の「xxx.gif」は各自で用意します。32行目の「API_KEY」はGoogle API Consoleで取得したAPIキーを設定します。
公式リンク
スポンサーリンク
関連記事
公開日:2016年10月05日
記事NO:02168