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]
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 am building in ReactJs my intent is to embed a map for directions to a business.
I have zero errors in the console, but yet still no display of the map? I read to change 100% on height and width to 1000px tried that and it did not work.
import React, { Component, useEffect } from 'react'
import { Maps, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
const mapStyles = {
width: '100%',
height: '100%'
};
export class Googlemap extends Component {
render() {
return (
<Maps
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={
{
lat: 42.338131411433736,
lng: -83.3935704444211
}
}
/>
);
}
}
export default GoogleApiWrapper({
apiKey: 'AIzaSyAxGE47DeXkR5rBP_wnJ_FS815zcWNwFRE'
})(Googlemap);
Now, I am trying to create an app with react and I am using Google Map API for the project.
I got this error but I have no idea why this occurs.
If anyone knows any clues please let me now.
import React from 'react';
import GoogleMapReact from 'google-map-react';
import { Paper, Typography, useMediaQuery } from '#material-ui/core';
import useStyles from './styles'
const Map = () => {
const classes = useStyles()
const isMobile = useMediaQuery('(min-width:600px)')
const coordinates = { lat: 0, lng: 0 }
return (
<div className={classes.mapContainer}>
<GoogleMapReact>
bootstrapURLKeys={{ key: 'AaosjbnsajsnbjIUYIkbbaskjbd' }}
defaultCenter={coordinates}
center={coordinates}
defaultZoom={14}
margin={[50, 50, 50, 50]}
options={''}
onChange={''}
onChildClick={''}
</GoogleMapReact>
</div>
)
}
export default Map;
a simple > is misplaced. Instead of passing props , unintentionally, you are passing children to the component.
<GoogleMapReact>
bootstrapURLKeys={{ key: 'AaosjbnsajsnbjIUYIkbbaskjbd' }}
defaultCenter={coordinates}
center={coordinates}
defaultZoom={14}
margin={[50, 50, 50, 50]}
options={''}
onChange={''}
onChildClick={''}
</GoogleMapReact>
change it to this:
<GoogleMapReact
bootstrapURLKeys={{ key: 'AaosjbnsajsnbjIUYIkbbaskjbd' }}
defaultCenter={coordinates}
center={coordinates}
defaultZoom={14}
margin={[50, 50, 50, 50]}
options={''}
onChange={''}
onChildClick={''}>
</GoogleMapReact>
Look at GoogleMapReact props
<GoogleMapReact ...props></GoogleMapReact>
I am writing my first React App (using create-react-app) and I wrote a Map component using google-maps-react. However, the links BELOW the map cannot be clicked.
Actually, on my webpage, this issue is present only on small and medium-sized screens, while it works perfectly on large screens (small, medium and large as defined by materializecss). I tried to reproduce the issue on a minimal working example, without materialize, just using the boilerplate code created by `npx create-react-app my-app' and adding the following:
MapComponent.js
import React from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';
const mapStyles = {
width: '80vw',
height: '45vw',
marginLeft: 'auto',
marginRight: 'auto',
display: 'block'
};
const MapComponent = (props) => {
return (
<div className="MapComponent">
<div>
Google
</div>
<Map
google={props.google}
zoom={10}
style={mapStyles}
initialCenter={{
lat: 40,
lng: 12
}}
/>
<div>
Google
</div>
</div>
);
}
export default GoogleApiWrapper({
apiKey: "Key"
})(MapComponent);
and then in App.js:
import React, { Component } from 'react';
import MapComponent from './MapComponent';
class App extends Component {
render() {
return (
<div className="Appr">
<MapComponent />
</div>
);
}
}
export default App;
(the key is not reported in the example, so maps will display the frame with an error message, but the issue is the same with the key). The first link to google.com can be clicked and works, while the second does not. Any solution/workaround?
Finally, I went through the source code of google-maps-react and found the solution. It is very simple but rather undocumented. Apart from style the Map component accepts a containerStyle prop, allowing to change the tyle of the container wrapping Map. By default, the position is set to position: absolute giving the aforementioned behavior. The following code solves the issue for me:
import React from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';
const mapStyles = {
width: '80vw',
height: '45vw',
marginLeft: 'auto',
marginRight: 'auto',
display: 'block'
};
const containerStyle = { {/* Added style */}
position: 'static'
}
const MapComponent = (props) => {
return (
<div className="MapComponent">
<div>
Google
</div>
<Map
google={props.google}
zoom={10}
style={mapStyles}
containerStyle={containerStyle} {/* Added prop */}
initialCenter={{
lat: 40,
lng: 12
}}
/>
<div>
Google
</div>
</div>
);
}
export default GoogleApiWrapper({
apiKey: "Key"
})(MapComponent);
I am showing a basic example of Google Maps React with a valid key but isntead of showing me the map it shows me a text saying "Loading map..."
import {GoogleApiWrapper, Map, MapProps} from 'google-maps-react';
import * as React from 'react'
export class MapContainer extends React.Component<MapProps> {
public render() {
return (
<Map
google={this.props.google}
centerAroundCurrentLocation={true}
zoom={20}
/>
);
}
}
export default GoogleApiWrapper({
apiKey: (API_KEY)
})(MapContainer)
There is no error in console log and anything.
First of all please make sure on the places you're including the MapContainer you're using the default export as follows:
import MapContainer from './pathToContainer/MapContainer'
Otherwise importing it via named export { MapContainer } you will skip GoogleApiWrapper HOC.
Also you may need to provide the width and height maps properties as follows:
<Map
style={{ width: '100%', height: '100%' }}
google={this.props.google}
centerAroundCurrentLocation={true}
zoom={20}
/>
Or you may need to style the map's wrapper div:
<div
style={{
position: "relative",
height: "calc(100vh - 20px)"
}}
>
<Map
google={this.props.google}
centerAroundCurrentLocation={true}
zoom={20}
/>
</div>
Here's a complete working example, taken from the docs.