Google Maps with Multiple Markers and InfoWindow

Google Maps with Multiple Markers and InfoWindow

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=true"></script>
<body onLoad="initializeMaps();">
    <div id="map_canvas"></div>
</body>
<!--http://www.dreamdealer.nl/tutorials/placing_multiple_markers_on_a_google_map.html-->
<!--
//get longitude and latitude
http://www.latlong.net/-->

CSS

#map_canvas {
    height:500px;
    width:100%;
    margin:0px;
    padding:0px
}
strong {
    text-decoration:underline
}

JavaScript

var markers = [{
    info: '<strong>Employee:</strong> Test, Employee <br> <strong>Patient:</strong> Test, Patient <br> <strong>Time On Site:</strong> 9hr 21min' ,
    lat: "38.9025865000000000",
    lng: "-76.9492371000000000"
}, {
    info: '<strong>Phone:</strong> 9098234147<br> <strong>Email:</strong> [email protected]',
    lat: "38.9283313000000000",
    lng: "-76.9602103000000000"
}];

function initializeMaps() {
    var myOptions = {
        zoom: 10,
        //center: latlng,
        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));
    }
    map.fitBounds(bounds);
}