Google Maps with Multiple Markers and InfoWindow

Google Maps with Multiple Markers and InfoWindow

by Ankit Patidar

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=true"></script>
<div id="map_canvas"></div>
<button onClick="initializeMaps();">Button</button>

CSS

html, body, #map_canvas{height:100%;margin:0px;padding:0px}
strong{text-decoration:underline}

JavaScript

var markers = [
				{info:'<strong>Phone:</strong> (613) 695-9009<br> <strong>Email:</strong> [email protected]' , lat:"45.2501566",lng:"-75.8002568"},
				{info:'<strong>Phone:</strong> (647) 526-8473<br> <strong>Email:</strong> [email protected]' , lat:"43.717708",lng:"-79.390062"},
				{info:'<strong>Phone:</strong> (519) 855-4447<br> <strong>Email:</strong> [email protected]' , lat:"43.83514",lng:"-80.2529514"},
				{info:'<strong>Phone:</strong> (905) 691-9891<br> <strong>Email:</strong> [email protected]' , lat:"43.5231324",lng:"-79.942436"},
				{info:'<strong>Phone:</strong> (705) 566-8473<br> <strong>Email:</strong> [email protected]' , lat:"46.584407",lng:"-81.0791369"},
				{info:'<strong>Phone:</strong> (905) 417-8473<br> <strong>Email:</strong> [email protected]' , lat:"43.8553755",lng:"-79.516752"},
				{info:'<strong>Phone:</strong> (705) 434-3131<br> <strong>Email:</strong> [email protected]' , lat:"49.688068",lng:"-112.8460656"},
				{info:'<strong>Phone:</strong> (613) 876-8473<br> <strong>Email:</strong> [email protected]' , lat:"44.2762841",lng:"-76.7171885"}
			  ];

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].lat, markers[i].lng);
        bounds.extend(pos);
        marker = new google.maps.Marker({
            position: pos,
            map: map
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(markers[i].info);
                infowindow.open(map, marker);
            }
    	})(marker, i));
	}
   ...