Question

I have a MySQL database from which I fetch data to show a marker on my Google map. I would want to show n markers but I don’t know how to implement for-loop so that

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!',
});

would repeat n-times. I’ve tried adding for loop function but I can’t get it right. I’m only starting to learn JavaScript.

Here’s the rest of the code: http://jsfiddle.net/Wkn9v/7/

Thank you!

Answer 1

I modified your code so the logic is performed in the initialize function, because otherwise the loop wasn’t executing properly. There was some other stuff in the wrong places too. This works:

jQuery(function ($) {
  var map_canvas = document.getElementById('map_canvas');

  $.getJSON('http://www.wawhost.com/appProject/fetchmarker.php?callback=?', function (data) {
    initialize(data);
  });

  function initialize(data) {
    var myLatlng = new google.maps.LatLng(-25.363882, 131.044922),
      mapOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      },
      map = new google.maps.Map(map_canvas, mapOptions),
      pos, lat, lng, latlang, marker;

    for (var i = 0, l = data.length; i < l; i++) {
      localStorage.loc = data[i].location;

      pos = localStorage.loc.split(",");
      lat = parseFloat(pos[0]);
      lng = parseFloat(pos[1]);

      latlang = new google.maps.LatLng(lat, lng);

      marker = new google.maps.Marker({
        position: latlang,
        map: map,
        title: 'Hello World!' // <<< Keep in mind that trailing , that was here is unnecessary
      });
    }
  }

});

http://jsfiddle.net/userdude/Wkn9v/13/