JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="googlemaps"></div>

CSS

html,
body,
#googlemaps {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

JavaScript

var map;

 function initialize() {
   var mapOptions = {
     zoom: 17,
     styles: [{
       "stylers": [{
         "hue": "#16a085"
       }, {
         "saturation": 0
       }]
     }, {
       "featureType": "road",
       "elementType": "geometry",
       "stylers": [{
         "lightness": 100
       }, {
         "visibility": "simplified"
       }]
     }, {
       "featureType": "road",
       "elementType": "labels",
       "stylers": [{
         "visibility": "off"
       }]
     }]
   };
   map = new google.maps.Map(document.getElementById('googlemaps'),
     mapOptions);

   // Try HTML5 geolocation
   /* if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(function(position) {
       var pos = new google.maps.LatLng(position.coords.latitude,
         position.coords.longitude);
*/  
var pos = new google.maps.LatLng(42,-72);
       var contentString = '<div id="infowindow">Vous ĂŞtes ici :-)</div>'

       var infowindow = new google.maps.InfoWindow({
         map: map,
         position: pos,
         content: contentString
       });

       map.setCenter(pos);
       map.setZoom(2);
     /*}, function() {
       handleNoGeolocation(true);
     }); */

     // PHP file to render the data from sql
     // downloadUrl("phpsqlajax_genxml.php", function(data) {
       var xml = parseXml(xmlData); // data.responseXML;
       var markers = xml.documentElement.getElementsByTagName("marker");
       for (var i = 0; i < markers.length; i++) {
         var name = markers[i].getAttribute("name");
         var address = markers[i].getAttribute("address");
         var type = markers[i].getAttribute("type");
         var point = new google.maps.LatLng(
           parseFloat(markers[i].getAttribute("lat")),
           parseFloat(markers[i].getAttribute("lng")));
         var html = "<b>" + name + "</b> <br/>" + address;
         // var icon = customIcons[type] || {};
         var marker = new google.maps.Marker({
           map: map,
     ...