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_canvas"></div>

CSS

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

JavaScript

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var infowindow = new google.maps.InfoWindow();
  var schoolLayer = new google.maps.Data();
  schoolLayer.setMap(map);
  let latLng = new google.maps.LatLng(37.4419, -122.1419);
  let school = new google.maps.Data.Point(latLng);
  schoolLayer.add({
    geometry: school,
    properties: {
      name: "school1"
    }
  });
  let latLng2 = new google.maps.LatLng(37.445, -122.145);
  let school2 = new google.maps.Data.Point(latLng2);
  schoolLayer.add({
    geometry: school2,
    properties: {
      name: "school2"
    }
  });
  google.maps.event.addListener(schoolLayer, 'click', function(e) {
    infowindow.setContent(e.feature.getProperty("name"));
    infowindow.setOptions({
      pixelOffset: new google.maps.Size(0, -40)
    })
    infowindow.setPosition(e.latLng);
    infowindow.open(map);
  })
}
google.maps.event.addDomListener(window, "load", initialize);