Iframe Google Map Passing the Geolocation in the url
<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>