I'm using the #react-google-maps/api to build my first react map.. But my latLng literal for position inside the Marker is breaking my code. Is this not the same latLng format that I'm using for center which works fine? How is my Marker latLng wrong? That seems to be the only required attribute in the docs so I'm at a dead end.
import React, { Component } from 'react';
import { GoogleMap, LoadScript, Marker } from '#react-google-maps/api';
import icon1 from '../map/icon1.svg';
import iconDead from '../map/iconDead.svg';
const center = { lat: 51.510228, lng: -0.132992 };
const API = 'xxxx';
const containerStyle = {
width: '100%',
height: '800px'
};
function MyComponent( markers, onToggleOpen ) {
return (
<LoadScript
googleMapsApiKey={API}
>
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={10}
>
<Marker position={ lat: 51.510228, lng: -0.132992 }></Marker>
<></>
</GoogleMap>
</LoadScript>
)
}
export default React.memo(MyComponent)
The position property is an object. Hand your lat and lng values like this:
<Marker position={{lat: 51.510228, lng: -0.132992}}></Marker>
Related
I have a working GoogleMapReact component that takes latitude and longitude, and places markers on the map. The problem I face is I need to style the Marker component and when I place it into DIV or any other html element, all markes lose their coordinates and are just in vertical row on the map.
Here is the code:
import React, { useState } from "react";
import GoogleMapReact from "google-map-react";
import getCenter from "geolib/es/getCenter";
import Marker from "../components/Marker";
function MapMe1({ searchResults }) {
//transform the search results object into {latitude,longitude} format
const coordinates = searchResults.map((result) => ({
longitude: result.long,
latitude: result.lat,
}));
const center = getCenter(coordinates);
const [viewport, setViewport] = useState({
width: "600px",
height: "max-height: 75%",
center: { lat: center.latitude, lng: center.longitude },
zoom: 11,
});
return (
<GoogleMapReact
//mapContainerStyle={containerStyle}
bootstrapURLKeys={{ key: process.env.google_maps_key }}
{...viewport}
onViewportChange={(nextViewport) => setViewport(nextViewport)}
>
{searchResults.map((result) => (
// It works, but if I wrap this in <div> lat and lng no longer available...
<Marker
lat={result.lat}
lng={result.long}
offsetLeft={-20}
offsetTop={-10}
titles={result.title}
/>
))}
</GoogleMapReact>
);
}
export default MapMe1;
I want to style the marker to show a tooltip but for some reason is the Marker component loses all data. Why is this happening?
I'm working on an app where I'd like to display a google maps with a marker. I thought I followed the steps correctly on the google-maps-react documentation, but I'm having issues.
First, the map shows up gray and none of the land/ocean is showing.
Second, the map seems to go off the screen but my browser doesn't scroll so I can't see the rest of the map. I'm assuming this has to do with the styling but I can't figure it out.
Here is a screenshot of the browser for reference:
My Map component:
import React, { Component } from 'react';
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
const mapStyles = {
width: '100%',
height: '90%',
};
export class MapContainer extends Component {
state = {
showingInfoWindow: false, // Hides or shows the InfoWindow
activeMarker: {}, // Shows the active marker upon click
selectedPlace: {} // Shows the InfoWindow to the selected place upon a marker
};
render() {
const {google, location} = this.props;
return (
<Map
google={this.props.google}
zoom={5}
style={mapStyles}
initialCenter={{
lat: location.latitude,
lng: location.longitude
}}
center={{
lat: location.latitude,
lng: location.longitude
}}
>
<Marker
name={'ISS'}
position={{
lat: location.latitude,
lng: location.longitude
}}
icon={{
url: 'https://icons.iconarchive.com/icons/goodstuff-no-nonsense/free-space/512/international-space-station-icon.png',
anchor: new google.maps.Point(32,32),
scaledSize: new google.maps.Size(80,80)
}}
/>
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey:process.env.REACT_APP_API_KEY
})(MapContainer);
Any help would be appreciated
I was actually able to solve the issue by adding the styling: 'overflow: visible' to my map component. I'm not sure why this was an issue or why it defaults to hidden, so if anyone has insight on that it would be helpful. But this solved both issues I was having.
I have a React code with . I created in console.cloud "Map styles" and mapId and linked them. Then I added the mapId to the code, but the styles didn't change.
render() {
return (
<LoadScript
mapIds={["xxxxxxxxxxxxx"]}
// id="6e120bcd575d29f7"
googleMapsApiKey="xxxxxxxxxxxxxxxxxxx"
>
<GoogleMap
mapContainerStyle={containerStyle}
center={{
lat: 50.751642333131244,
lng: 25.329876895818945
}}
zoom={17}
>
<Marker
onLoad={this.onLoad}
position={{
lat: 50.7516779698738,
lng: 25.329030658899786
}}
/>
</GoogleMap>
</LoadScript>
)
}
}
To implement Cloud-based maps styling, you need to add the mapId in the Maps Javascript script tag's &map_ids= parameter and the map object mapId parameter. The code you have only adds the mapId in the Maps JavaScript script tag. To add the mapId in your map object parameter, you need to add the mapId option inside your object to implement this styling using the #react-google-maps/api library. See working sample code and code snippet below:
import ReactDOM from "react-dom";
import React from "react";
import {
GoogleMap,
LoadScript
} from "#react-google-maps/api";
const lib = ["places"];
const id = ["6e120bcd575d29f7"]
const key = ""; // PUT GMAP API KEY HERE
const defaultLocation = { lat: 40.756795, lng: -73.954298 };
class Map extends React.Component {
render() {
return (
<div>
<LoadScript googleMapsApiKey={key} libraries={lib} mapIds={id} >
<GoogleMap
center={defaultLocation}
zoom={5}
options={{ mapId: "6e120bcd575d29f7" }}
mapContainerStyle={{ height: "400px", width: "800px" }}
/>
</LoadScript>
</div>
);
}
}
I removed mapId then styles worked.
import ReactMapboxGl, { Marker } from "react-mapbox-gl";
import React from "react";
const Map = ReactMapboxGl({
accessToken: process.env.REACT_APP_MAPBOX_TOKEN,
});
export default function App() {
return (
<Map
style="mapbox://styles/mapbox/streets-v9"
containerStyle={{
height: "100vh",
width: "100vw",
}}
center={[-74.006, 40.7128]}
>
<Marker coordinates={[-74.006, 40.7128]}>
<div>IAM HEEEEEEEEEEEEEEEEERE</div>
</Marker>
</Map>
);
}
This is a basic map showing using mapbox-react-gl.
There is no bug showing in console log but I can not see the marker on the map.
I think you didn't set the coordinates correctly (latitude, longitude)
They should be, based in your example [40.7128 -74.006]
In my react google maps code I am not able to set onclick open InfoWindow. I am referring to this tutorial: https://youtu.be/WZcxJGmLbSo?t=1545
my code:
import React, { useState } from "react";
import {
GoogleMap,
useLoadScript,
Marker,
InfoWindow,
} from "#react-google-maps/api"; // --> using #react package
const libraries = ["places"];
const mapContainerStyle = {
width: "100%",
height: "100vh",
};
const center = {
lat: 51.103807,
lng: 10.057477,
};
export default function App() {
const [setSState, sstate] = React.useState(null);
const { isLoaded, loadError } = useLoadScript({
googleMapsApiKey: process.env.REACT_APP_GOOGLE_KEY,
libraries,
});
if (loadError) return "error loading maps";
if (!isLoaded) return "loading maps";
return (
<div>
<GoogleMap
mapContainerStyle={mapContainerStyle}
zoom={6}
center={{ lat: 50.115509, lng: 8.690508 }}
>
<Marker
position={{ lat: 51.081753, lng: 13.696073 }}
onClick={() => {
sstate(!setSState);
console.log("marker clicked");
}}
}}
></Marker>
</GoogleMap>
</div>
);
}
I am not able to show the marker only when clicked. What shall I do? I am hard coding the data for now. I am still new to props.
And when click the X on marker and click on the marker again it crashes. I know I have to use onCloseClick which when I tried didnt work.
Have a look at the useState Hook docs.
The hook will give you a state variable to use, and a function that can be used to update that variable.
At the top of the component you want to have:
const [centerState, setCenterState] = useState(null);
and then you can use this in the Marker to update the state:
onClick={() => setCenterState(center)}
That will update the state, but in your code you are currently getting center from an object assigned outside of the component, you might want to think about what you are going to set in that state.