re-render GoogleMapReact

Question

Hi I am creating nextjs Application in which I have used GoogleMapReact from google-map-react library,I want to re-render my GoogleMapReact component according to the new prop

here is my map.js file

import GoogleMapReact from 'google-map-react'
import { AsYouType } from 'libphonenumber-js'
import React, { useState, useEffect } from 'react';

const phoneFormat = new AsYouType('US')
const Marker = props => `
  <div class="max-w-sm rounded overflow-hidden shadow-lg">
    <div class="px-2">
      <div class="font-bold text-base mb-2 text-blue-500">
        <a href=${"/locations/"+props.id}>
          ${props.city}
        </a>
      </div>
      <p class="text-dark-400 text-sm">${props.street}</p>
      <p class="text-dark-400 text-sm mb-2">
        ${props.city}, ${props.stateIso}, ${props.countryIso}, ${props.postalCode}
      </p>
      <p class="text-gray-700 font-medium mb-2">
        Phone: <span class="font-light">${phoneFormat.input(props.phone)}</span>
      </p>
      <p>
        <a class="text-blue-500" href="https://www.google.com/maps/dir/'+${props.defaultLat}+','+${props.defaultLng}+'/'+${props.latitude}+','+${props.longitude}+'">
        Directions
        </a>
      </p>
    </div>
  </div>
`
// Map component should always take in array of LocationSummary object
// ToDo: setting prop types.
export default function Map(props) {
  const defaultProps = {
    center: {
    lat: (typeof(props.latitude) === "undefined" ? 37.0902 : props.latitude),
    lng: (typeof(props.longitude) === "undefined" ? 95.7129: props.longitude),
    },
    zoom: 5
  }

  function handleApiLoaded(map){  
    let infowindow = new google.maps.InfoWindow()
    props.locations.map((location) => {
      let marker = new google.maps.Marker({position: {lat: parseFloat(location.latitude), lng: parseFloat(location.longitude)}, map: map, title: location.name})
      marker.addListener('click', function() {
        infowindow.close()
        infowindow.setContent(Marker(location))
        infowindow.open(map, marker)
      })
    })
  }
  return (
    <div style={{ height: '500px', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: '123' }}
        center={defaultProps.center}
        defaultZoom={defaultProps.zoom}
        yesIWantToUseGoogleMapApiInternals
        onGoogleApiLoaded={({ map }) => handleApiLoaded(map)}
      />

    </div>
  )
}

Here prop.locations has the updated array result , but the issue is its not getting refreshed in my map , Can anyone suggest me how can I do this so that my map will re render on data change??

were you able to fix this issue eventually? – alpha_beta_gamma Jun 14 '23 at 23:43 — alpha_beta_gamma, Jun 14 '23 at 23:43

glinda93 · Answer 1 · 2020-09-13T15:53:22.617

1

You're using onGoogleApiLoaded in a wrong way.

By looking into the source code you can see that onGoogleApiLoaded is never called twice:

if (!this_.googleApiLoadedCalled_) {
    this_._onGoogleApiLoaded({ map, maps, ref: this_.googleMapDom_ });
    this_.googleApiLoadedCalled_ = true;
}

You're using react google map component in a wrong way. It should be like this one:

<GoogleMapReact
    bootstrapURLKeys={{ key: '123' }}
    center={defaultProps.center}
    defaultZoom={defaultProps.zoom}
>
    { props.locations.map(location => (
        <Marker 
            lat={location.lat}
            lng={location.lng}
        />
    )) }
</GoogleMapReact>

For marker and info window, please look at the example

edited Sep 13 '20 at 15:53

answered Sep 13 '20 at 15:22

glinda93

7,659
5
40
78

handleApiLoaded is only not getting called again , I tried your solution as well still the same issue – Puja Garg Sep 13 '20 at 15:37
@PujaGarg Maybe you're updating `locations` in a wrong way. – glinda93 Sep 13 '20 at 15:43
I am updating in parent components and passing it to my map component ,other childs are getting updated, only map is not getting updated – Puja Garg Sep 13 '20 at 15:44
Even I tried printing props.locations it has the update value – Puja Garg Sep 13 '20 at 15:45
But using our own marker component won't give proper positioning of markers, can I somehow override the condition given in the library? – Puja Garg Sep 13 '20 at 16:36
@PujaGarg No, you shouldn't... *using our own marker component won't give proper positioning of markers* - I doubt it. If you're facing a problem, open an issue in github repository. That'd be better. – glinda93 Sep 13 '20 at 17:30
@glinda93 I am doing a Distance Matrix call to the distance between two addresses, how would I go about doing that with the google-maps-react library if the ```onGoogleApiLoaded``` is only called once? – Embedded_Mugs Jul 23 '21 at 09:08
1

@Embedded_Mugs https://github.com/google-map-react/google-map-react#use-google-maps-api, save the `map` and `maps` in ref values. – glinda93 Jul 23 '21 at 12:01

re-render GoogleMapReact

1 Answers1