稼げる副業でお小遣いを稼ぐ方法

稼げる副業でお小遣いを稼ぐだけじゃなく、料理や映画アニメ、趣味などメモにも使っているブログ

稼ぐ為の集客方法

新googlemapに吹き出しを作ろう

投稿日:2015年2月21日 更新日:

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

-稼ぐ為の集客方法
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

googleマップの登録方法

今では店舗を構えるなら当たり前になっているgoogleマップ。今回はこのgoogleマップの登録方法をご紹介いたします。 関連記事: Yahoo地図に掲載する方法 バリューコマースアフィリエイトの登録 …

Googleアナリティクス一覧のセッションなどのデータが表示されなくなった

久々にGoogleアナリティクスを見たらデータが表示されなくなっていた・・・ 関連記事: 被リンクのつけ方の考え方【SEO対策】 最低限覚えておけば副業で使える簡単なソースコード FC2ショッピングカ …

yahooリスティング広告の広告費の決め方

広告費用って毎月いくら必要なのか?いろいろなパターンを考えてみました 関連記事: 関連記事はありません。

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

今回はSEO対策の外部対策において重要な被リンクのつけ方の考え方です。これは前回の被リンクの考え方に通ずる物がありますので合わせてお読みください。 関連記事: クリックで位置を強調する方法 被リンクの …

SEO対策はコンテンツだけで勝負してみた結果

SEO対策にもう被リンクは本当に必要がないのか実際にテストしてみました 関連記事: 被リンクの考え方【SEO対策】 被リンクのつけ方の考え方【SEO対策】 SEO対策の実験サイトを制作しよう SEO対 …