Iframe Google Map Passing the Geolocation in the url

Question

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.

Here is the 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 to find your 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 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();
        });

    </script>

</body>
</html>

And here's how I am calling it:

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

How can I do this?

related question: [How can I get query string values in JavaScript?](http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript) — geocodezip, Feb 08 '16 at 14:18

score 2 · Accepted Answer · edited May 23 '17 at 11:52

2

If I understand you question correctly, you can simply pass the parameters into the iframe as described here: How to pass parameters through iframe from parent html?

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

edited May 23 '17 at 11:52

Community

1
1

answered Feb 08 '16 at 14:16

brenzy

1,976
11
20

Iframe Google Map Passing the Geolocation in the url

1 Answers1