Search code examples
javascriptgoogle-mapsscopelatitude-longitude

How Can I Reuse Javascript Variables Outside Function

I am trying to set up a map that provides directions to Las Vegas from wherever the browser is located. Here is my code sample:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API v3 Directions Example</title>
<script type="text/javascript"
       src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body style="font-family: Arial; font-size: 12px;">
<div style="width: 600px;">
 <div id="map" style="width: 280px; height: 400px; float: left;"></div>
 <div id="panel" style="width: 300px; float: right;"></div>
</div>

<script type="text/javascript">


navigator.geolocation.getCurrentPosition(GetLocation);
function GetLocation(location) {
var mylat = location.coords.latitude;
var mylong = location.coords.longitude;
}


 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('panel'));

 var request = {
    origin: 'mylat,mylong',
destination: '35.580789,-105.210571',
   travelMode: google.maps.DirectionsTravelMode.DRIVING
 };

 directionsService.route(request, function(response, status) {
   if (status == google.maps.DirectionsStatus.OK) {
     directionsDisplay.setDirections(response);
   }
 });

</script>
</body>
</html>

If I hard code in the mylat and mylong then the page will load just fine. I have also used the following to verify that these values are properly populated when location is shared:

function GetLocation(location) {
var mylat = location.coords.latitude;
var mylong = location.coords.longitude;
document.write(mylat);
document.write(mylong);
}

I also have tried to write these variables outside of the function and see that they are suddenly null. What can I try to retain the mylat and mylong variables and reuse in the origin: 'mylat,mylong', call?

Solution

  • this works for me: - setting directions after coordinates returned

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API v3 Directions Example</title>
<script type="text/javascript"
       src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body style="font-family: Arial; font-size: 12px;">
<div style="width: 600px;">
 <div id="map" style="width: 280px; height: 400px; float: left;"></div>
 <div id="panel" style="width: 300px; float: right;"></div>
</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
 });

navigator.geolocation.getCurrentPosition(GetLocation);
function GetLocation(location) {
var mylat,mylong,request;
mylat= location.coords.latitude;
mylong = location.coords.longitude;
request = {
    origin: mylat+','+mylong,
destination: '35.580789,-105.210571',
   travelMode: google.maps.DirectionsTravelMode.DRIVING
 };

 directionsDisplay.setMap(map);
 directionsDisplay.setPanel(document.getElementById('panel'));
 directionsService.route(request, function(response, status) {
   if (status == google.maps.DirectionsStatus.OK) {
     directionsDisplay.setDirections(response);
   }
 });
}

</script>
</body>
</html>