0

Been trying to create a custom google map, i've written the code but something isn't quite right, wondered if anyone could point out what I've done wrong. Code is here:

<script type="text/javascript">
  function initialize() {
    var myLatlng = new google.maps.LatLng(30,0);
    var myOptions = {
      zoom: 2,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.TERRAIN
  }

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

  var countries = Array();

  countries.push({
      marker: new google.maps.Marker({position: new google.maps.LatLng(4.52,115), map: map, title: 'Test'}),
      infowindow: new google.maps.InfoWindow({content: "Hello world"})
  });
  countries.push({
      marker: new google.maps.Marker({position: new google.maps.LatLng(42.45,23.20), map: map, title: 'Test2'}),
      infowindow: new google.maps.InfoWindow({content: "Hello world2"})
  });
  countries.push({
      marker: new google.maps.Marker({position: new google.maps.LatLng(12.15,-1.30), map: map, title: 'Test3'}),
      infowindow: new google.maps.InfoWindow({content: "Hello world3"})
  });

  for each (var item in countries) {
      google.maps.event.addListener(item.marker, 'click', function() {
        item.infowindow.open(map, item.marker);
      });

}

Nick
  • 382
  • 1
  • 8
  • 26
  • 1
    _You_ need to tell _us_ what isn't right. – Matt Ball Aug 04 '11 at 10:48
  • The map is refusing to load, i just get an area of white space where the map should be – Nick Aug 04 '11 at 14:20
  • 1
    [Don't use `for each` to iterate over an `Array`.](https://developer.mozilla.org/en/JavaScript/Reference/Statements/for...in#Description) Use a regular `for` loop. – Matt Ball Aug 04 '11 at 14:40
  • thanks but for doesn't seem to allow the info windows to appear, for each does… – Nick Aug 04 '11 at 15:58

2 Answers2

0

It seems to work fine, I see a map with 3 markers but without knowing what the problem is it's hard to tell.

A few guesses:

  • You're missing a curly brace at the end which closes initialize
  • Do you have a div with an id of "map_canvas"?
  • Is initialize being called from anywhere?
  • Have you included the Google maps javascript?
Mark
  • 424
  • 3
  • 17
  • The issue was that the map wasn't displaying, strange that it works for you, will retest, thanks! – Nick Aug 04 '11 at 14:16
  • hmm still doesn't want to work for me, I have a curly bracket at the end, i have a div with the correct id (the div is being displayed but it's fully white with no map in) and I have included the js (), any more ideas? thanks! – Nick Aug 04 '11 at 14:19
  • http://pastebin.com/Jn74kdme here's a very rough mockup that should work? As a side note Matt, above, is right about using a regular for loop. – Mark Aug 04 '11 at 15:32
  • 1
    That's where Matt's comment comes in: change to use a regular for loop. e.g. for (var i=0;i – Mark Aug 04 '11 at 16:03
  • @ambuletz instead of pastebin try http://jsfiddle.net or http://jsbin.com for HTML/CSS/JS. – Matt Ball Aug 04 '11 at 17:42
0

Aside from using the wrong style for loop, you're trying to make a function in a loop. This is a very common mistake. Since JS has function-level scoping, not block level, this doesn't work as you might expect.

Try this:

function makeCallback(country) {
    return function () {
        country.infowindow.open(map, country.marker);
    };
}

var item;
for (var i=0; i<countries.length; i++) {
    item = countries[i];
    google.maps.event.addListener(item.marker, 'click', makeCallback(item));
}
Community
  • 1
  • 1
Matt Ball
  • 354,903
  • 100
  • 647
  • 710