JSFiddle - React, Tailwind, and code Playground

by marhaba

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(40, 0),
		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),
					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 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)...