Passing PHP variables to the Google Maps API

Question

When a user signs up to my application (college project), they are asked for their address. I convert this address to latitude and longitude and then store it in my database.

I access the latitude and longitude like so:

<?php
    require '../connect.php';
    session_start();
    $_SESSION['username'];

    $sql = "SELECT latitude, longitude FROM userinformation WHERE username = '". $_SESSION['username']. "'";
$result = $db->query($sql);

    if($result->num_rows > 0){
        while($row = $result->fetch_assoc()){
            $lat = $row["latitude"];
            $lng = $row["longitude"];
            echo $lat;
            echo $lng;

        }
    }
?>

I then try to pass the $lat and $lng variable into the Maps API script like so:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: '<?php echo $lat;?>', lng: '<?php echo $lng;?>'}
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: '<?php echo $lat;?>', lng: '<?php echo $lng;?>'}
  });
  marker.addListener('click', toggleBounce);
}

This gives me the following page:

PHP Page

I have also tried converted the PHP variables to JS:

var js_variable  = '<?php echo $lat;?>';
document.write(js_variable);
var js_variable1  = '<?php echo $lng;?>';
document.write(js_variable1);

I then pass in the JS variables instead of the PHP variables, however the output is still the same. What would be the correct way to pass a variable as lat/lng instead of a hardcoded value:

center: {lat: 59.325, lng: 18.070}
position: {lat: 59.327, lng: 18.067}

What does that PHP resolve to in the browser? If it looks exactly like the "hardcoded values" you specify above, it should just work (you probably don't want to use document write to create your "javascript" versions of the variables though) — geocodezip
– geocodezip, Commented Oct 27, 2015 at 0:58
@geocodezip In the browser I only get a blank Map canvas when I use variables containing the lat/lng however if I hardcode the values then I get a map. — Someguywhocodes
– Someguywhocodes, Commented Oct 27, 2015 at 1:03
If you view the source in the browser do the two versions (working/hardcoded vs. not working values from PHP) look the same? (I would assume not). Can you tell us what the difference is? — geocodezip
– geocodezip, Commented Oct 27, 2015 at 1:10
@geocodezip When I run the hardcoded values I get: position: {lat: 30.365273, lng: -81.699600} where as with the PHP escaping I get: position: {lat: '30.365273', lng: '-81.699600'}. So the '' are causing the issues but they are required to escape the PHP? — Someguywhocodes
– Someguywhocodes, Commented Oct 27, 2015 at 1:17

geocodezip · Accepted Answer · 2015-10-27 01:52:55Z

2

When I replace the values in the fiddle with strings {lat: '30.365273', lng: '-81.699600'}, I get a javascript error reported by the API: Assertion failed: InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number.

If I use parseFloat on those strings, it works:

code snippet:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: parseFloat('30.365273'),
      lng: parseFloat('-81.699600')
    }
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {
      lat: parseFloat('30.365273'),
      lng: parseFloat('-81.699600')
    }
  });
  marker.addListener('click', toggleBounce);
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

change your PHP to be:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: parseFloat('<?php echo $lat;?>'), lng: parseFloat('<?php echo $lng;?>')}
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: parseFloat('<?php echo $lat;?>'), lng: parseFloat('<?php echo $lng;?>')}
  });
  marker.addListener('click', toggleBounce);
}

edited Oct 27, 2015 at 1:52

answered Oct 27, 2015 at 1:37

geocodezip

162k14 gold badges228 silver badges257 bronze badges

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

3 Comments

Someguywhocodes Over a year ago

At first I got a blank white screen. I then saw that you forgot parseFloat in position : for lng. However this still didn't fix the problem of the blank white screen and I really cannot see why since the snippet works and it works on Jsfiddle. Here is my file in it's entirety (although it's all posted here anyhow): gist.github.com/adhorrig/806e353c7a159bd6836d.

Someguywhocodes Over a year ago

Nevermind, it's working now. I accidentally removed position:. Thanks a million! I was trying to solve this for five hours now. I'm curious why parseFloat fixed the issue though?

geocodezip Over a year ago

The API was rejecting the strings from PHP '<?php echo $lat;?>'; those have to be numbers. parseFloat takes a string representation of a floating point number and turns it into a number.

James · Accepted Answer · 2015-10-27 01:12:14Z

1

I think having the PHP echo the value directly into your JavaScript is likely the problem. Try passing lat and lng as parameters to your map function instead.

function initMap(myLat, myLng) {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: new google.maps.LatLng(myLat, myLong)
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: new google.maps.LatLng(myLat, myLong)
  });
  marker.addListener('click', toggleBounce);
}

Edit: try using the Google Maps function for setting latitude and longitude, as above.

edited Oct 27, 2015 at 1:12

answered Oct 27, 2015 at 0:30

James

93311 silver badges22 bronze badges

7 Comments

Someguywhocodes Over a year ago

Before var map I've tried declaring the variables like so : var myLat = '<?php echo $lat;?>'; but this implementation just gives me a blank white screen opposed to the screenshot in the op

James Over a year ago

Two things you could try: declare the variables outside the scope of the function, or possibly try using the parseInt("str"); function to get an integer value of whatever php is being echo'd, e.g. var strLat = '<?php echo $lat; ?>', and var myLat = parseInt(strLat);

Someguywhocodes Over a year ago

Hmm. I've tried both of these and still neither work. It's a tough one, I'm struggling to see why it's not working at this point.

James Over a year ago

Does the map render correctly when you pass hardcoded values?

Someguywhocodes Over a year ago

Yes it does and the values in my db for coordinates are valid latitude / longitude.

|

Collectives™ on Stack Overflow

Passing PHP variables to the Google Maps API

2 Answers 2

3 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related