Google Maps JavaScript API v3 send dynamic variables to map

Question

This is prob. very simple but I can't get it. I have a href link e.g. <a href="includes/driving.php?lat=38.254181&long=20.649962" class="driving" >Driving instructions</a> which when clicked (using jQuery) opens a googlemap like this:

jQuery('a.driving').live('click',function(){
jQuery('#content').empty().load(jQuery(this).attr('href'), function(){
initGeolocation();
})
return false;
});

Function initGeolocation(); grabs the HTML5 location and there are more than 1 class="driving" links on the page. What I cannot get to happen is passing the lat and long variables to the map. I need to get them into this function:

function calcRoute(position) {
var start = '38.313393,20.562651';
var end   = 'lat' , 'long'
var request = {
    origin:start,
    destination:end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response);
  }
});

}

if needed the map is called like this (standard code)

function success(position) {
    var myOptions = {
      zoom: 13,
      center: new google.maps.LatLng(38.313393, 20.562651),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
   directionsDisplay = new google.maps.DirectionsRenderer({
        'map': map,
        'preserveViewport': true,
        'draggable': true
    });
    directionsDisplay.setPanel(document.getElementById("directions_panel"));
    google.maps.event.addListener(directionsDisplay, 'directions_changed',
      function() {
        if (currentDirections) {
          oldDirections.push(currentDirections);
          setUndoDisabled(false);
        }
        currentDirections = directionsDisplay.getDirections();
      });
    setUndoDisabled(true);
    calcRoute(position);
  }

Help appreciated thanks

score 0 · Accepted Answer · edited Jan 01 '14 at 12:19

0

Hi, well if you have your co-ordinates ready, then why don't you create google.maps.LatLng object by this way: new google.maps.LatLng(your lat, your lon), if you want to specify string then do it this way new google.maps.LatLng("address") and assign this latlng object to start and end. This will solve your problem. For more details please visit Google's documentation.:)

edited Jan 01 '14 at 12:19

Rahman

330
1
7
24

answered May 22 '12 at 06:52

Neji

6,591
5
43
66

Prob is I can't find it in Google Documentation – Russell Parrott May 22 '12 at 06:54
plz visit here https://developers.google.com/maps/documentation/javascript/directions#DirectionsRequests – Neji May 22 '12 at 06:55
Hi Nejil thanks for that, just I don't want to use a select box, suppose I could add the variables to hidden inputs and call by ID, but would prefer to use the get – Russell Parrott May 22 '12 at 06:58
sorry! its just not clear what you want. will you plz explain – Neji May 22 '12 at 07:01
Oops OK in simple terms - click link with the get variables lat/long - create map and pass lat & long to the function calcRoute(position) so they become the end points of the route – Russell Parrott May 22 '12 at 07:06

lfergon · Answer 2 · 2012-05-22T07:22:21.183

You could get the PHP variables, pass lat and long to javascript vars and then use both vars in your calcRoute function:

var lat = "<?= $lat ?>";
var long = "<?= $long ?>";

function calcRoute(lat, long) {
   var start = '38.313393,20.562651';
   var end   = lat , long;
   var request = {
       origin:start,
       destination:end,
       travelMode: google.maps.DirectionsTravelMode.DRIVING
   };
   directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
      }
});

And you could call:

calcRoute(lat, long);

score 0 · Answer 3 · edited May 23 '17 at 10:34

Oh, I get it. You want to get the attributes lat and long from the link and pass them to the calcRoute function. Ok, do this [elem is the current <A href...> element, name is 'lat' or 'long':

function getParameterByName(name) {
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

var lat=getParameterByName(elem, "lat");
var long=getParameterByName(elem, "long");

Function ripped from How can I get query string values in JavaScript?.

Google Maps JavaScript API v3 send dynamic variables to map

3 Answers3