Accessing JS Array to Place Markers on 2D Google Map [duplicate]

This question already has an answer here: Closed 12 years ago.

Possible Duplicate:

Accessing Javascript Array to placemarkers on Google Map

I have an array:

var CITIES = {
  "Buenos Aires":
  {latitude: -34.6084, longitude: -58.3732},
  "Santiago":
  {latitud开发者_运维问答e: -33.4254, longitude: -70.5665},
  "Gaborone":
  {latitude: -24.6541, longitude: 25.9087},
...
}

I need to place markers on a 2D Google Map; I try to do that with this function:

/*
 * void
 * mark()
 *
 * Markes locations of study abroad programs all around the world map
 */

function mark()
{
    // mark programs
    for (var city in CITIES)
    {
        // plant cities on map
        new google.maps.Marker({
         icon: "http://google-maps-icons.googlecode.com/files/smallcity.png",
         map: map,
         position: new google.maps.LatLng(CITIES[city].latitude, CITIES[city].longitude),
         title: 'CITIES[city]'
        });
    }
}

There's no error on the console.

How do I make the markers appear? (Does the error have to do with me referring to CITIES[city])?

---

Zoom

Are you zoomed in too far? Because it works for me if you deal with the issues below (live example):

// Note that this script is just before the closing body
// tag, so we can access items above by their ID and such.
// To avoid clashes, avoid creating any public symbols
// by using an anonymous scoping function.
(function() {
  // Our map
  var map;

  // Our cities
  var CITIES = {
    "Buenos Aires":
    {latitude: -34.6084, longitude: -58.3732},
    "Santiago":
    {latitude: -33.4254, longitude: -70.5665},
    "Gaborone":
    {latitude: -24.6541, longitude: 25.9087}
  };

  // Call our load function
  map = load();

  // Set up our handler on the button
  // (I don't recommend using `onclick` generally, I
  // recommend using a library that deals with the
  // addEventListener/attachEvent issue for you; just
  // using it here for simplicity.)
  document.getElementById('btnAdd').onclick = addMarkers;

  // Our load function
  function load() {
    var latlng, myOptions;

    // Get the map
    latlng = new google.maps.LatLng(-34.6084, -58.3732);
    myOptions = {
      zoom: 3,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    return new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

  // Add markers
  function addMarkers() {

    var cityName, city;

    for (cityName in CITIES)
    {
        city = CITIES[cityName];

        // plant cities on map
        new google.maps.Marker({
         icon: "http://google-maps-icons.googlecode.com/files/smallcity.png",
         map: map,
         position: new google.maps.LatLng(city.latitude, city.longitude),
         title: cityName
        });
    }
  }

  // The end of our anonymous scoping function; we call
  // it immediately.
})();

Issues with map

In your mark function, you're using the variable map. It's not defined in any of the code you've quoted, is it defined in the enclosing scope? If not, that might well be the problem.

You've commented below that it's a global variable, saying it's var map = null;. I don't think it can be null, though, it should be a Map or StreetViewPanorama instance according to the docs. E.g., like this example from "the basics" tutorial:

var map = new google.maps.Map(document.getElementById("map_canvas"),
                              myOptions);

Issues with CITIES[city]

If you want to access the value CITIES[city], instead of

title: 'CITIES[city]'

you want

title: CITIES[city]

(No quotes) But I think it's more likely you just want:

title: city

...because CITIES[city] is an object, and you probably want the city name, not the default stringification of the object (which will be [object Object]).

(No quotes). So:

for (var city in CITIES)
{
    // plant cities on map
    new google.maps.Marker({
     icon: "http://google-maps-icons.googlecode.com/files/smallcity.png",
     map: map,
     position: new google.maps.LatLng(CITIES[city].latitude, CITIES[city].longitude),
     title: city
    });
}

---

Off-topic #1

I'd probably cache the lookup, although a decent JavaScript implementation will do it for you (there are lots of bad ones that probably won't):

var cityName, city;

for (cityName in CITIES)
{
    city = CITIES[cityName];

    // plant cities on map
    new google.maps.Marker({
     icon: "http://google-maps-icons.googlecode.com/files/smallcity.png",
     map: map,
     position: new google.maps.LatLng(city.latitude, city.longitude),
     title: cityName
    });
}

---

Off-topic #2

CITIES is not an array. It's a non-array object. But that's fine, the for..in loop you're using is for looping through object properties (not array indexes) anyway, so that works out. :-)

---

Off-topic #3

You need a ; at the end of your CITIES declaration:

var CITIES = {
    ....
}; // <== here

JavaScript's semicolon insertion will provide it for you assuming there's a line break following the }, but it's never a good idea to rely on semicolon insertion.

---

// default latitude var LATITUDE = 42.3745615030193;

// default longitude var LONGITUDE = -71.11803936751632;

// global reference to map var map;

// load version 3 of the Google Maps API google.load("maps", "3", {other_params: "sensor=false"});

/* * void * load() * * Loads map. */

function load() { var latlng, myOptions;

// Get the map
latlng = new google.maps.LatLng(LATITUDE, LONGITUDE);
myOptions = {
  zoom: 3,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
return new google.maps.Map(document.getElementById("map"),
    myOptions);

}

/* * void * mark() * * Markes locations of study abroad programs all around the world map */

function mark() { var cityName, city;

for (cityName in CITIES)
{
city = CITIES[cityName];

// plant cities on map
new google.maps.Marker({
 icon: "http://google-maps-icons.googlecode.com/files/smallcity.png",
 map: map,
 position: new google.maps.LatLng(city.latitude, city.longitude),
 title: cityName
});
}

}

Harvard Abroad: Mapped

  <div id="top">
    <a href="index.php"><img alt="Harvard Abroad" src="Images/logo.jpg"></a>
  </div>

  <div id="logo">
    Harvard Abroad: Mapped
  </div>

  <div id="button">
    <input onclick="mark();" type="button" value="Map">
  </div>

  <div id="map">
  </div>

  <div id="bottom">
  |
  <a href="index.php" style="font-weight: bold">index</a>
  |
  <a href="search.php" style="font-weight: bold">search</a>
  |
  <a href="comment.php" style="font-weight: bold">comment</a>
  |
  <a href="viewcomment.php" style="font-weight: bold">view comments</a>      
  |
  <a href="logout.php" style="font-weight: bold">log out</a>
  |
  </div>