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

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

稼ぐ為の集客方法

新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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

稼げるサブキーワードの探し方

例えばSEO対策などでメインキーワードが決まっている場合、単一だけでなくサブキーワードもヒットさせたい時の探し方です。 関連記事: 検索結果に著者情報を掲載する方法 【2019年版】googleショッ …

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

そのキーワードにいくら支払えばクリックが見込めるのかわかりやすツールです。 関連記事: yahooリスティング広告のキーワードを設定する際の考え方

シーサーブログのトップページを作る方法

シーサーブログのトップページの作り方をご紹介いたします 関連記事: ネスタリゾートを100%遊びたい人へ【宿泊あり】 [2020年]百度baiduアカウントを日本から作る方法 iPhoneで動画をDL …

Yahoo地図に掲載する方法

Googleマップに引き続き、Yahoo!の地図への掲載方法を紹介いたします。 関連記事: yahooリスティング広告の申し込み方法 Yahoo!ショッピングの設定方法Step1の詳しい説明 yaho …

SEO対策で絶対にしてはいけない事

SEO対策をしていく上でしてはいけない事を今回はご紹介させて頂きます。知識があるのと知識がないのとでは全然効率が違ってきます。 関連記事: Jetpackのスペル&文法チェック スプレッドシートで見積 …