reactでgoogle mapを表示する

はじめに

• 前回の記事でdocker にNginxをインストールしてSSLの環境を構築しました。 px-wing.hatenablog.com
• 理由は位置情報を取得して現在地にマーカーを表示したいと考えておりました。

実装

• 自分の実装方法が正しいとは思いませんが、もっと良い方法があれば教えてくだしあ。

useEffect( () => {
/*
    google api を読み込むscriptタグの生成
*/
    const script = document.createElement("script");
    const API = '<あなたが取得したgoogle map apiのkeyの設定>';
    script.src = `https://maps.googleapis.com/maps/api/js?key=${API}&callback=initMap`;
    script.async = false;
    script.defer = false;
    document.body.appendChild(script);

/*
    地図を表示するためのdivタグの生成
*/
    const element = document.createElement('div'); 
    element.id = "map";
    document.body.appendChild(element);

/*
    google map api のcall back関数を出力する
    これはreactでうまいことできないか調べたかった
*/
    const script2=document.createElement('script');
    script2.innerHTML = "  var map; function initMap() {map = new google.maps.Map(document.getElementById('map'), {center: {lat: -34.397, lng: 150.644},zoom: 8});}"
    document.body.appendChild(script2);

    
}, []

結果

• 上記のソースを実行すると地図が表示されていることを確認できる

余談

• 下記の例のようにパッケージを利用して簡単に実装することも考えたが自分がgoogle api で実装したいことができなそうなので、強引に実装してみました。 https://dev.to/jessicabetts/how-to-use-google-maps-api-and-react-js-26c2
• 自分の実装だと地図に位置など調整できるか心配ということで少しリファクトリング？してcomponent化してみました。下記の実装でも地図が表示されて表示位置が指定することができました！！！

import React, { useEffect } from 'react';

const Location = () => {
  useEffect( () => {
    const script = document.createElement("script");
    const API = '<あなたのAPIキーを指定して下さい>'
    script.src = `https://maps.googleapis.com/maps/api/js?key=${API}&callback=initMap`;
    script.async = false;
    script.defer = false;
    document.body.appendChild(script);

    const script2=document.createElement('script');
    script2.innerHTML = "  var map; function initMap() {map = new google.maps.Map(document.getElementById('map'), {center: {lat: -34.397, lng: 150.644},zoom: 8});}"
    document.body.appendChild(script2);

  }, [])
  
  return (
    <>
      <div id="map"></div>
    </>
  )
};

export default Location;