Questions tagged [google-map-react]
87 questions
14
votes
2 answers
Difference between google-map-react and react-google-maps
There are two most popular react abstraction of google maps API(judging by the weekly npm downloads and github repo stars). For a beginner like me, it is very confusing as I am not able to decide what can these libraries bring to my project and what…
uneet7
- 2,925
- 7
- 24
- 41
10
votes
4 answers
google-map-react not loading- Uncaught TypeError: Cannot read properties of undefined (reading 'getChildren')
import React from "react";
import GoogleMapReact from "google-map-react";
const AnyReactComponent = ({ text }) =>
{text}
;
export default function AppMapPage() {
const defaultProps = {
center: {
lat: 10.99835602,
lng:…
Suraj Regmi
- 253
- 3
- 11
8
votes
3 answers
You have included the Google Maps JavaScript API multiple times on this page
how can I avoid “You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.” if I am using google-map-react to display the map and react-places-autocomplete in another component to get the address…
Kamran
- 819
- 3
- 14
- 22
7
votes
2 answers
How to update fillColor of polygonOptions with props?
I'm drawing custom polygon with DrawingManager.
I would like of modify fillColor of polygon with props. What should I do?
import React from 'react'
import GoogleMap from 'google-map-react'
export default (props: any) => {
let {color} = props
…
cura
- 1,035
- 1
- 17
- 33
6
votes
1 answer
Map marker moves when zooming in and out with google-map-react
I am adding a map with a marker marking a fixed location in my React app, all works fine, but if I zoom out, the marker moves around and goes further to the right of where it should do.
import GoogleMapReact from 'google-map-react';
import { Icon }…
Danny Jebb
- 802
- 1
- 7
- 16
6
votes
2 answers
How to implement Google Maps search box in a React application
I'm new to React and Google Maps. I'm using google-map-react to integrate Google Maps to my React application. I was able to successfully load the map and add markers.
But I'm getting an error when trying to add the SearchBox. I followed the…
zeee
- 401
- 1
- 6
- 16
4
votes
2 answers
How to use google-map-react with Next.js?
I'm not sure what I'm doing wrong. I'm trying to use google-map-react in my Next.js application. I copied the example on their npm page almost verbatim. Here's the code:
import React from "react";
import GoogleMapReact from…
neilge
- 281
- 4
- 6
4
votes
3 answers
How center the new location of Google Map on React?
I use google-map-react to display a Google Map with Custom Marker to show a location.
Can i change the location succesfully, its mean, passing lat and lng to the map component and put the marker on the new location, butthe view of the map its still…
Alexis Olveres
- 161
- 3
- 11
4
votes
1 answer
REACT how can i draw a route with google-map-react?
how can i draw a route with npm google-map-react ?
this is what i have
this.map = (zoom, lat, lng) => {
let DirectionsService = new window.google.maps.DirectionsService();
DirectionsService.route(
{
origin: new…
Nr Ri
- 41
- 1
- 3
4
votes
1 answer
What does 'AnyReactComponent' do?
I started work with google-map-react and found this line:
const AnyReactComponent = ({ text }) =>
{text}
What does it do?
Alexey Nikonov
- 4,958
- 5
- 39
- 66
3
votes
0 answers
I can't figure out how to make my marker draggable with google-map-react (been trying for a while)
I'm rather new to React & I'm trying to make a map that allows you to drag an infinite number of markers from a sidebar onto the google map.
import GoogleMapReact from 'google-map-react';
import { useState, useRef } from 'react';
import Marker from…
rayleigh
- 31
- 1
3
votes
1 answer
google-map-react draggable marker - onChildMouseMove not working on mobile
This works beautifully on a computer, but I just tried testing it on mobile, and none of the onChildMouse event handlers are recognized. I've tried finding other event handlers, but onChildMouseXXX is the only ones I see for this package. How can I…
gwalshington
- 1,418
- 2
- 30
- 60
3
votes
3 answers
How to add MarkerClusterer to google-map-react
I want to implement MarkerClusterer in my google map. Is there any library or component I can use for the same. Thank you. This is how my code looks now. Thank you.
const handleApiLoaded = ({ map, maps }: MapProps) => {
console.log(maps);
…
Tanu
- 1,286
- 4
- 16
- 35
2
votes
0 answers
Updating Markers to Google Maps in google-map-react
onGoogleApiLoaded not invoked on locations data change, Is there any way to achieve this?
I tried to use useEffect to load markers but then I have to save map and maps objects in useRef as well as markers
Is there any easier way to achieve this?
…
Abhijit Desai
- 147
- 1
- 5
2
votes
2 answers
google-map-react marker onclick not working
Just to be clear I am using react-google-map https://www.npmjs.com/package/google-map-react
and I followed the documentation clearly and I was able to get it working. here is my code.
import React from 'react';
import GoogleMapReact from…
Shrinidhi Hegde
- 454
- 3
- 14