javascript - Iframe Google Map Passing the Geolocation in the url -


i using code draw , google map. works i'd add tweak instead of getting popup geolocation want pass in url.

here html page:

<!doctype html> <html lang="en"> <head>     <meta http-equiv="content-type" content="text/html; charset=utf-8">     <title>html5 geo location api</title>     <meta name="viewport" content="width=device-width, initial-scale=1">     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>     <script src="https://maps.googleapis.com/maps/api/js?key=myapikeyhere&sensor=true"></script>         <style>         div.location {              width: 100%;              height: 400px;         }     </style>     </head> <body>     <div id="page">         <div class="location"></div>     </div>     <!-- [/page] -->     <script>           (function ( $ ) {             $.fn.geolocation = function( options ) {                 var settings = $.extend({                     home: { latitude: 52.89770, longitude: -1.15596 },                 }, options );                  var home = new google.maps.latlng(settings.home.latitude, settings.home.longitude);                  return this.each(function() {                        var element = $(this);                     element.text('attempting find location');                      function displaycurrentposition(data) {                         element.html('<div class="map-canvas"></div>');                          var current = new google.maps.latlng(data.coords.latitude, data.coords.longitude);                          var options = {                             center: current,                             maptypeid: google.maps.maptypeid.hybrid,                             zoom: 10,                         };                          var map = new google.maps.map(element[0], options);                          var directions = {                             origin: current,                             destination: home,                             travelmode: google.maps.directionstravelmode.driving                         };                          display = new google.maps.directionsrenderer({ map: map });                          service = new google.maps.directionsservice();                         service.route(directions, function(response, status) {                             if (status == google.maps.directionsstatus.ok) {                                 display.setdirections(response);                             }                             else                                 alert ('failed directions');                         });                     }                      function onerror(error) {                         switch(error.code) {                             case error.permission_denied:                                 element.text('access location api denied user');                                 break;                             case error.position_unavailable:                                 element.text('unable determine location');                                 break;                             case error.timeout:                                 element.text('unable determine location, request timed out');                                 break;                             case error.unknown_error:                                 element.text('an unknown error occurred!');                                 break;                         }                     }                      if(navigator.geolocation) {                         navigator.geolocation.getcurrentposition(displaycurrentposition, onerror);                     } else {                         element.text('geolocation not supported browser, please upgrade more recent version');                     }                 });              };          }( jquery ));          jquery(document).ready(function() {             jquery('div.location').geolocation();         });      </script>  </body> </html> 

and here's how calling it:

<iframe src="mywebsiteurlhere/map.html" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> 

how can this?

if understand question correctly, can pass parameters iframe described here: how pass parameters through iframe parent html?

<iframe src="mywebsiteurlhere/map.html?param=geolocation" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> 

Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -