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="mapView"></div>

CSS

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

JavaScript

function initMap() {
  // Create the map.
  <!-- // var map; -->
  //alert("map ");

  var infoWindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(document.getElementById('mapView'), {
    zoom: 6,
    center: {
      lat: 20.5937,
      lng: 78.9629
    },
    mapTypeId: 'roadmap'
  });
  google.maps.event.addListener(map, "click", function(evt) {
    console.log(evt.latLng.toUrlValue(6));
  })
  // $.getJSON('data.php', function(data){
  var data = [{shopname: "fred", subarea: "area 1", mobile: "yes", category: "cat 1", center: {latitude: 23.644524, longitude:74.487305}, type: 1},
  {shopname: "george", subarea: "area 2", mobile: "yes", category: "cat 2", center: {latitude: 21.943046, longitude:81.936035}, type: 2},
  {shopname: "frank", subarea: "area 3", mobile: "yes", category: "cat 3", center: {latitude: 20.179724, longitude:77.189941}, type: 3}];
  // alert(data);
  // alert(JSON.stringify(data));
  var marker = [];
  var infowindow = [];
  var contentString = [];
  var bounds = new google.maps.LatLngBounds();
  for (var sd in data) {
    // alert(sd);
    contentString[sd] = '<div id="content">' +
      '<div id="siteNotice">' +
      '</div>' +
      '<h1 id="firstHeading" class="firstHeading">' + data[sd].shopname + '</h1>' +
      '<div id="bodyContent">' +
      '<p><b>Subarea: </b>' + data[sd].subarea + '</p>' +
      '<p><b>Mobile: </b>' + data[sd].mobile + '</p>' +
      '<p><b>Category: </b>' + data[sd].category + '</p>' +
      '</div>' +
      '</div>';

    infowindow[sd] = new google.maps.InfoWindow({
      content: contentString[sd]
    });

    if (data[sd].type == 1) {
      marker[sd] = new google.maps.Marker({
        icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
        position: {
          lat: parseFloat(data[sd].center.latitude),
          lng: parseFloat(data[sd].center.longitude)
        },
        map: map,
        infowindow: infowindow[sd]
      });
    }
    if (data[sd].type == 2) {
     ...