Question

I am using a google maps API 3 for my application.

So what I want to do is next.
When page is loading I will get an array of positions in this format:

var locations = [
  ['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]
];

Firs I want to add marker to each of this positins

var marker, i;

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

Picture that goes on the marker:

var image = new google.maps.MarkerImage("images/truck3.png",
        new google.maps.Size(32.0, 37.0),
        new google.maps.Point(0, 0),
        new google.maps.Point(16.0, 18.0)
    );
  var shadow = new google.maps.MarkerImage("images/shadow-truck3.png",
        new google.maps.Size(51.0, 37.0),
        new google.maps.Point(0, 0),
        new google.maps.Point(16.0, 18.0)
    );

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    icon: image,
    shadow: shadow,
    title: 'Click to zoom'
  });

And this should zoom all the markers that are initialized in the center of the screen but only once at the beginning later on center is not used as user may fish to look something else on the map.

I want a markers to be moving all the time so maybe I need to add some event handler to fetch new position all the time?

Then comes the part when you click on the marker, you got zoomed and marker is still moving ( getting new position ) but now I need to use that ID that I will send in the php array so I can call some php function with that parameter.

After that when user clicks on the button which is on the side I want to be able to come at the beginning of my request and that means loaded markers in the center of the screen.

Part with the click:

 google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(13);
    map.setCenter(marker.getPosition());
    google.maps.event.addListener(map, 'center_changed', function() {
    // 1 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(function() {
      map.panTo(marker.getPosition());
    }, 1000);
  });
  });
}

So basically I told you everything that I want to achieve I am sure that a lot of you made the same thing. These are part of the code from a lot of sources I need to make them work together and add some smaller new features as I wrote above.

Thank you

Answer 1

So it sounds like you are retrieving the locations variable with a database query repeated every few seconds. In this demo I’m using JSON to retrieve the data, and update the location or create the marker if it doesn’t already exist.

http://freezoo.alwaysdata.net/truck2.html

    function updateTrucks() {
      $.ajax({
        url: "gettruck.php",
        cache: false,
        dataType: 'json',
        data: {},
        error: function(jqxhr, textStatus, errorThrown) {
          alert("Error: " + textStatus + " " + errorThrown);
        },
        success: function(data) {
        for(var i = 0; i < data.results.length; i++) {
          if(trucks.hasOwnProperty(data.results[i].id)) {
            // update position
            trucks[data.results[i].id].setPosition(new google.maps.LatLng(
              parseFloat(data.results[i].lat),
              parseFloat(data.results[i].lng)));
            trucks[data.results[i].id].speed = data.results[i].speed;
          }
          else {
            // create new marker
            trucks[data.results[i].id] = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(
                parseFloat(data.results[i].lat),
                parseFloat(data.results[i].lng)),
              title: data.results[i].name,
              id: data.results[i].id
            });

In your application the database will get updated by some means, here, the database is static and movement (for the demo) is artificially created with PHP rand, so every few seconds the markers appear in different locations.

header("Content-type: application/json");
echo '{ "results" : [ ';

$gettruck_result = $dbh->query("SELECT * FROM `truck`");
$result_array = array();

foreach($gettruck_result as $row) {
  $newlat = $row['lat'] + (0.0025 * rand(-3,3));
  $newlng = $row['lng'] + (0.0025 * rand(-3,3));

  $speed = $row['speed'] + rand(1,8);

  $row_object = '{';
  $row_object .= '"id": "' . $row['id'] . '", ';
  $row_object .= '"speed": "' . $speed . '", ';
  $row_object .= '"name": "' . $row['name'] . '", ';
  $row_object .= '"lat": "' . $newlat . '", ';
  $row_object .= '"lng": "' . $newlng . '"';
  $row_object .= '}';    
  $result_array[] = $row_object;
}

$result_str = implode(", ", $result_array);
echo $result_str;
echo " ] }";

Tracking a marker is done with two listeners:

        google.maps.event.addListener(trucks[data.results[i].id], 'position_changed', function() {
          if(typeof tracked !== "undefined") {
            if(this.id == tracked.id) {
              map.panTo(this.getPosition());
              $("#speed").val(this.speed);
            } 
          } 
        });         

        google.maps.event.addListener(trucks[data.results[i].id], 'click', function() {
          $("#trackedId").val(this.id);
          map.setZoom(13);
          map.setCenter(this.getPosition());
          tracked = this;
        });