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>

CSS

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

JavaScript

var placeid_json = [{
  "placeid": 'ChIJu6HrLMVWIkcRWHTA90kiueI',
  "content": "   1   "
}, {
  "placeid": 'ChIJnXBuJ34zGUcRvt9FTKrPeeM',
  "content": "   2   "
}, {
  "placeid": 'ChIJiwUNhqX7PEcRdJjYqzrWYjs',
  "content": "   3   "
}];
var openedInfoWindow = null;
var bounds = new google.maps.LatLngBounds();
var map;

function initialize() {
  var latitude = 21.1202644,
    longitude = 79.0418986,
    radius = 8000,

    center = new google.maps.LatLng(latitude, longitude),
    mapOptions = {
      center: center,
      zoom: 10,

      scrollwheel: false
    };

  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  setMarkers(center, radius, map);
}

function setMarkers(center, radius, map) {

  var json = placeid_json;
  for (var i = 0, length = json.length; i < length; i++) {
    var data = json[i];
    createMarker(data, map);
  }
}

function createMarker(data, map) {
  var service = new google.maps.places.PlacesService(map);
  service.getDetails({
    placeId: data.placeid
  }, function(result, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }
    var marker = new google.maps.Marker({
      map: map,
      place: {
        placeId: data.placeid,
        location: result.geometry.location
      }
      //position: result.geometry.location
    });
    bounds.extend(result.geometry.location);
    map.fitBounds(bounds);
    infoBox(map, marker, data, result);
  });

}

function infoBox(map, marker, data, result) {
  var infoWindow = new google.maps.InfoWindow();

  google.maps.event.addListener(marker, "click", function(e) {

    infoWindow.setContent(data.content);
    infoWindow.open(map, marker);
  });

  (function(marker, data) {

    google.maps.event.addListener(marker, "click", function(e) {

      infoWindow.setContent(data.content + "<br>" + result.name);
      infoWindow.open(map, marker);
    });
  })(marker, data);
}


google.maps.event.addDomListener(window,...