CODEWITHSUNDEEP
javascriptreactjsgoogle-mapsgoogle-maps-markers
Andrei Tryfanau
Andrei Tryfanau

Reputation: 33

How to embed an exact place on google maps in Reactjs

I am redoing my website with Reactjs. I'm trying to embed an exact google place with reviews on the map so it would look like this (My website written with wordpress)

So far I could only display a pin with exact coordinates, and it would look like this

Is there a way to embed an exact place on the maps as the reviews are very important to be visible for my customers?

If I would copy the link with the embedded place like this <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12063.71295670172!2d-72.388377!3d40.895389!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x46289ec3b50eabb9!2sMove%20Plus!5e0!3m2!1sen!2sus!4v1613186587593!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe> into my function, the website would crash.

Here's my google maps component :

import React from "react";

import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
} from "react-google-maps";

const MapWrapper = withScriptjs(
  withGoogleMap((props) => (
    <GoogleMap
      defaultZoom={13}
      defaultCenter={{ lat: 40.895436, lng: -72.388484 }}
    > 
      <Marker position={{ lat: 40.895436, lng: -72.388484 }} /> 
    </GoogleMap>
  ))
);

function MyMap() {

  return (
    <>
            <MapWrapper
              googleMapURL="https://maps.googleapis.com/maps/api/myAPIHere"
              loadingElement={<div style={{ height: `100%` }} />}
              containerElement={<div style={{ height: `100%` }} />}
              mapElement={<div style={{ height: `100%` }} />}
            />
    </>
  );
}

export default MyMap;

Upvotes: 3

Views: 3667

Answers (2)

Narender Singh
Narender Singh

Reputation: 1

Here is a code below:

function initMap() {
    var mapOptions, map, marker,infoWindow = '',
    element = document.getElementById( 'map-canvas' );

mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng( 0,0 ),
    disableDefaultUI: false, // Disables the controls like zoom control on the map if set to true
    scrollWheel: true, // If set to false disables the scrolling on the map.
    draggable: true, // If set to false , you cannot move the map around.
};
map = new google.maps.Map( element, mapOptions ); // Till this like of code it loads up the map.
marker = new google.maps.Marker({
    position: mapOptions.center,
    map: map,
    // icon: 'http://pngimages.net/sites/default/files/google-maps-png-image-70164.png',
    draggable: true
});
}

window.initMap = initMap;

then call the map-search id in your render function

<div id="map-canvas" style={{height:500px, width:800px}}></div>

Upvotes: 0

Pagemag
Pagemag

Reputation: 2977

The map from the screenshot you want to achieve is using Maps Embed API while the "react-google-maps" library in your code is using Maps JavaScript API. These APIs are different and if you want to achieve the one from your screenshot in Reactjs, you can put the directly inside the div that you want to display. You can generate the iframe of your place you can check this link. Just search for your place and it will generate the iframe. Please note that there's a key parameter in the iframe link. This means that you need to put an API key in your request.

Here is a sample code and code snippet below:

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <div>
      <h1>MAPS!</h1>
      <p>Please see map below</p>
      <iframe
        width="600"
        height="450"
        style={{ border: 0 }}
        loading="lazy"
        allowfullscreen
        src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ92pXbcOV6IkRuasOtcOeKEY&key=YOUR_API_KEY"
      />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Upvotes: 1

Related Questions