Skip to content Skip to sidebar Skip to footer

Googlemap With Geolocation Not Showing Up

So I was trying this googleMap thing with geolocation. I really just copy pasted the code, but I didnt manage to make the map appear. The browser even asks me to get my location, b

Solution 1:

And you have to close all your tags (script, div, style). E.g.:

<script>with</script>

Solution 2:

Copied from Your example works perfectly.

Your code has at least 20 lines extra at the start and about 9 at the end.

According to Google The Google Maps JavaScript API v3 does not require an API key to function correctly. However, we strongly encourage you to load the Maps API using an APIs Console key which allows you to monitor your application's Maps API usage.

<!DOCTYPE html><htmldir="ltr"lang="en-gb"><head><metacharset="utf-8" /><title>Geolocation API getCurrentPosition example</title><style>#map { width:100%; height:800px; }
    </style><scriptsrc="http://maps.google.com/maps/api/js?sensor=false"></script></head><body><p>Click on the marker for position information.</p><divid="map"></div><script>if (navigator.geolocation) {
            var timeoutVal = 10 * 1000 * 1000;
            navigator.geolocation.getCurrentPosition(
                displayPosition, 
                displayError,
                { enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
            );
        }
        else {
            alert("Geolocation is not supported by this browser");
        }
        functiondisplayPosition(position) {
            var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var options = {
                zoom: 10,
                center: pos,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"), options);
            var marker = new google.maps.Marker({
                position: pos,
                map: map,
                title: "User location"
            });
            var contentString = "<b>Timestamp:</b> " + parseTimestamp(position.timestamp) + "<br/><b>User location:</b> lat " + position.coords.latitude + ", long " + position.coords.longitude + ", accuracy " + position.coords.accuracy;
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });
        }
        functiondisplayError(error) {
            var errors = { 
                1: 'Permission denied',
                2: 'Position unavailable',
                3: 'Request timeout'
            };
            alert("Error: " + errors[error.code]);
        }
        functionparseTimestamp(timestamp) {
            var d = newDate(timestamp);
            var day = d.getDate();
            var month = d.getMonth() + 1;
            var year = d.getFullYear();
            var hour = d.getHours();
            var mins = d.getMinutes();
            var secs = d.getSeconds();
            var msec = d.getMilliseconds();
            return day + "." + month + "." + year + " " + hour + ":" + mins + ":" + secs + "," + msec;
        }
    </script></body></html>

Post a Comment for "Googlemap With Geolocation Not Showing Up"