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 marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(37.4419, -122.1419),
    map: map
  });
  infoWindow(marker1, map, "title1", "address1", "http://www.google.com")
  var marker2 = new google.maps.Marker({
    position: new google.maps.LatLng(37.44, -122.14),
    map: map
  });
  infoWindow(marker2, map, "title2", "address2", "http://www.yahoo.com")


}
google.maps.event.addDomListener(window, "load", initialize);
// global infowindow
var iw = new google.maps.InfoWindow({
  maxWidth: 350
});

function infoWindow(marker, map, title, address, url) {
  google.maps.event.addListener(marker, 'click', function() {
    var html = "<div><h3>" + title + "</h3><p><a href='" + url + "' target='_blank'>Read More</a></p></div>";
    // set the content (saved in html variable using function closure)
    iw.setContent(html);
    // open the infowindow on the marker.
    iw.open(map, marker);
  });
}