ホーム > カテゴリ > 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


この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
プチモンテ代表、アーティスト名：プチモンテ
🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は叙情詩、叙情的な楽曲が多い。楽曲制作は2023年12月中旬 ～

オリジナル曲を始めました✨

YouTubeで各楽曲を公開しています🌈
https://www.youtube.com/@petitmonte

【男性ボーカル】DA・KA・RA | 新たな明日が風と共に訪れる

【男性、女性ボーカル】時空を超越する先に | 時空と風の交響曲

【女性、男性ボーカル】絆 | 穏やかな心に奏でる旋律