API tools faq
paste
Advertisement
Guest User

Gmaps

a guest
May 29th, 2010
513
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.42 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
  4. <title>Reach Me</title>
  5. <script type="text/javascript" src="http://www.google.com/jsapi?key={{GOOGLE_API_KEY}}"></script>
  6. <script type="text/javascript">
  7. google.load("jquery", "1.4.2");
  8. google.load("maps", "3", {"other_params":"sensor=true"});
  9. </script>
  10. <script type="text/javascript" src="/static/js/gears_init.js"></script>
  11. <script type="text/javascript">
  12. $(document).ready(function() {
  13.   var visitor_loc = new google.maps.LatLng(32.5468, -23.2031); //default location is world center
  14.   var map;
  15.   var directionDisplay;
  16.   var directionsService;
  17.   var stepDisplay;
  18.   var markerArray = [];
  19. // Create a map and center on it
  20.     var myOptions = {
  21.       zoom: 8,
  22.       mapTypeId: google.maps.MapTypeId.ROADMAP,
  23.       center: visitor_loc
  24.     }
  25.     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  26. // Instantiate a directions service.
  27.     directionsService = new google.maps.DirectionsService();
  28.  
  29.     // Create a renderer for directions and bind it to the map.
  30.     var rendererOptions = {
  31.       map: map
  32.     }
  33.     directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions)
  34.  
  35. // Try W3C Geolocation (Preferred)
  36.  
  37. if(navigator.geolocation) {
  38.     navigator.geolocation.getCurrentPosition(function(position) {
  39.     calcRoute(position.coords.latitude,position.coords.longitude);
  40.     },fallback);
  41. }
  42.  
  43. //Fall back on Gears
  44. else if (window.google && window.google.gears) {
  45.     var geo = google.gears.factory.create('beta.geolocation');
  46.     geo.getCurrentPosition(function(position) {
  47.     calcRoute(position.latitude,position.longitude);
  48.     },fallback,{enableHighAccuracy: true});
  49. }
  50. else {
  51.     fallback();
  52. }
  53.  
  54.  
  55. function fallback() {
  56.     if (google.loader.ClientLocation && google.loader.ClientLocation.address.country_code == "US") {
  57.         calcRoute(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);
  58.     } else {
  59.         calcRoute({{latitude}},{{longitude}});
  60.     }
  61. }
  62.  
  63. function calcRoute(lati,longi) {
  64.     // Instantiate an info window to hold step text.
  65.     stepDisplay = new google.maps.InfoWindow();
  66.  
  67.     // First, remove any existing markers from the map.
  68.     for (i = 0; i < markerArray.length; i++) {
  69.       markerArray[i].setMap(null);
  70.     }
  71.  
  72.     // Now, clear the array itself.
  73.     markerArray = [];
  74.  
  75.     // Retrieve the start and end locations and create
  76.     // a DirectionsRequest using DRIVING directions.
  77.     var start = new google.maps.LatLng(lati,longi);
  78.     var end = "{{BUSINESS_LOCATION}}";
  79.     var request = {
  80.         origin: start,
  81.         destination: end,
  82.         travelMode: google.maps.DirectionsTravelMode.DRIVING
  83.     };
  84.  
  85.     // Route the directions and pass the response to a
  86.     // function to create markers for each step.
  87.     directionsService.route(request, function(response, status) {
  88.       if (status == google.maps.DirectionsStatus.OK) {
  89.         var warnings = document.getElementById("warnings_panel");
  90. warnings.innerHTML = "<b>" + response.routes[0].warnings + "</b>";
  91.         directionsDisplay.setDirections(response);
  92.         showSteps(response);
  93.       }
  94.     });
  95.   }
  96.  
  97.   function showSteps(directionResult) {
  98.     // For each step, place a marker, and add the text to the marker's
  99.     // info window. Also attach the marker to an array so we
  100.     // can keep track of it and remove it when calculating new
  101.     // routes.
  102.     var myRoute = directionResult.routes[0].legs[0];
  103.  
  104.     for (var i = 0; i < myRoute.steps.length; i++) {
  105.       var marker = new google.maps.Marker({
  106.         position: myRoute.steps[i].start_point,
  107.         map: map
  108.       });
  109.       attachInstructionText(marker, myRoute.steps[i].instructions);
  110.       markerArray[i] = marker;
  111.     }
  112.   }
  113.  
  114.   function attachInstructionText(marker, text) {
  115.     google.maps.event.addListener(marker, 'click', function() {
  116.       // Open an info window when the marker is clicked on,
  117.       // containing the text of the step.
  118.       stepDisplay.setContent(text);
  119.       stepDisplay.open(map, marker);
  120.     });
  121.   }
  122. });
  123.  
  124.  
  125. </script>
  126. </head>
  127. <body style="margin:0px; padding:0px;">
  128. <div id="map_canvas" style="width:100%;height:80%"></div>
  129. &nbsp;
  130. <div id="warnings_panel" style="width:100%;height:10%;text-align:center"></div>
  131. <div id="info">&nbsp;&nbsp;<b>Your Approx. Location (A)</b>: LatLng = ({{latitude}},{{longitude}}) <br/>&nbsp;&nbsp;<b>My Google Latitude Location (B)</b>: {{BUSINESS_LOCATION}}</div>
  132. </body>
  133. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!