Questions tagged [google-map-react]
87 questions
1
vote
0 answers
google map with search in react js
I'm using google-maps-react library for maps in my react application, and I'm adding search address functionality in my application and facing CORS error.
Error:
Autocomplete.js
import React, { Component } from 'react';
import styled from…
Zain Khan
- 1,644
- 5
- 31
- 67
1
vote
1 answer
"google-map-react" npm package -> onClick event -> incorrect 'lat' and 'lng' values
NOT DUPLICATE BECAUSE: Because I am specifically using the "google-map-react" npm package to handle the Google Maps API I don't believe this is a duplicate question. This is more a question about the "google-map-react" package than the Google Maps…
Sheldonfrith
- 2,107
- 2
- 12
- 16
1
vote
1 answer
Is there a way to get the coordinates from this draggable marker using google-map-react?
I have made the marker so it is draggable on the map. I am trying to get the coordinates from the marker though so I can save them into my database.
Below is the code , is there a function that I can get the coordinates from when the marker has been…
jman4934
- 33
- 3
1
vote
1 answer
value of `google` prop in Map component
Trying to use google-maps-react library.
i imported the following:import {Map,Marker, GoogleApiWrapper} from 'google-maps-react'
one thing is unclear here and i could not find answer on tutorials.
what's the value…
Yasin
- 103
- 10
1
vote
1 answer
How to auto-scroll Google Map view in React?
Using the google-map-react package, I've created a MapView component in TypeScript as follows.
export function MapView({ getData }: MapViewProps): JSX.Element {
const [mapZoom, setMapZoom] = useState(5);
const [mapBounds,…
jonchaf
- 156
- 5
- 16
1
vote
0 answers
Inserting JavaScript giving errors in GoogleMaps
I have two json arrays with which I am trying to produce Markers on a Map.
I'm getting the error:
Attempted import error: 'find' is not exported from './data/geoData.json' (imported as 'geoData').
while trying to find the zip in the geoData array…
Jim from Princeton
- 721
- 1
- 9
- 19
1
vote
1 answer
re-render GoogleMapReact
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…
Puja Garg
- 251
- 3
- 11
1
vote
1 answer
How update the location of Google Map on React
I use a Google Map in a component, in the main component send props(coordinates as an array), finally the second component(the map) recived this, and i want to show the new location on the map.
Unfortunately this no works, the coordinates, changes…
Alexis Olveres
- 161
- 3
- 11
1
vote
0 answers
How to pan google-map-react when there's no space for a popover to be displayed
I'm using google-map-react to show some markers on the map and when the user clicks on the marker some information is displayed in a custom popover made with Reactstrap. But the issue is when the market is near the edge of the map the popover is…
Bilal Mohammed
- 139
- 1
- 5
1
vote
2 answers
Google-map-react - reactjs: How to dynamically show pop-up window after clicking on a marker
I am building a boat visualizer using AISHub. I was able to locate the vessels I wanted using latitude/longitude and show them on a map. However there are too many vessel (markers) and I don't know who is who.
The problem: How do I show a pop-up…
Emanuele
- 2,194
- 6
- 32
- 71
1
vote
0 answers
The clustering is abrupt, with first landing on the new tab with the copied url it does not work but works with refresh and zoom in and out
import MarkerClusterer from "@google/markerclusterer";
const [markerClusterer1, setMarkerClusterer1] = useState();
const handleApiLoaded = ({ map, maps }: Mapprops) => {
mapRef.current = { map, maps };
…
Tanu
- 1,286
- 4
- 16
- 35
1
vote
0 answers
ReferenceError: fetch is not defined - React Geocode
I have created a server-rendered react app. In different pages, I try to get multiple addresses from the user and I want to mark entered locations on Google Maps.
For testing purposes(to get familiar with geocode), I added react-geocode exactly…
parastoo
- 372
- 1
- 4
- 20
1
vote
4 answers
Google-Map-React how to get markers inside bounds?
I have the bounds when I move the map, but I have no clue how to get the markers contained with-in those bounds. I do not want to have to use new google.map.... I would like to keep using only React-Google-Map. If that is not possible then I will…
Taylor Austin
- 5,407
- 15
- 58
- 103
0
votes
0 answers
google-map-react marker position doesnt change with map
Google-map-react on changing map size (zoom-in, zoom-out) and changing map position doesn't make any change on my custom marker position and size. it still remain same.
If you have any insights or suggestions regarding this issue, I would greatly…
sami
- 29
- 4
0
votes
0 answers
Google-Map-React. How to add a map to my react project that has a dynamic center property
Struggling hard with this issue... I need a map on my react app that can change its center dynamically based on data passed in.
Map loads with this current code. Tried to pass lat, lng props into default center but it is an immutable object. The…
