Google Maps Multiple Markers

by nnur ffarazi

HTML

<div>
    <div id="map" style="width: 500px; height: 400px;"></div>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</div>

JavaScript

var locations = [{
    "latitud": "55.76222",
    "ciudad": "Moscu",
    "longitud": "37.61556"
},{
    "latitud": "55.75222",
    "ciudad": "Moscu",
    "longitud": "37.61556"
},{
    "latitud": "55.78222",
    "ciudad": "Moscu",
    "longitud": "37.61556"
},{
    "latitud": "55.79222",
    "ciudad": "Moscu",
    "longitud": "37.61556"
}];

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    // center: new google.maps.LatLng(-33.92, 151.25),
    center: new google.maps.LatLng(locations[0].lat, locations[0].lng),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
        map: map
    });

    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(locations[i].lat, locations[i].lng);
            infowindow.open(map, marker);
        }
    })(marker, i));
}