稼ぐ為の集客方法

新googlemapに吹き出しを作ろう

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

はじめに

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

注意事項

前回の新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);
    });
  });
}

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

map6

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

吹き出しの枠を広げる

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

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

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

map7

気を付けて欲しい点

通常、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>"

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

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

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

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

さいごに

アピールが出来る

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

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

関連記事

  1. ワードプレスで特定の固定ページの子ページのみを表示させる

  2. 被リンクのつけ方の考え方【SEO対策】

  3. FC2ショッピングカートの販売する為の設定

  4. 最低限覚えておけば副業で使える簡単なソースコード

  5. ブログに地図を貼り付ける方法

  6. yahooリスティング広告のキーワード単価を調べる方法

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

コメントするためには、 ログイン してください。
PAGE TOP