react-google-maps

问题 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

问题 This what i want, each marker to be sharing the same position as the lat and lng as the heatmap, the markers are working perfectly Im having problems sending data towards my heatmap, it seems like The heatmap from google receives and latitude and longitude differently than the markers positions? any idea ? when i create an array of list of objects like this but i want my data read just like my markers is reading it. It receive M for latitude and N for longitude. If i put a it inside a wrapper

问题 i want to render the component Searchbox, i copied it exactly in my app, but i get an error: error Line 44: 'google' is not defined no-undef Line 79: 'google' is not defined no-undef i already loaded my <script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_IS_HERE"></script> into the head of my index.html but it showes me the error anyway. Could it be, that index.html can't load my script ? i created my app with create-react-app 回答1: It is probably your linter

问题 I'm new to React and have been playing around with the react-google-maps package. I'm trying to curve a Polyline that joins two places. After going through the documentation, I'm trying to incorporate the curve polyline function under the 'editable' prop. Here's the function to curve the polyline: var map; var curvature = 0.4; // Arc of the Polyline function init() { var Map = google.maps.Map, LatLng = google.maps.LatLng, LatLngBounds = google.maps.LatLngBounds, Marker = google.maps.Marker,

问题 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 }

问题 Can someone tell me how to initialize React Google Maps's StandaloneSearchBox component with types: ['geocode'] (like in the original google.maps.places.Autocomplete, so i can restrict the autocomplete's suggestions of the input? 回答1: StandaloneSearchBox is a wrapper around google.maps.places.SearchBox. So Google documentation for SearchBox says that: The SearchBox constructor takes two arguments: An HTML input element of type text. This is the input field that the SearchBox service will

问题 Can someone tell me how to initialize React Google Maps's StandaloneSearchBox component with types: ['geocode'] (like in the original google.maps.places.Autocomplete, so i can restrict the autocomplete's suggestions of the input? 回答1: StandaloneSearchBox is a wrapper around google.maps.places.SearchBox. So Google documentation for SearchBox says that: The SearchBox constructor takes two arguments: An HTML input element of type text. This is the input field that the SearchBox service will

问题 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

问题 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

问题 I want to create button that removes all markers for the google maps react, i already have it working for the heatmap but it does not let me do the same strategy for the markers ? is it because the mapping that is being done ? than you i already set up all the other functions and states just one last step import React, { Component } from 'react'; import { Map, GoogleApiWrapper, InfoWindow, Marker, HeatMap } from 'google-maps-react'; import { connect } from 'react-redux'; const mapStyles = {