Send PHP generated JS variables to JS function for Google maps

Question

This is just a thought, it might not be feasible, googled it and can't come up with anything, I don't think I'm searching for it correctly, I don't really know how to word the problem, so I'll explain it:

So I pull my location data from a table like this in PHP:

$result = $Connect->query($sql);
$i = rand(00000000, 99999999);
while($locationData = $result->fetch_assoc()){
    $locationName = $locationData['locationName'];
    $locationStreetAndHouse = $locationData['locationStreetNameAndNumber'];
    $locationState = $locationData['locationState'];
    $locationLat = $locationData['locationLatitude'];
    $locationLon = $locationData['locationLongitude'];
    $returnThis .= 'var latLonV'.$i.' = new    google.maps.LatLng('.$locationLat.','.$locationLon.')
var marker'.$i.' = new google.maps.Marker({
position: latLonV'.$i.',
map: map,
title: "'.$locationName.'"
});';
$i++;
}
$Connect->close();

Then I Send that back to my JS like this:

$JSONData = array("true", $returnThis); 
echo json_encode($JSONData);

Then in JS I do this:

success:function (recievedData) {
  if (recievedData[0] == 'true') {
    initializeMap(recievedData[1]);
  }

}


function initializeMap(markerVar) {
    var myLatlng = new google.maps.LatLng(40.915117, -74.072465);
    var mapOptions = {
        zoom: 16,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

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

    markerVar;
}

});

Of course the map will come up without an issue and the first location comes up, but how do I take the JS data stored within the markerVar and use it?

I hope I'm explaining it correctly, sorry if it's a stupid way of doing it, I'm open to different way of doing it as well.

Sirko · Accepted Answer · 2013-01-24 10:41:27Z

2

Currently you create a string containing JavaScript code. Afterwards you encode this string via JSON, transfer it the client.

But here you do not execute it, but try to pass it on as a string.

A better approach would be to create an array of objects in PHP like this:

$returnVal = array();
while( /*...*/ ) {
  /* your init code */

  $returnVal[] = array( 'lat' => $locationLat, 'lon' => $locationLon /* etc */ );
}

echo json_encode( array( true, $returnVal ) );

On the client you can then use these values to generate all your markers dynamically:

function initializeMap(markerVar) {
  /* your init code */

  var marker = [], latLonV;
  for( var i=markerVar.length; i--; ) {
    // create the latlon object
    latLonV = new google.maps.LatLng( markerVar[i]['lat'], markerVar[i]['lon'] )

    // set the marker
    marker.push(new google.maps.Marker({
                         position: latLonV,
                         map: map,
                         title: markerVar[i]['title']
                       }));
  }
}

Depending on your needs, you may want to wish to insert the marker and latLonV objects into an separate array to get a hold of them later on.

edited Jan 24, 2013 at 10:41

answered Jan 24, 2013 at 10:21

Sirko

74.3k19 gold badges157 silver badges194 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user1053263 Over a year ago

Ohhh, This makes sense! I understand. OK, going to try this now. Thank you for taking the time to answer this.

user1053263 Over a year ago

does returnVal[] have to have a dollar sign like $returnVal[]?

Sirko Over a year ago

@user1053263 Yes it does. My mistake. Switching between languages I sometimes forget some details.

Sirko Over a year ago

@user1053263 Another typo. Should be a ; instead of the : - for( var i=markerVar.length; i--; ). The second ; is also important!

Sirko Over a year ago

@user1053263 The for syntax I used is a little more advanced. If you want to learn about for loops in JS, have a look at MDN.

|

Collectives™ on Stack Overflow

Send PHP generated JS variables to JS function for Google maps

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related