Questions tagged [google-map-react]
87 questions
0
votes
0 answers
Default marker as function component
Using this Google Map lib, from this link, I can create a default marker on the map. However, this onGoogleApiLoaded() will only be fired once. I wanted to always center marker on the map. But default marker will required a position at the minimum,…
Eric Low
- 83
- 1
- 1
- 8
0
votes
1 answer
Render multiple elements on map google-map-react
I have a trouble with rendering multiple elements using google-map-react. I'm doing everything like in example, with hardcoded element everything is okay, but with elements that I want to render using map method like I'm doing it with regular react…
slow rarrih
- 11
- 1
- 4
0
votes
1 answer
Linking JSON File to google-map-react to show marker on map
I am trying to link my JSON file to google-map-react. However, my JSON coordinates do not have "lat" and "lng" format but just [ 123.231, 39.234]. I'd tried to use
const data = [{ lat: location[0], lng: location[1] }]
But, it does not work :/
This…
GI HYUN NAM
- 41
- 1
- 7
0
votes
1 answer
how to add text info on google maps markers
I'm trying to display text next to a marker in a Google Map using the Google-map-react package. However no text is visible, only the marker itself is showing up. Here is my code:
import React, { Component } from 'react';
import GoogleMapReact from…
Leo Bogod
- 369
- 8
- 28
0
votes
1 answer
change position of custom marker on google-map-react
I am using google-map-react for my React project and I created custom markers.
The markers are rendered at the right location but from the top left corner:
The red dot is where the exact location is. However, I'd like the tail of the pin to be at…
Uj Corb
- 1,959
- 4
- 29
- 56
0
votes
1 answer
How to make sure map is loaded with google-map-react
I am using google-map-react and need to have access to the map.
I access the ref through doing something like:
this.map = ref} />
When I call the ref on componentDidMount() like so this.map.map_ it returns null because the…
Taylor Austin
- 5,407
- 15
- 58
- 103
0
votes
2 answers
google-map-react: Element type is invalid: expected a string
If i use marker tag then my component not working and it throwing an error some thing like this
my code is:
import React, { Component } from 'react';
import GoogleMap, { Marker } from 'google-map-react';
class Maps extends Component {
static…
KARTHIKEYAN.A
- 18,210
- 6
- 124
- 133
-1
votes
1 answer
React Props not populated
Trying to learn React and following this tutorial:https://youtu.be/GDa8kZLNhJ4?t=3547
There you have a App.js component that makes Travel Advisor API call that populates the data object:
import React, { useState, useEffect } from "react";
import {…
PinPiguin
- 457
- 2
- 7
- 19
-1
votes
1 answer
How to display shared link in google map react
I am using react-google-maps and I am able to display location based on lan and lat but I can not find any way to display location using shared link for example
https://goo.gl/maps/YBuwmbwH21yUE19Z9
I want to display this link in google map
Here is…
Tania Gupta
- 11
- 1
-2
votes
1 answer
How to add custom markers using google maps directions api in react js
Tech Stack - Google Map Directions Api, React JS, etc.
Problem Statement - Using google maps direction Api's i am drawing 3 pins i.e. origin, waypoints and destination. I am able to plot all these of these but unable to add custom markers to each of…
F-Developer
- 77
- 11
-2
votes
2 answers
Disable bubbles on embedded google maps
Any idea how to disable these bubbles on my embedded google map?
I'm embedding this into a react/typescript app with react-google-map
Here is my code :
import React, { FC, useState, useEffect } from 'react'
import GoogleMapReact from…
Dlongnecker
- 3,008
- 3
- 25
- 40
-2
votes
1 answer
Setting state using useState results in empty array on first call
I'm using the google-map-react component and I'm attempting to set the coordinates of the position the user clicked on. I have the coordinates, however the first time I click on the map (and the click event is fired), the array coordinates returns…
Andre MacNamara
- 19
- 6