新googlemapに吹き出しを作ろう

投稿日：2015年2月21日更新日：2016年8月9日

新googlemapに変ったら吹き出しの作り方も全部変わっててどうやればいいんだって人向けです。

はじめに

地図を表示させるだけだと少し物足りないですよね。そこで吹き出しを使う事でお店の場所を強調させる事が出来ます。

注意事項

早速吹き出しを出してみよう

ヘッダーの新googlemapの情報に追加させます。

function initialize() {
	 var myMap = new google.maps.Map(document.getElementById("map"), {
    // ズームレベル
    zoom: 17,
    // 中心点緯度経度
    center: new google.maps.LatLng(35.658650, 139.746256),
    // 右下の距離目盛りの表示
    scaleControl: true,
    // 地図の種類
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var myMarker = new google.maps.Marker({
    // マーカーを置く緯度経度
    position: new google.maps.LatLng(35.658650, 139.746256),
    map: myMap
  });
  var myInfoWindow = new google.maps.InfoWindow({
    // 吹き出しに出す文
    content: "吹き出しを表示"
  });
  // 吹き出しを開く
  myInfoWindow.open(myMap, myMarker);
  // 吹き出しが閉じられたら、マーカークリックで再び開くようにしておく
  google.maps.event.addListener(myInfoWindow, "closeclick", function() {
    google.maps.event.addListenerOnce(myMarker, "click", function(event) {
      myInfoWindow.open(myMap, myMarker);
    });
  });
}

これで地図を一度見てみます。

この状態だと吹き出しの中の文字がスクロールしてしまっているので見づらくなってしまっています。なので、吹き出しの枠を少し広げる事で全文表示させていきます。

吹き出しの枠を広げる

実はこの部分はcssの知識がある方であれば簡単にカスタマイズできる部分です。

var myInfoWindow = new google.maps.InfoWindow({
    // 吹き出しに出す文
    content: "<p style='width:90px;'>吹き出しを表示</p>"

このようにcssを使って横幅を決めてあげるとこのようになります。

気を付けて欲しい点

通常、cssを作る場合は
「’」ではなく「”」でくくりますが、新googlemapの吹き出し部分には「”」は使用できません。

電話番号を表示させてみた

せっかくなんで電話番号も表示させてみました。

var myInfoWindow = new google.maps.InfoWindow({
    // 吹き出しに出す文
    content: "<p style='width:200px; text-align:center;'>ここの角に着いたらお電話下さい。<br />電話番号:<a href='tel:0300000000'>03-0000-0000</a>"

こうする事でこのように吹き出しに電話番号を表示する事が出来るのと、電話番号をタップすると電話をかけられるようになっています。

前回と同様にこの記事だけだと分かりにくいかもしれないのでサンプルを作成させて頂きました。

新googlemapに吹き出しを入れたサンプル

このサンプルを見て頂ければコピペで自分のホームページにgooglemapを簡単に埋め込む事が出来るでしょう。

さいごに

アピールが出来る

ホームページにgooglemapを埋め込むだけでなく、吹き出しに文字を入れる事でアピールする事が出来ます。

今まではgooglemapにピンだけでしたが、これからはバルーンにお店の名前や電話番号を記載する事で強調したり、分かりにくい場合はコンビニのすぐ横などコメントを入れる事で来店される方に迷わないようにさせる事も可能ですね。