JSFiddle - React, Tailwind, and code Playground

by William Irvine

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;extn=.js"></script>
<div id="map_2385853" style="width:1332px; height:752px;"></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:40.538834, lng:-74.555049, icon: 'http://i.imgur.com/DCU6Bzc.png' },
		2: { info:'22222. Some random info here', lat:40.543127, lng:-74.606598, icon: 'http://i.imgur.com/DCU6Bzc.png' },
		3: { info:'33333. Some random info here', lat:40.544770, lng:-74.632273, icon: 'http://i.imgur.com/DCU6Bzc.png' },
		4: { info:'44444. Some random info here', lat:40.489954, lng:-74.586175, icon: 'http://i.imgur.com/DCU6Bzc.png' }
	};
	var map = new google.maps.Map(document.getElementById('map_2385853'), {
		zoom: 11,
		streetViewControl: false,
		center: new google.maps.LatLng(40.5000, -74.6203),
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});
	var infowindow = new google.maps.InfoWindow();
	
	var auto_remove = true;//When true, markers for all unreported locs will be removed.

	function setMarkers(locObj) {
		if(auto_remove) {
			//Remove markers for all unreported locs, and the corrsponding locations entry.
			$.each(locations, function(key) {
				if(!locObj[key]) {
					if(locations[key].marker) {
						locations[key].marker.setMap(null);
					}
					delete locations[key];
				}
			});
		}

		$.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),
                    icon: loc.icon,
					map: map
				});

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

				//Remember loc in the `locations` so its...