Using PHP variables in Google Maps Directions API

Question

I am using the code provided by Google showing their Google Maps Directions API. I have manually changed the origin and destination values and it works perfectly. However when trying to replace the origin and destination values with PHP variables the map won't load.

Here's my code, any advice would be greatly appreciated.

 <body>

  <?php
  $start = "Leeds";
  $end = "Nottingham";
  ?>

     <div id="right-panel"></div>


   <script type="text/javascript">

     var directionsService = new google.maps.DirectionsService();
     var directionsDisplay = new google.maps.DirectionsRenderer();

     var map = new google.maps.Map(document.getElementById('map'), {
       zoom:7,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     directionsDisplay.setMap(map);
     directionsDisplay.setPanel(document.getElementById('right-panel'));


     var request = {
       origin: <?php echo $start; ?>,
       destination: <?php echo $end; ?> ,
       travelMode: google.maps.DirectionsTravelMode.DRIVING
     };

     directionsService.route(request, function(response, status) {
       if (status == google.maps.DirectionsStatus.OK) {
         directionsDisplay.setDirections(response);
       }
     });
   </script>
</body>
</html>

score 3 · Answer 1 · 2017-09-20T17:23:23.070

3

I believe you're missing quotes around the PHP. Try this. When you use echo in PHP,

$Example = "hey";

The PHP will only echo whats inside the quotes. So in your JavaScript you have to add them manually or your result is

  origin: Start,
  destination: End

It needs to be

 origin: 'Start',
  destination: 'End'

   <script type="text/javascript">

     var directionsService = new google.maps.DirectionsService();
     var directionsDisplay = new google.maps.DirectionsRenderer();

     var map = new google.maps.Map(document.getElementById('map'), {
       zoom:7,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     directionsDisplay.setMap(map);
     directionsDisplay.setPanel(document.getElementById('right-panel'));


     var request = {
       origin:'<?php echo $start; ?>',
       destination:'<?php echo $end; ?>' ,
       travelMode: google.maps.DirectionsTravelMode.DRIVING
     };

     directionsService.route(request, function(response, status) {
       if (status == google.maps.DirectionsStatus.OK) {
         directionsDisplay.setDirections(response);
       }
     });
   </script>
</body>
</html>

edited Sep 20 '17 at 17:23

answered Sep 20 '17 at 17:19

1

Quote looks like the right answer here. `= "leeds"; ?>` will output `leeds` and JavaScript expects the value in an object array to be quoted like this `'leeds'`. The quotes help JavaScript understand spaces, too. For example `origin: New York` would break JavaScript whereas `origin: 'New York'` is valid. – Matthew Sep 20 '17 at 17:22
1

Just added that – Sep 20 '17 at 17:24
Just tried adding quotes to the PHP, still does not seem to load the map. – Brad Waterhouse Sep 20 '17 at 17:28
@BradWaterhouse If you are testing your page within a web browser try opening the JavaScript console then refreshing the page. Is there a warning or error printed there related to the Google Maps API? That would help diagnose your problem. On Firefox, Chrome, and IE press F12 to open the console. Also, "just tried adding quotes to the PHP": does this mean you added single quotes to the PHP code? Your origin line should look like this: `origin: '',` and not this `origin: ,` Lastly, are $start and $end actually printing in the page source? – Matthew Sep 20 '17 at 17:32
After looking in the console log, it doesn't seem to be reading "initmap" as a function. – Brad Waterhouse Sep 20 '17 at 17:34
1

And my origin and destination lines of code correctly formatted now. – Brad Waterhouse Sep 20 '17 at 17:37
1

Okay. Then your code is good and it's the Google API that is throwing that error :) Try searching for `Google Maps API init not a function`. I found this (https://stackoverflow.com/questions/32496382/typeerror-window-initmap-is-not-a-function) – Matthew Sep 20 '17 at 17:37
Did you get it ? – Sep 22 '17 at 02:59

Using PHP variables in Google Maps Directions API

1 Answers1