JSFiddle - React, Tailwind, and code Playground

by designworksinteractive

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
<ul >
  <label class="place"> Place 1<label><li>map</li>
  <label class="place"> Place 2<label><li>map</li>
    <li>Cronulla Beach</li>
    <li>Manly Beach</li>
    <li>Maroubra Beach</li>
</ul>

CSS

#map_canvas{
    width:300px;
    height:300px;
    float:left;
}
ul{
    margin:0;
    padding:0;
    float:left;
}
li{cursor:pointer;}

.place{
    color:red;
}

JavaScript

var markers = [
	['Bondi Beach', -33.890542, 151.274856],
	['Coogee Beach', -33.923036, 151.259052],
	['Cronulla Beach', -34.028249, 151.157507],
	['Manly Beach', -33.80010128657071, 151.28747820854187],
	['Maroubra Beach', -33.950198, 151.259302]
];

function initializeMaps() {
	var myOptions = {
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		mapTypeControl: false
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
	var infowindow = new google.maps.InfoWindow(); 
	var marker, i;
	var bounds = new google.maps.LatLngBounds();

	for (i = 0; i < markers.length; i++) { 
		var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
		bounds.extend(pos);
		marker = new google.maps.Marker({
			position: pos,
			map: map
		});
        (function(marker){
            google.maps.event.addDomListener($('li')[i],'click',function(){
                google.maps.event.trigger(marker,'click',{});
            });
        })(marker);
		google.maps.event.addListener(marker, 'click', (function(marker, i) {
			return function() {
				infowindow.setContent(markers[i][0]);
				infowindow.open(map, marker);
			}
		})(marker, i));
	}
	map.fitBounds(bounds);
 
}
initializeMaps()