reactでgoogle mapに現在地のマーカーを表示する

はじめに

• 前回の記事でreactから強引にgoogle mapを表示する方法を調べました。

• こちらの記事では表示位置が画面下になっていたので、コンポーネント化して表示位置を調整したい

• 現在地を取得してgoogle mapに現在地のマーカーを表示したい

サンプルコード

• ほとんどReact関係なくなっている。ただのJSになっているのは、ご了承ください。

import React, { useEffect } from 'react';

const Location = () => {
  useEffect( () => {

    navigator.geolocation.getCurrentPosition(
      (position) => {

        const { latitude, longitude } = position.coords

        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 initMap = `
          var map;
          var marker;
          var infoWindow;
          var center = {
             lat: ${latitude}, 
             lng: ${longitude}
          };
          function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
              center: center,
              zoom: 15
            });
         
            marker = new google.maps.Marker({
              position: center,
              map: map
            });
         
            infoWindow = new google.maps.InfoWindow({
              content: '<div>現在地</div>'
            });
            marker.addListener('click', function() {
               infoWindow.open(map, marker);
            });
          }
        `;
        const mapScript=document.createElement('script');
        mapScript.innerHTML = initMap
        document.body.appendChild(mapScript)
      },
      err => console.log(err)
    );

  }, [])

  return (
    <>
      <h4>現在地</h4>
      <div id="map"></div>
    </>
  )
};

export default Location;

結果