How to show 2 markers on a Google Map?

Question

How do I get multiple markers on a Google Map, using Javascript API v3? Below, when my code adds the second marker it's removing the first one.

var locations = {
    "1" : {
        "name": "location1",
        "address": "10000 N Scottsdale Rd",
        "city": "Scottsdale",
        "state": "AZ",
        "zipcode": "85253"                                              
    },
    "2" : {
        "name": "location2",
        "address": "15440 N 71st Street",
        "city": "Scottsdale",
        "state": "AZ",
        "zipcode": "85254"
    }
}               
var geocoder = new google.maps.Geocoder();
for (item in locations) {
    var loc = locations[item].address + ", " + locations[item].city + " " +
        locations[item].state + " " + locations[item].zipcode;
    geocoder.geocode( { 'address': loc}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var options = {
                zoom: 10,
                center: results[0].geometry.location,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true,
                zoomControl: true
            }
            if (map) {
                new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    title: locations[item].name
                });                                                                     
            } else {
                var map = new google.maps.Map(document.getElementById("map"), options);
                new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    title: locations[item].name
                });                                 
            }
            var infowindow = new google.maps.InfoWindow({ content: "test"});
        } else {  // if map lookup fails, display a map of phoenix
            var phoenix = new google.maps.LatLng(33.4483771,-112.07403729999999);
            var options = {
                zoom: 11,
                center: phoenix,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true,
                zoomControl: true
            }
            map = new google.maps.Map(document.getElementById("map"), options);
        }
    });
}

Answer 1

The map variable is only defined in the callback function, (eg function(results, status) {...} ), so when the second geocoded point comes back, you are still creating a new map (for the second time), since that map is not initialized.

You should declare and initialize the map separately from the marker adding code.

Answer 2

loop through your marker construction from your data set. Each item in your set, create a marker as you normally would. instatiate your map only once and use the variable assigned to this in your marker creation.