googlemapカスタマイズtest*

結構オシャレでここまでカスタマイズできるとは驚き設置方法は後述。結構焼き付け刃的にやってるけど、GET CODEで発行されるjsのスタイル部分は振り分けと同じページに混在して展開させられないみたい。但し発行されたAPI KEYの含まれるjsは同じ物で使い回しが可能。

1. googleにログイン
2. スタートガイドに行く
3. APIs & auth->APIsに移動
4. Google Maps API v3の横のOFF→ON
5. API キーの取得Google Maps JavaScript API を読み込む
6. APIs & auth->Credentialsに移動してAPIキーを取得
7. Google Map Builderにアクセス
8. API Keyを入力します。使い方はこちら
9. GET CODEでコードを吐きだし自分のサイトの適切な場所へ
10. MARKER ICON URL＝マーカーアイコンのURLを指定、下の歯車で地図を共有／埋め込み＞リンク共有
11. それを反映させる部分にhtml要素を添付（要ホームペーシビルダー？）
12. 以上ですが、wordpressのビジュアルモードの更新だとコードが蹴られる

●googlemap（埋め込みカスタマイズ）

地図データ地図データ ©2014 Google, ZENRIN

地図データ

地図データ ©2014 Google, ZENRIN

地図データ ©2014 Google, ZENRIN

利用規約

地図の誤りを報告する

地図

地形

航空写真

45°

ラベル

500 m

GET CODEのソース解析

<スクリプト src="https://maps.googleapis.com/maps/api/js?key=発行されたAPIKEYsensor=false&extension=.js">
 /*自分のAPI KEYこれは一つで複数のバリエーションマップが管理出来る*/
/*センサーエラーが出た場合ここをを指定sensor=(true or false)*/
/*上記サンプルソースでもセンサーエラーが発生した*/


 /*以下は表示させたい地図のjs*/
 

/*同じくhtmlの要素もmap●の名前に合わせid=map●で指定*/

00