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="map"></div>
<script>
  var customLabel = {
    residential: {
      label: 'R'
    },
    commercial: {
      label: 'C'
    },
    both: {
      label: 'B'
    }
  };

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(43.6191, -113.9772),
      zoom: 8
    });
    var infoWindow = new google.maps.InfoWindow;
    var markers = [];
    var markerCluster = new MarkerClusterer(map, [], {
      imagePath: "https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m"
    });
    // downloadUrl('http://map.northwestdatacom.com/xml.php', function(data) {
    var xml = parseXml(xmlStr); // data.responseXML;
    var xmlmarker = xml.documentElement.getElementsByTagName('marker');
    Array.prototype.forEach.call(xmlmarker, function(markerElem) {

      var id = markerElem.getAttribute('id');
      var name = markerElem.getAttribute('name');
      var phone = markerElem.getAttribute('phone');
      var email = markerElem.getAttribute('email');
      var host = markerElem.getAttribute('host');
      var type = markerElem.getAttribute('service');
      var address = markerElem.getAttribute('address');

      var infowincontent = document.createElement('div');
      var strong = document.createElement('strong');
      strong.textContent = name;
      infowincontent.appendChild(strong);
      infowincontent.appendChild(document.createElement('br'));
      var text = document.createElement('text');
      text.textContent = address;
      infowincontent.appendChild(text);
      var icon = customLabel[type] || {};

      var geocoder = new google.maps.Geocoder();
      geocoder.geocode({
        'address': address
      }, function(results, status) {
        var locations = results[0].geometry.location;
        var marker = new google.maps.Marker({
          position: locations,
    ...

CSS

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