HOME > > > Googleマップのマーカーに吹き出しを設置する方法

Googleマップのマーカーに吹き出しを設置する方法

GoogleMapに吹き出し

Googleマップに詳細を表示する吹き出しを設置する

Googleマップのマーカー(アイコン)は「場所はここですよー」という事は伝えられますが、住所や電話番号もしくはサイトへのリンクなどの詳細情報を伝える事はできません。
実際のGoogleマップでも表示している様な吹き出しを設置し、中に詳細情報を追加できればユーザーに伝える情報はより親切になると思います。
さっそく吹き出しを設置していきましょう。

サンプルはこちら

マップの設置方法

マップの設置方法は以前の記事を確認してください。

javascript全体

下記のjavascriptをhead内に設置するとアイコンをクリックすると吹き出しが表示されます。


<script>
function initialize() {
  var latlng = new google.maps.LatLng(37.4220, -122.08491731);
  var myOptions = {
    zoom: 17,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  
  var image = 'アイコン画像パス';
  var mapMarker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: image,
    title: '吹き出し設置',
  });
  
  var content = '<div id="fukidashiWindow">' +
    '<h1>吹き出しタイトル</h1>' +
    '<p>吹き出しの内容<br>' +
    '住所など</p>' +
    '</div>';
  var fukidashiwindow = new google.maps.InfoWindow({
    content: content
  });
  
  google.maps.event.addListener(mapMarker, 'click', function() {
    fukidashiwindow.open(map, mapMarker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

解説

アイコン

「アイコン画像パス」の部分はご自分でアイコンにしたい画像パスを入れます。
「title」はマウスをオーバーした際に表示されるtitleです。


  var image = 'アイコン画像パス';
  var mapMarker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: image,
    title: '吹き出し設置',
  });

吹き出し

吹き出し部分です。 htmlも使えるので、形や色はCSSで変更する事ができます。
hrefも使えますので、リンクも設定する事ができます。


  var content = '<div id="fukidashiWindow">' +
    '<h1>吹き出しタイトル</h1>' +
    '<p>吹き出しの内容<br>' +
    '住所など</p>' +
    '</div>';
  var fukidashiwindow = new google.maps.InfoWindow({
    content: content
  });

クリックアクション

クリックした時に「fukidashiwindow(吹き出し部分)」を表示するクリックアクションを記述します。


  google.maps.event.addListener(mapMarker, 'click', function() {
    fukidashiwindow.open(map, mapMarker);
  });

ページを読み込んだ時にinitialize()を実行

ページを読み込んだ時に「initialize()(初期化)」を実行します。


google.maps.event.addDomListener(window, 'load', initialize);

設置完了

以上で設置完了です。
改めて、だんだんと記述内容が長くなってきたなぁと感じてます。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket