Gmap-React
This lib in development process - don't use it!
Very simple gmap react wrapper-lib.
Example:
const InteractiveMap = <Map center= lat: 515258541 lng: -008040660000006028 zoom=14 > <Marker position=lat: 515258541 lng: -008040660000006028 infoWindowContent="Some little part text" /> <Marker position=lat: 515158531 lng: -009040660000006011 infoWindowContent="Some little part text" /> </Map> ; ;
Examples
const InteractiveMap = <Map center=lat: -34397 lng: 150644 zoom=8 /> ; ;
const styleArray = featureType: 'all' stylers: saturation: -80 featureType: 'road.arterial' elementType: 'geometry' stylers: hue: '#00ffee' saturation: 50 featureType: 'poi.business' elementType: 'labels' stylers: visibility: 'off' ; const InteractiveMap = <Map center= lat: 406743890 lng: -739455 zoom=12 styles=styleArray /> ; ;
const coordinates = lat: -25363 lng: 131044; const InteractiveMap = <Map center=coordinates zoom=4 > <Marker position=coordinates title="Hello World!" /> </Map> ; ;
- InfoWindow https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple?hl=ru
Because info window always use the marker context it's realized as marker property
const coordinates = lat: -25363 lng: 131044; const contentString = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+ '<div id="bodyContent">'+ '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + 'sandstone rock formation in the southern part of the '+ 'Northern Territory, central Australia. It lies 335 km (208 mi) '+ 'south west of the nearest large town, Alice Springs; 450 km '+ '(280 mi) by road. Kata Tjuta and Uluru are the two major '+ 'features of the Uluru - Kata Tjuta National Park. Uluru is '+ 'sacred to the Pitjantjatjara and Yankunytjatjara, the '+ 'Aboriginal people of the area. It has many springs, waterholes, '+ 'rock caves and ancient paintings. Uluru is listed as a World '+ 'Heritage Site.</p>'+ '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+ 'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+ '(last visited June 22, 2009).</p>'+ '</div>'+ '</div>'; const InteractiveMap = <Map center=coordinates zoom=4 > <Marker position=coordinates infoWindowContent=contentString /> </Map> ; ;
How it works and why it so simple to use
Because all components props will put in gmap API
Example component "Map"
const GmapApi = thispropsgmaps; if GmapApiMap this;
As you can see app component props will be spread to GmapApi.Map params. So this approach allowed use the JSX syntax in context of Gmap API object.
Read the specification JS API GMap and use it in JSX syntax as props of component. https://developers.google.com/maps/documentation/javascript/examples/?hl=ru
Drow the geometry figures
- Component "Geometry"
Is unified element which create all graphical objects in GMap. Main props this element is "type". Let's see the source code of component "Geometry"
const GmapApi = thiscontextgmaps; if thiscontextmapInstance thisfigure = thispropstype ...thisprops ; thisfigure; return null;
As you can see this simple JSX wrapper. We call the GmapApi[this.props.type] method and spread the component params. So we might use the power of JS Gmap API drow components. Component "Geometry" allowed call the anythig method of GmapAPI.
Examples
- Simple polylines https://developers.google.com/maps/documentation/javascript/examples/polyline-simple?hl=ru