JavaScript: multiple Google Maps pointers

by Emmanuel Garcia

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>

CSS

#map_canvas {
    width: 300px;
    height: 300px;
    margin: 2em auto;
}

JavaScript

var markers = [
       ['Centrale Palace Hotel', 38.11598863010514, 13.360705375671386],
       ['Crystal Palace', 38.12500311416266, 13.351221084594726],
       ['Hotel Politeama', 38.125982148424285, 13.3558988571167],
       ['Grand Hotel et des Palmes', 38.124631752904754, 13.359460830688476],
       ['Hotel Excelsior Hilton', 38.13101215191263, 13.351435661315918],
       ['Massimo Plaza Hotel', 38.12069858363917, 13.358688354492187],
       ['Grand Hotel Federico II', 38.124260389757865, 13.357744216918945],
       ['Hotel Vecchio Borgo', 38.12976312299185, 13.357744216918945],
       ['Hotel Wagner', 38.12550951283375, 13.358945846557617],
       ['Casa Marconi', 38.10592620640843, 13.354310989379882],
       ['Hotel Orleans', 38.10700680156137, 13.355340957641601],
       ['Hotel Florio', 38.12611718660244, 13.36113452911377],
       ['Hotel Athenaeum', 38.10619635669513, 13.351821899414062],
       ['Hotel Joli', 38.125104394177896, 13.360276222229004],
       ['Hotel Posta', 38.12112060765609, 13.361949920654296],
       ['Hotel Mediterraneo', 38.12297748435256,13.358259201049804]


       ];

   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
           });
           google.maps.event.addListener(marker, 'click', (function (marker, i) {
               return function () {
                   infowindow.setContent(markers[i][0]);
                   infowindow.open(map, marker);
               }
...