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 · Accepted Answer · 2017-09-20 17:23:23Z

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, 2017 at 17:23

answered Sep 20, 2017 at 17:19

user8320550

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

8 Comments

Matthew Over a year ago

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.

user8320550 Over a year ago

Just added that

Brad Waterhouse Over a year ago

Just tried adding quotes to the PHP, still does not seem to load the map.

Brad Waterhouse Over a year ago

And my origin and destination lines of code correctly formatted now.

Matthew Over a year ago

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 (stackoverflow.com/questions/32496382/…)

|

Collectives™ on Stack Overflow

Using PHP variables in Google Maps Directions API

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related