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.
Related
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]
I am using google-maps-react library and i want to add cutom controls on google map like buttons, input elements etc. plaese see image i want like this.
google-map-react is a component written over a small set of the Google Maps API. It allows you to render any React component on the Google Map. It is fully isomorphic and can render on a server. Additionally, it can render map components in the browser even if the Google Maps API is not loaded. It uses an internal, tweakable hover algorithm - every object on the map can be hovered.
In the simple case you just need to add lat and lng props to any child of GoogleMapReact component.
import GoogleMapReact from 'google-map-react';
const AnyReactComponent = ({ text }) => <div>{text}</div>;
class SimpleMap extends Component {
static defaultProps = {
center: {
lat: 59.95,
lng: 30.33
},
zoom: 11
};
render() {
return (
// Important! Always set the container height explicitly
<div style={{ height: '100vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
defaultCenter={this.props.center}
defaultZoom={this.props.zoom}
>
<AnyReactComponent
lat={59.955413}
lng={30.337844}
text="My Marker"
/>
</GoogleMapReact>
</div>
);
}
}
export default SimpleMap;
I'm trying to add a simple google map on my About page using React. I get the below error notification in my terminal: Module not found: Can't resolve 'google-maps-react'. I installed google-maps-react so that shouldn't be the problem. Anyone seeing what's wrong?
import React from 'react'
import DefaultLayout from "../layout/Default"
import './About.css'
import { Map, GoogleApiWrapper } from 'google-maps-react';
class About extends React.Component {
render() {
const mapStyles = {
width: '100%',
height: '100%'
};
return (
<DefaultLayout>
<h1>About this app</h1>
<div className="containerabout">
<section className="locationmap">
<h2>Ironhack Amsterdam campus</h2>
<Map
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={{
lat: 52.370962,
lng: 4.883245
}}
/>
</section>
</div>
</DefaultLayout>
)
}
}
export default GoogleApiWrapper({
apiKey: "AIzaSyCw1Cu5QmZqsFLWq-D7m12E3Qqjjj13xWY"
})(About);
It seems okay.
Can you try reinstalling the package and then restarting webpack. Check if it is still a problem?
yarn add google-maps-react
or
npm install --save google-maps-react
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 attempting to make a small web app with React that involves a map. I'm using the HERE Maps react component (this is non-negotiable) but I'm having trouble getting the map to show up. I'm not sure if it's the Key or my understanding of React (which is small), that's causing the issue.
Map Component
import React from "react";
import { connect } from "react-redux";
import HEREMap from "react-here-maps";
#connect((store) => {
return {
};
})
export default class Map extends React.Component {
render() {
console.info(HEREMap);
const style = {
width: "100%",
height: "100%"
};
return <div style={style}>
<h1>Hello HERE</h1>
<HEREMap
appId="<ID>"
appCode="<CODE>"
center={{ lat: 51.5, lng: 0 }}
zoom={14}
/>
</div>
};
};
Main
import React from "react"
import ReactDOM from "react-dom"
import { Provider } from "react-redux"
import Map from "./components/Map"
import Layout from "./components/Layout"
import store from "./store"
const app = document.getElementById('app')
ReactDOM.render(
<Provider store={store}>
<Map />
</Provider>, app);
I noticed this in you code listing:
const style = {
width: "100%",
height: "100%"
};
A common problem is that the height of a block element like <div> defaults to the height of the block's content. By specifying it as a percentage like 100%, it will be the height of the element's parent which if it's just an empty container with no content will have a height of 0 and therefore not be visible.
The answers in Percentage Height HTML 5/CSS might be helpful for finding alternatives like setting the height of the body element.
There may also be something else going on as the react-here-maps package has a few issues, but you said that wasn't negotiable. For anybody else looking for a more standalone demonstration, the Use HERE Interactive Maps with ReactJS to Pick a Theme might be helpful. In the source example there, the height is fixed at 400px.