title: Iframe Google Map Passing the Geolocation in the url
body: <p>I am using this code to draw and google map. It works but I'd like to add a tweak where instead of getting a popup to get the geolocation I want to pass it in the url.</p>
  
  <p>Here is the html page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;
      &lt;title&gt;HTML5 Geo Location API&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?key=myApiKeyHere&amp;sensor=true"&gt;&lt;/script&gt;
  
  
  
  
      &lt;style&gt;
          div.location {
               width: 100%;
               height: 400px;
          }
      &lt;/style&gt;    
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="page"&gt;
          &lt;div class="location"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- [/page] --&gt;
      &lt;script&gt; 
  
          (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 to find your location');
  
                      function displayCurrentPosition(data) {
                          element.html('&lt;div class="map-canvas"&gt;&lt;/div&gt;');
  
                          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 to get directions');
                          });
                      }
  
                      function onError(error) {
                          switch(error.code) {
                              case error.PERMISSION_DENIED:
                                  element.text('Access to location API denied by user');
                                  break;
                              case error.POSITION_UNAVAILABLE:
                                  element.text('Unable to determine location');
                                  break;
                              case error.TIMEOUT:
                                  element.text('Unable to determine location, the 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 is not supported by this browser, please upgrade to a more recent version');
                      }
                  });
  
              };
  
          }( jQuery ));
  
          jQuery(document).ready(function() {
              jQuery('div.location').GeoLocation();
          });
  
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here's how I am calling it:</p>
  
  <pre><code>&lt;iframe src="mywebsiteurlhere/map.html" width="600" height="450" frameborder="0" style="border:0" allowfullscreen&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>How can I do this?</p>