愛知県名古屋市のブランディングで育てる
ECコンサルティング・ECサイト構築会社|アイヴィクス株式会社

アイヴィクス株式会社
  • twitter
  • twitter
  • facebook
  • お問い合わせ
  • 0529903467

愛知県名古屋市のブランディングで育てる
ECコンサルティング・ECサイト構築会社|アイヴィクス株式会社

Google Maps API マーカーの使い方から実装例【JavaScript】

blog

ブログ

投稿日:20240410 更新日:20240614 カテゴリー: ブログ

Google Maps APIの概要

Google Maps APIを使用すると、地図関連の機能をWebサイトやモバイルアプリに組み込むことができます。

https://developers.google.com/maps?hl=ja

Google Maps APIを使用するにはGoogleアカウントが必要です。

また、当APIは従量課金になります。

少ないアクセスの場合(1ヶ月で28,500回まで)は無料で使うことができます。

https://mapsplatform.google.com/intl/ja/pricing/

地図を表示しマーカーやスタイルを変更するだけでなく、360°ストリートビュー画像を追加したり、さらに出発地と目的地の移動時間と距離を計算することもできます。

Google Maps APIの開発事例

Google Maps APIを使った開発事例をご紹介します。

ECサイトのとあるページで、配送可能範囲を地図上に表示したいという要望がありました。

現状、地図をサイト内に埋め込みしていました。

UIは大きく変えず要望を実現するために、Google Maps APIを使うことにしました。

既存ユーザーの導線を変えることなくサイトを改善できます。

今回はGoogle Maps JavaScript APIを使って、地図上にマーカーを表示し、その周りに円を描いてみます。

完成イメージのサンプルです。

google.maps.Markerは非推奨に

google.maps.Markerは、2024 年 2 月 21 日をもってサポートを終了したようです。

https://developers.google.com/maps/documentation/javascript/advanced-markers/migration?hl=ja

以前までは以下のコードのように利用していました。

new google.maps.Marker({
      position: coordinate,
      map,
      title:"アイヴィクス株式会社"
});

そのため移行後のgoogle.maps.marker.AdvancedMarkerElementクラスを使って、Googleマップをカスタマイズします。

APIキーを取得

Maps JavaScript APIに対して認証させる必要があります。

APIキーを取得する手順は以下です。

  1. Google play consoleを開く
  2. 「リソースの管理」からプロジェクトを作成する
  3. 「APIライブラリ」ページを開き、Maps JavaScript API を有効にする
  4. 「鍵と認証情報」から認証情報(APIキー)を作成する

Google Cloudでプロジェクトを作成

ページの上部にある「プロジェクト作成」のボタンを選択して、プロジェクト名を入力、組織を選択して作成します。

Maps JavaScript APIを有効にする

作成したプロジェクトを選択し、マップの一覧にある「Maps Java Script API」を選択して「有効にする」ボタンを選択します。

APIキーを作成・編集する

サイドメニューから「鍵と認証情報」を選択して、APIキーを取得します。

Maps JavaScript APIを有効にすると自動的にAPIキーが作成されています。

APIキーを編集し、分かりやすい名前にします。

そして、不正使用を防ぐためにキーの制限をします。

ローカル環境で開発する場合は、http://localhost/*等を指定します。(localhostはご自身の環境に合わせてください。)

マップIDを作成する

AdvancedMarkerElementではmapIdを引数にとる必要があります。

mapIdにDEMO_MA_IDを指定しても動作はしますが、本番運用では推奨されていません。

そのためGoogle play consoleのGoogle Maps PlatformからマップIDを作成します。

サイドメニューの「マップ管理」からマップIDを作成します。

名前を入力し地図の種類を選択します。

今回はJavaScriptを選択します。

マップIDの詳細については以下から確認できます。

https://developers.google.com/maps/documentation/javascript/get-map-id?hl=ja

そして、作成したマップIDの詳細は以下のようになります。

これでGoogle Maps APIを使用する準備が整いました。

地図をカスタマイズして表示させる

今回は指定したロケーションの周りに円のマーカーを描きます。

<!-- 地図の描画のスタイル設定 -->
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  width: 640px;
  height: 480px;
}
@media screen and (max-width: 1024px){
  #map {
    width: 100%;
  }
}


  // Maps JavaScript API の読み込み
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&amp;&amp;u().then(()=>d[l](f,...n))})({
    key: "apiKey",  // 登録したAPIキーを指定
    v: "weekly", // リリース チャンネルやバージョン番号を指定(推奨:weeklyは週ごとのチャンネルを指定)
  });


  let map;

  async function initMap() {
    // 座標
    let coordinate = { lat: 35.16933225736418, lng: 136.8946049833043 };

    // 地図の描画
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary(
        "marker",
    );
    map = new Map(document.getElementById("map"), {
        center: coordinate,
  zoom: 8.8,
  mapId: "mapId", // 作成したマップID
    });
    
    // 座標位置にマーカーを付ける
    new AdvancedMarkerElement({
        map,
        position: coordinate,
        title: "アイヴィクス株式会社",
    });
 
    // 60km圏内を円で囲む
    new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: coordinate,
      radius: 60000,
    });  
  }

  initMap();





今回はGoogle Maps APIを使った地図のカスタマイズ方法をご紹介しました。

Googleが提供するAPIサービスは、少ない実装で多くの機能を追加できます。

反対に言えば、できることが多いため使いこなすことが難しいとも言えます。

Google公式ドキュメントを参照しながらサイトに最適な使い方を選択しましょう。

ブランディングで育てるECコンサルティング会社|アイヴィクス株式会社

この記事が気に入ったらいいね!しよう

ECコンサルティングの最新記事をお届けします