JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="map"></div>
<script>
  function infoCallback(content, marker) {
    return function() {
      infowindow.setContent(content);
      infowindow.open(map, marker);
    };
  }
  var infowindow;
  function initMap() {
    infowindow = new google.maps.InfoWindow();
    var mapOptions = {
      zoom: 3,
      center: new google.maps.LatLng(37.5, -122),
      mapTypeId: 'roadmap'
    };


    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var bounds = new google.maps.LatLngBounds();
    var xml = parseXml(xmlStr);
    var places = xml.documentElement.getElementsByTagName("place");
    for (var i = 0; i < places.length; i++) {
      var lat = places[i].getAttribute('latitude');
      var long = places[i].getAttribute('longitude');
      var category = places[i].getAttribute('Info');
      var latLng = new google.maps.LatLng(lat, long);

      var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        category: places[i].info,
        label: places[i].name
      });
      bounds.extend(marker.getPosition());

      google.maps.event.addListener(marker, 'click', infoCallback(category, marker));
    }
    map.fitBounds(bounds);
  }

  var xmlStr = '<places><place latitude="37.4529598" longitude="-122.1817252" Info="Menlo Park, CA"/><place latitude="37.43355" longitude="-122.2030209" Info="West Menlo Park, CA 94025"/><place latitude="37.424106" longitude="-122.1660756" Info="Stanford, CA"/></places>';

  function parseXml(str) {
    if (window.ActiveXObject) {
      var doc = new ActiveXObject('MicrosoftXMLDOM');
      doc.loadXML(str);
      return doc;
    } else if (window.DOMParser) {
      return (new DOMParser).parseFromString(str, 'text/xml');
    }
  };

</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

CSS

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