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>
<input id="address" value="New York, NY" />
<input id="address2" value="Newark, NJ" />
<div id="map_canvas"></div>

CSS

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

JavaScript

//declare namespace
var up206b = {};

//declare map
var map;

function trace(message) {
  if (typeof console != 'undefined') {
    console.log(message);
  }
}

up206b.initialize = function() {
  var latlng = new google.maps.LatLng(52.136436, -0.460739);
  var myOptions = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  up206b.geocode();
}

var geocoder = new google.maps.Geocoder();

up206b.geocode = function() {
  var bounds = new google.maps.LatLngBounds();
  var addresses = [$('#address').val(), $('#address2').val()];

  addresses.forEach(function(address) {
    if (address) {
      geocoder.geocode({
        'address': address
      }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          createMarker(results[0].geometry.location, address, map);
          bounds.extend(results[0].geometry.location);
          map.fitBounds(bounds);
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  });
}

function createMarker(latlng, html, map) {
  var infowindow = new google.maps.InfoWindow({
    content: html
  });

  var marker = new google.maps.Marker({
    map: map,
    position: latlng
  });


  marker.addListener('mouseover', function() {
    infowindow.open(map, this);
  });


  marker.addListener('mouseout', function() {
    infowindow.close();
  });
}
google.maps.event.addDomListener(window, "load", up206b.initialize);