Googleマップをカスタマイズする方法。(表示編)

googlemap

前回、”Google Maps APIs Styling Wizard”を使って、地図をカスタマイズしましたが、今回は実際に自分のサイトへカスタマイズした地図の貼り付けにチャレンジします。

Google Maps APIの取得

Google Maps APIを使用するにはGoogle Maps APIキー取得する必要があります
取得方法は別記事に記載します。

CSSの記述

カスタムCSS

カスタムCSSに下記コードを記述します。
”mapSample”地図が表示されます。

#mapSample{
    width: auto;
    height: 400px;
}

HTMLの記述

地図の配置

<div id="mapSample"></div>

関数の配置

<script>
var map;
function initMap() {
  // #mapSampleに地図を埋め込む
  map = new google.maps.Map(document.getElementById('mapSample'), {
    // 地図の中心を指定
    center: {
      lat: 35.570231, // 緯度
      lng: 135.191836// 経度
    },
    // 地図のズームを指定
    zoom: 15,
    // 地図のスタイルを指定
    styles: [
      // styles の後ろに書き出されたJSONをペースト
    ]
});
}
</script>

center:初期の位置座標を指定する。
zoom:初期のズーム値を指定する。

MAP API呼び出しコードの記述

<script src="https://maps.googleapis.com/maps/api/js?key=実際のキーを記述;callback=initMap"></script>

カスタマイズした地図を張り付けたMAP

課金設定が無効時の表示

”You must enable Billing on the Google Cloud Project~”が発生する場合。

APIプロジェクトの課金設定が無効の場合は、下記画面が表示されます。

実際に張り付けたMAP

参考サイト

コメント