react-google-maps

react-google-maps: how to use fitBounds, panBy, panTo, panToBounds public APIs?

帅比萌擦擦* 提交于 2019-12-06 01:25:09
According to the React Google Maps library , you can call these four methods from the ref object. What seems weird, is that these methods are supposed to receive two parameters, a map instance and other arguments, like so: fitBounds(map, args) { return map.fitBounds(...args); } However, when calling fitBounds() this way, nothing happens on the map, no bounds are changed and no errors are thrown. This is the way I have structured the component, calling fitBounds in componentDidUpdate: import React from 'react' import { withGoogleMap, GoogleMap, InfoWindow, Marker, OverlayView } from 'react

React-google-maps - MarkerWithLabel - Labels overlap

↘锁芯ラ 提交于 2019-12-05 22:08:44
I'm trying to build a react project with the react-google-maps library. Basically it calculates the best route between 2 points and displays the route on the map using the library above. For drawing I'm using the Polyline and MarkerWithLabel modules: The Polyline to draw the segments The Markers to place the start of a segment The issue that I am having is the position of the labels form the MarkerWithLabel , if the zoom level is set to fit the whole route the labels overlap. This is because markers are very close and the zoom level is small, which is normal... I've also attached 2 images The

React-Google-Map multiple Info window open

拈花ヽ惹草 提交于 2019-12-05 14:39:17
I am currently building a google map api using react-google-maps and I would like to create multiple markers to display info of cities around the world on the info window. But since they are all from the html object. Whenever I clicked on one marker, all info windows will be opened. If there a way to fix this? Sample code: <GoogleMap defaultZoom={3} defaultCenter={{ lat: 40.452906, lng: 190.818206 }} > <Marker id = "mark1" options={{icon: Mark1}} position={{ lat: 34.4076645, lng: 108.742099 }} onClick={props.onToggleOpen} > {props.isOpen && <InfoWindow id = "info1" onCloseClick={props

How to change strokeColor between points when using DirectionsRenderer

旧巷老猫 提交于 2019-12-04 21:04:48
I'm using react-google-maps to render map in website. I have a problem about strokeColor for each line when using waypoints for DirectionsService. How to change strokeColor between them and how to callback after using DirectionsService . This is my source same example: https://tomchentw.github.io/react-google-maps/#directionsrenderer let DirectionsService = new google.maps.DirectionsService; var directionsDisplay = new google.maps.DirectionsRenderer; DirectionsService.route( { origin: new google.maps.LatLng(10.8441402, 106.76757429999999), destination: new google.maps.LatLng(10.8463797,106

How to use React with Google Places API, to display place markers on a Google map?

时光怂恿深爱的人放手 提交于 2019-12-03 09:45:09
问题 I'm trying to build a similar map as on Airbnb, where you can view place markers as you drag the map around. I would like to display "hotel" markers from the Google Places API on a map. Using the following JS code from Google Maps I can display hotels on the google map, but I would like to do this with React, using react-google-maps. <!DOCTYPE html> <html> <head> <title>Place searches</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> /

How to use React with Google Places API, to display place markers on a Google map?

余生颓废 提交于 2019-12-03 04:16:53
I'm trying to build a similar map as on Airbnb , where you can view place markers as you drag the map around. I would like to display "hotel" markers from the Google Places API on a map. Using the following JS code from Google Maps I can display hotels on the google map, but I would like to do this with React, using react-google-maps . <!DOCTYPE html> <html> <head> <title>Place searches</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map.

When displaying multiple markers on a map, how to open just one info window, when clicking on a marker?

爷,独闯天下 提交于 2019-11-29 10:51:37
I'm using react-google-maps to display a map with markers, and when you click on a marker, all the info windows open up. I would like to display only one marker's info window when I click on it, and for the others to stay closed. Here is my code: <GoogleMap defaultZoom={15} defaultCenter={{ lat: 51.508530, lng: -0.076132 }} > {props.places && props.places.map((place, i) => <Marker onClick={props.onToggleOpen} key={i} position={{ lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }} > {props.isOpen && <InfoWindow onCloseClick={props.onToggleOpen}> <div>{place.name}</div> <