Adding a Custom Overlay

by jimkennelly

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" defer aysnc></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

// This example creates a custom overlay called USGSOverlay, containing
// a U.S. Geological Survey (USGS) image of the relevant area on the map.

// Set the custom overlay object's prototype to a new instance
// of OverlayView. In effect, this will subclass the overlay class therefore
// it's simpler to load the API synchronously, using
// google.maps.event.addDomListener().
// Note that we set the prototype to an instance, rather than the
// parent class itself, because we do not wish to modify the parent class.

var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();

// Initialize the map and the custom overlay.
var json1 = [{"FlightRowID":166,"title":"5O1 - FACTORY BUNDLES","lat":33.445691662347642,"lng":-88.567521893419325,"description":"12126"},{"FlightRowID":167,"title":"5B1 - SHREDDED","lat":33.4461226729358,"lng":-88.566943698562682,"description":"26330"},{"FlightRowID":168,"title":"5P1 - PLATE \u0026 STRUCTURAL","lat":33.445714354406249,"lng":-88.565685921348631,"description":"7879"},{"FlightRowID":169,"title":"5Q1 - PLATE \u0026 STRUCTURAL","lat":33.446471958012609,"lng":-88.566226833499968,"description":"16891"},{"FlightRowID":170,"title":"5F1 - SHREDDED","lat":33.447348608698292,"lng":-88.56668466103396,"description":"44233"},{"FlightRowID":171,"title":"5K6 - #1 BUSHELING","lat":33.446026896893443,"lng":-88.565062617238326,"description":"16797"},{"FlightRowID":172,"title":"3G4 - HOME SCRAP","lat":33.444789721068773,"lng":-88.5649727890268,"description":"614"},{"FlightRowID":173,"title":"1C3 - HBI","lat":33.4447979539713,"lng":-88.564134455019868,"description":"4173"},{"FlightRowID":174,"title":"3L1 - RAIL ROAD CROPS","lat":33.444712747127539,"lng":-88.565607433806036,"description":"284"},{"FlightRowID":175,"title":"3S1 MILL ROLLS - CONSTRUCTION SCRAP","lat":33.44499722306368,"lng":-88.565630328375846,"description":"306"},{"FlightRowID":176,"title":"3P3 - PROCESSED...