MultipleLocLatLong.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Google Maps APIs</title>

	
</head>
<style>
    
    html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	line-height: 1.5;
}
#map {
	height: 100%;
}

a {
	text-decoration: none;
}
    </style>
<body>

	<div id="map"></div>

	<script type="text/javascript">
    function initMap() {

	var broadway = {
		info: '<strong>Chipotle on Broadway</strong><br>\
					5224 N Broadway St<br> Chicago, IL 60640<br>\
					<a href="https://goo.gl/maps/jKNEDz4SyyH2">Get Directions</a>',
		lat: 12.84477,
		long: 80.2362
	};

	var belmont = {
		info: '<strong>Chipotle on Belmont</strong><br>\
					1025 W Belmont Ave<br> Chicago, IL 60657<br>\
					<a href="https://goo.gl/maps/PHfsWTvgKa92">Get Directions</a>',
		lat: 12.9010,
		long: 80.2279
	};

	var sheridan = {
		info: '<strong>Chipotle on Sheridan</strong><br>\r\
					6600 N Sheridan Rd<br> Chicago, IL 60626<br>\
					<a href="https://goo.gl/maps/QGUrqZPsYp92">Get Directions</a>',
		lat: 12.8283,
		long: 80.2188
	};

	var locations = [
      [broadway.info, broadway.lat, broadway.long, 0],
      [belmont.info, belmont.lat, belmont.long, 1],
      [sheridan.info, sheridan.lat, sheridan.long, 2],
    ];

	var map = new google.maps.Map(document.getElementById('map'), {
		zoom: 13,
		center: new google.maps.LatLng(12.84477, 80.2279),
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});

	var infowindow = new google.m  aps.InfoWindow({});

	var marker, i;

	for (i = 0; i < locations.length; i++) {
		marker = new google.maps.Marker({
			position: new google.maps.LatLng(locations[i][1], locations[i][2]),
			map: map
		});

		google.maps.event.addListener(marker, 'click', (function (marker, i) {
			return function () {
				infowindow.setContent(locations[i][0]);
				infowindow.open(map, marker);
			}
		})(marker, i));
	}
}
        
    </script>
	<script async defer 
					src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCnahpwY4LRTYlzEHnER3B_Y8NR1HzmrVE&callback=initMap"></script>
</body>

</html>