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

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

稼ぐ為の集客方法

新googlemapを簡単に埋め込む方法

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

新google map使いにくいわぁって人のために簡単に埋め込む方法が見つかったのでご紹介させて頂きます

はじめに

今までのgooglemapと違い、任意の場所の地図を簡単に表示するのが難しくなってしまいましたので簡単に埋め込む方法をご紹介させて頂きます。

注意事項

bodyタグをいじる環境でないと使用できません

表示させる準備をしよう

新googlemapを任意のページに表示させる為にタグを入力します。

ヘッダー内

先ほどのJavaScriptと一緒にヘッダーに入力します。

1<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
2<script type="text/javascript">
3function initialize() {
4     var myMap = new google.maps.Map(document.getElementById("map"), {
5    // ①ズームレベル
6    zoom: 17,
7    // 中心点緯度経度
8    center: new google.maps.LatLng(②),
9    // ③右下の距離目盛りの表示
10    scaleControl: true,
11    // 地図の種類
12    mapTypeId: google.maps.MapTypeId.ROADMAP
13  });
14 
15}
16 
17</script>
  1. ズームレベルは数字が大きくなると地図がズームされます
  2. 中心点の緯度経度には表示させたい数値を入力します。
  3. falseにすると右下の距離の目盛りが消えます

※getElementById(“map”)のmap部分が表示させたいidになります。

ヘッダーに入れる情報は以上で終了です。

bodyタグを編集しよう

次はbodyタグを以下のように編集します。

表示させるタグを入れよう

1<div id="map" style="width: 700px; height: 450px;"></div>

これは横幅700pxで縦のサイズが450pxで表示させると言う意味になります。
※id=”map”この部分が先ほど説明したgetElementById(“map”)と同じ部分になります。

以上3つの情報を入力する事で新googlemapを表示される準備が整いました。

表示させたい場所をメモしよう

まずはgooglemapを開いて地図に表示させたい場所を選びます。

https://www.google.co.jp/maps

map1

例えば東京タワーの右側の道路をgooglemapの中心に表示したい場合その部分をクリックして左上に出てくる位置の数字をメモします。

map2

35.658650, 139.746256

この数字を先ほどの内容に入力します。

1// 中心点緯度経度
2center: new google.maps.LatLng(35.658650, 139.746256),

これでホームページ上に新googoleの表示が可能となります。

確認してみよう

先ほどの情報を入力するとこのように東京タワーの右側の道路付近が地図の中心となっております。

map3

ただ、このままだとどの部分が中心でどの部分に目的の場所があるのかわかりにくいのでポイントをつけてみます。

1function initialize() {
2     var myMap = new google.maps.Map(document.getElementById("map"), {
3    // ズームレベル
4    zoom: 17,
5    // 中心点緯度経度
6    center: new google.maps.LatLng(35.658650, 139.746256),
7    // 右下の距離目盛りの表示
8    scaleControl: true,
9    // 地図の種類
10    mapTypeId: google.maps.MapTypeId.ROADMAP
11  });
12   
13  var myMarker = new google.maps.Marker({
14    // マーカーを置く緯度経度
15    position: new google.maps.LatLng(35.658650, 139.746256),
16    map: myMap
17  });
18 
19}

map4
こっちの方が見やすいですよね。
マーカーの位置も緯度経度と同じ数値にしておく事で中心に表示する事が可能になります。
ただ、最寄駅と目的地を一緒に地図上に入れたい場合は中心点の緯度経度の位置とマーカーを置く緯度経度の位置をずらす事で可能となります。

map5

このように赤羽橋駅から目的地までの地図を表示させてみました。

サンプルを作ってみました

このブログの説明だけだとわからない方もいらっしゃると思うのでhtmlファイルにサンプルを作ってみました。

googlemapのサンプル

このサンプルのソースコードを見て頂ければ新googlemapをホームページにどうやって埋め込んで使っているのかわかりやすいと思います。

さいごに

新しいgoogle mapは本当に使いにくい

今までのgoogle mapであればホームページに埋め込むのが非常に簡単に出来ましたが、今では埋め込むのが非常に面倒になってしまいましたよね。
一番やっかいなのが今まで簡単にできていた任意の場所とズームが出来なくなっていた事が非常にストレスになりました。

色々と情報は沢山でてきているので調べれば調べるほどやりたい事がたくさん見つかったのでうれしいです。次回は吹き出しを新googlemapに表示させる方法をご紹介させて頂きます。

-稼ぐ為の集客方法
-

執筆者:


comment

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

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

関連記事

FC2でブログを作る方法

FC2を使ってブログを作る方法をご紹介いたします。 関連記事: 管理画面でお問合せメールの確認が出来るTrust Form FC2のアカウント登録方法 ワードプレスに目次を簡単に入れるTable of …

yahooリスティング広告のキーワードを設定する際の考え方

yahooリスティング広告のキーワードを間違えると全然効果がないので気を付けてね 関連記事: yahooリスティング広告で広告を作るまでの流れ yahooリスティング広告のキーワード単価を調べる方法 …

googleマップの登録方法

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

wp-block-library-cssを削除する方法

いつの間にかあったwp-block-library-cssを削除する方法をご紹介いたします。 関連記事: シーサーブログにメニューを作る方法 画像をクリックしてテキストを表示させる 本当のアクセス解析 …

ワードプレスにQRコードを簡単に作成出来るプラグイン

ワードプレスにはQRコードのプラグインって色々とありますが、多分一番簡単に導入出来るプラグインなのではないでしょうか 関連記事: 検索結果に著者情報を掲載する方法 【2019年版】googleショッピ …



S