How to add multiple markers in google maps?

Question

I am working on a project that uses PhoneGap libraries, ADT java plugin, HTML and jQuery. I use the code below for the geolocation but I don't know how to add multiple markers with infowindows. What is the proper way of adding multiple markers?

The script that I've use is this:

window.plebeosaur = window.plebeosaur || {
        map: function() {
            var // get the page's canvas container
                mapCanvas = document.getElementById( 'map_canvas' ),
                // define the Google Maps options
                map_options = {
                    zoom: 17,
                    // let's initially center on downtown Austin
                    center: new google.maps.LatLng( 30.264664, -97.747378 ),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                },
                // then create the map
                map = new google.maps.Map( mapCanvas, map_options ),


                myMarker = 0,
                displayLocation = function( position ) {
                    // create a new LatLng object for every position update
                    var myLatLng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude );


                    // build entire marker first time thru
                    if ( !myMarker ) {
                        // define our custom marker image
                        var image = new google.maps.MarkerImage(
                            'bluedot.png',
                            null, // size
                            null, // origin
                            new google.maps.Point( 8, 8 ), // anchor (move to center of marker)
                            new google.maps.Size( 17, 17 ) // scaled size (required for Retina display icon)
                        );


                        // then create the new marker
                        myMarker = new google.maps.Marker({
                            flat: true,
                            icon: image,
                            map: map,
                            optimized: false,
                            position: myLatLng,
                            title: 'I might be here',
                            visible: true
                        });


                    // just change marker position on subsequent passes
                    } else {
                        myMarker.setPosition( myLatLng );
                    }


                    // center map view on every pass
                    map.setCenter( myLatLng );
                },
                handleError = function( error ) {
                    var errorMessage = [ 
                        'We are not quite sure what happened.',
                        'Sorry. Permission to find your location has been denied.',
                        'Sorry. Your position could not be determined.',
                        'Sorry. Timed out.'
                    ];


                    alert( errorMessage[ error.code ] );
                },
                // cache the userAgent
                useragent = navigator.userAgent;


            // set the map canvas's height/width (Google Maps needs inline height/width)
            mapCanvas.style.width = mapCanvas.style.height = '100%';


            // allow iPhone or Android to track movement
            if ( useragent.indexOf('iPhone') !== -1 || useragent.indexOf('Android') !== -1 ) {
                navigator.geolocation.watchPosition( 
                    displayLocation, 
                    handleError, 
                    { 
                        enableHighAccuracy: true, 
                        maximumAge: 30000, 
                        timeout: 27000 
                    }
                );          


            // or let other geolocation capable browsers to get their static position
            } else if ( navigator.geolocation ) {
                navigator.geolocation.getCurrentPosition( displayLocation, handleError );
            }
        }
    };

Answer 1

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

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

Answer 2

var beaches = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
];

for (var i=0;i<beaches.length;i++)
{
    // add your markers here
}

You can add multiple markers, by populating an array of your locations and then iterating through the array to add each marker to the map. You could also create a function to add your event listeners for the info windows.