#022 posted on 2017.07.11[ update: 2017.09.26 ]

Google Map APIの設定

goole map APIキーの取得と諸設定。

Google Developers Console (https://console.developers.google.com/)でプロジェクトを作成。

・ダッシュボードで「Google Maps JavaScript API」を検索して有効にする。

・認証キーの作成。(APIキー作成

・「Key restriction」で「HTTP referrers (web sites)」を選択してマップを設置するサイトのドメインを登録する。

…「*.example.com/*」サブドメインと下位のurlを許可。

…「example.com/*」下位のurlを許可。

…ローカル環境を許可する場合は、「local/*」を加える。

…ドメインを設定しない場合は、キーへのアクセス制限が無くなる。

 

javascriptを読み込む
ライブラリの読み込みが必要なのでhtmlに以下を記述。
<script src="//maps.googleapis.com/maps/api/js?key=APIキー"></script>

…「callback=runFunc」コールバック関数名を加えると、ライブラリ読み込み完了後に関数を実行できる。

 

 

マーカーアイコンの設定

icon: {
    url: "画像のパス",//マーカーの画像
    scaledSize: new google.maps.Size( 50, 50 ),//マーカーのサイズ
}

 

 

https://syncer.jp/Web/API/Google_Maps/JavaScript/

https://syncer.jp/Web/API/Google_Maps/JavaScript/Marker/icon/

https://www.ajaxtower.jp/googlemaps/

SHARE THIS ON...

- 人気記事 -