javascriptreactjsgoogle-mapsgoogle-map-react

How I can make a static map with google-map-react in react?


I have this :

 <GoogleMapReact
      bootstrapURLKeys={{ key: 'key' }}
      defaultCenter={center}
      defaultZoom={zoom}
>
  <TacoMarker
   link={shop.id}
   lat={latitude}
   lng={longitude}
  />

 </GoogleMapReact>

What props can I pass you? Would it be like a scrollEnabled = {false}?


Solution

  • google-map-react is written to use Maps JavaScript API. Please note that Maps JavaScript API is different from Maps Static API. If you would like to show a static map in your react code, you can just directly put the Maps Static API URL in the src parameter of your <img/> tag.

    Here's a sample code snippet:

    import React from "react";
    import ReactDOM from "react-dom";
    
    function App() {
      return (
        <div>
          <h1>Static Maps Sample</h1>
          <img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY"/>   
        </div>
      );
    }
    
    ReactDOM.render(<App />, document.getElementById("root"));