API tools faq
paste
leors

Google Maps API + Geolocation + Directions

leors
May 24th, 2015
61
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.71 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2.     <html>
  3.         <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.         <title>Google Maps &raquo; Geolocation API + Directions API</title>
  6.         <style type="text/css">
  7.             body {
  8.                 margin-left: 0px;
  9.                 margin-top: 0px;
  10.                 margin-right: 0px;
  11.                 margin-bottom: 0px;
  12.             }
  13.             #mapa {
  14.                 width:100%;
  15.                 height:400px;
  16.             }
  17.         </style>
  18.         <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
  19.         <script type="text/javascript">
  20.             var pri = '-27.395195';
  21.             var sec = '-53.428319';
  22.             if (navigator.geolocation) { //Checks if browser supports geolocation
  23.                 navigator.geolocation.getCurrentPosition(function (position) { //This gets the
  24.                     var latitude = position.coords.latitude;                    //users current
  25.                     var longitude = position.coords.longitude;                 //location
  26.                     var coords = new google.maps.LatLng(latitude, longitude); //Creates variable for map coordinates
  27.                     var directionsService = new google.maps.DirectionsService();
  28.                     var directionsDisplay = new google.maps.DirectionsRenderer();
  29.                     var mapOptions = //Sets map options
  30.                     {
  31.                         zoom: 15,  //Sets zoom level (0-21)
  32.                         center: coords, //zoom in on users location
  33.                         mapTypeControl: false, //allows you to select map type eg. map or satellite
  34.                         disableDefaultUI: true, //Disabling the default UI
  35.                         /*navigationControlOptions:
  36.                         {
  37.                             style: google.maps.NavigationControlStyle.SMALL //sets map controls size eg. zoom
  38.                         },*/
  39.                         mapTypeId: google.maps.MapTypeId.ROADMAP //sets type of map Options:ROADMAP, SATELLITE, HYBRID, TERRIAN
  40.                     };
  41.                     map = new google.maps.Map( /*creates Map variable*/ document.getElementById("mapa"), mapOptions /*Creates a new map using the passed optional parameters in the mapOptions parameter.*/);
  42.                     directionsDisplay.setMap(map);
  43.                     directionsDisplay.setPanel(document.getElementById('rota'));
  44.                     var request = {
  45.                         origin: coords,
  46.                         //destination: 'BT42 1FL',
  47.                         //destination:new google.maps.LatLng(-27.395195, -53.428319),
  48.                         destination:new google.maps.LatLng(''+pri+'', ''+sec+''),
  49.                         //destination:new google.maps.LatLng(pri, sec),
  50.                         travelMode: google.maps.DirectionsTravelMode.DRIVING
  51.                     };
  52.        
  53.                     directionsService.route(request, function (response, status) {
  54.                         if (status == google.maps.DirectionsStatus.OK) {
  55.                             directionsDisplay.setDirections(response);
  56.                         }
  57.                     });
  58.                 });
  59.             }
  60.         </script>
  61.     </head>
  62.     <body>
  63.     <div id="mapa"></div>
  64.     <div id="rota"></div>
  65.     </body>
  66. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!