Skip to content

Instantly share code, notes, and snippets.

@MicheleBertoli
Created October 25, 2016 18:31
Show Gist options
  • Save MicheleBertoli/89a35d07c7b51c347b7a99b549752d51 to your computer and use it in GitHub Desktop.
Save MicheleBertoli/89a35d07c7b51c347b7a99b549752d51 to your computer and use it in GitHub Desktop.
Gmaps Marker Icons
import React from 'react';
import ReactDOM from 'react-dom';
import { Gmaps, Marker } from 'react-gmaps';
const coords = {
lat: 51.5258541,
lng: -0.08040660000006028,
};
const App = React.createClass({
getInitialState() {
return {
ready: false,
};
},
handleMapCreated() {
this.setState({
ready: true,
});
},
render() {
return (
<Gmaps
height={300}
lat={coords.lat}
lng={coords.lng}
width={400}
zoom={12}
onMapCreated={this.handleMapCreated}
>
<Marker
icon={this.state.ready ? {
path: google.maps.SymbolPath.CIRCLE,
strokeColor: '#FF0000',
fillColor: '#FF0000',
fillOpacity: 0.8,
scale: 5
} : null}
lat={coords.lat + 0.01}
lng={coords.lng}
/>
<Marker
icon="http://maps.google.com/mapfiles/ms/icons/green-dot.png"
lat={coords.lat - 0.01}
lng={coords.lng}
/>
</Gmaps>
);
}
});
ReactDOM.render(<App />, document.getElementById('gmaps'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment