JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;extn=.js"></script>
<div id="map_2385853" style="width:400px; height:300px;"></div>

JavaScript

var locations = {}; //A repository for markers (and the data from which they were contructed).

	//initial dataset for markers
	var locs = {
	    1: {
	        info: '11111. Some random info here',
	        lat: -37.8139,
	        lng: 144.9634
	    },
	    2: {
	        info: '22222. Some random info here',
	        lat: 46.0553,
	        lng: 14.5144
	    },
	    3: {
	        info: '33333. Some random info here',
	        lat: -33.7333,
	        lng: 151.0833
	    },
	    4: {
	        info: '44444. Some random info here',
	        lat: 27.9798,
	        lng: -81.731
	    }
	};
	var map = new google.maps.Map(document.getElementById('map_2385853'), {
	    zoom: 1,
	    maxZoom: 8,
	    minZoom: 1,
	    streetViewControl: false,
	    center: new google.maps.LatLng(30, 30),
	    mapTypeId: google.maps.MapTypeId.ROADMAP
	});
	var infowindow = new google.maps.InfoWindow();

	function setMarkers(locObj) {
	    $.each(locObj, function (key, loc) {
	        if (!locations[key] && loc.lat !== undefined && loc.lng !== undefined) {
	            //Marker has not yet been made (and there's enough data to create one).

	            //Create marker
	            loc.marker = new google.maps.Marker({
	                position: new google.maps.LatLng(loc.lat, loc.lng),
	                map: map
	            });

	            //Attach click listener to marker
	            google.maps.event.addListener(loc.marker, 'click', (function (key) {
	                return function () {
	                    infowindow.setContent(locations[key].info);
	                    infowindow.open(map, locations[key].marker);
	                }
	            })(key));

	            //Remember loc in the `locations` so its info can be displayed and so its marker can be deleted.
	            locations[key] = loc;
	        } else if (locations[key] && loc.remove) {
	            //Remove marker from map
	            if (locations[key].marker) {
	                locations[key].marker.setMap(null);
	      ...