TOP > カテゴリ > HTML5・JavaScript >

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キーを設定します。

公式リンク

Google Maps API





関連記事


前の記事：棒グラフ、円グラフ、折れ線グラフなどのチャートを表示する[Chart.jsの使い方]
次の記事：Webストレージの使い方[HTML5]

公開日：2016年10月05日
記事NO：02168