JSFiddle - React, Tailwind, and code Playground

by maccaroo

HTML

<div id="map"/>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDBw1-bUk7Rm7GwtoQti_WaclGM_PpuC1o"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script src="https://github.com/googlemaps/v3-utility-library/blob/master/markerclusterer/images/m1.png"></script>
<script src="https://github.com/googlemaps/v3-utility-library/blob/master/markerclusterer/images/m2.png"></script>
<script src="https://github.com/googlemaps/v3-utility-library/blob/master/markerclusterer/images/m3.png"></script>
<script src="https://github.com/googlemaps/v3-utility-library/blob/master/markerclusterer/images/m4.png"></script>
<script src="https://github.com/googlemaps/v3-utility-library/blob/master/markerclusterer/images/m5.png"></script>

CSS

#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

GApiKey = 'AIzaSyDBw1-bUk7Rm7GwtoQti_WaclGM_PpuC1o';
// With directions: AIzaSyDpoi85suLn55vynG7MGYkISibOcvBnmPM

var map;
var script = document.createElement('script');


// This example uses a local copy of the GeoJSON stored at
// http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
document.getElementsByTagName('head')[0].appendChild(script);


// Loop through the results array and place a marker for each
// set of coordinates.
window.eqfeed_callback = function(results) {
  
  let features = results.features;
  let locations = [];

  for (var i = 0; i < features.length; i++) {

		var coords = features[i].geometry.coordinates;

    locations.push({
      latLng: new google.maps.LatLng(coords[1],coords[0]),
      title: features[i].properties.place
    });
  }
  
  // Add some markers to the map.
  // Note: The code uses the JavaScript Array.prototype.map() method to
  // create an array of markers based on a given "locations" array.
  // The map() method here has nothing to do with the Google Maps API.
  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location.latLng,
      label: location.title
    });
  });
  
  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers,
		{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}


function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -31.9505, lng: 115.8605},
    zoom: 3
  });
  
  var joondalup = {lat: -31.7450, lng: 115.7661};
  var marker = new google.maps.Marker({
  	position: joondalup, 
    map: map,
    label: "Joondalup"});
}


initMap();