Javascript google geolocation is not working in live site

Question

Google geolocation with Javascript is not working in live site for major browsers like Firefox, Chrome. Geolocation result is displaying in Opera for live site, where as the same is working in localhost for all browsers (Chrome, firefox & Opera). My Live site protocol using https://. See below code and suggest any.. Geolocation and Google Maps API

<script src="http://maps.google.com/maps/api/js?key=MY_KEY_HERE&sensor=true"></script>

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>

function writeAddressName(latLng) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"location": latLng
},
function(results, status) {
for (var i=0; i<results[0].address_components.length; i++) {
for (var b=0;b<results[0].address_components[i].types.length;b++) {

//there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
if (results[0].address_components[i].types[b] == "administrative_area_level_2") {
//this is the object you are looking for
city= results[0].address_components[i];
break;
}
}
}
//alert(city.short_name + " " + city.long_name);
//alert(city.long_name);
var cityname = city.long_name;
if (status == google.maps.GeocoderStatus.OK) {
document.getElementById("address").innerHTML = results[0].formatted_address;
document.getElementById("citynm").innerHTML = cityname;  }
else {
document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br>"; }
});
}
function geolocationSuccess(position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Write the formatted address
writeAddressName(userLatLng);

var myOptions = {
zoom : 16,
center : userLatLng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// Draw the map
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
// Place the marker
new google.maps.Marker({
map: mapObject,
position: userLatLng
});
// Draw a circle around the user position to have an idea of the current localization accuracy
var circle = new google.maps.Circle({
center: userLatLng,
radius: position.coords.accuracy,
map: mapObject,
fillColor: '#0000FF',
fillOpacity: 0.5,
strokeColor: '#0000FF',
strokeOpacity: 1.0
});
mapObject.fitBounds(circle.getBounds());
}

function geolocationError(positionError) {
document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br>";
}

function geolocateUser() {
// If the browser supports the Geolocation API
if (navigator.geolocation)
{
var positionOptions = {
enableHighAccuracy: true,
timeout: 10 * 1000 // 10 seconds
};
navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
}
else
document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
}
window.onload = geolocateUser;
</script>
</head>
<body>
<p id="citynm"></p>
<p id="address"></p>
</body>
</html>

Answer 1

I have tested you codes (Chrome v29, Windows 8), the one below works from a remote server (non-local host) but you need note note 2 areas

<script src="http://maps.google.com/maps/api/js?v=3.9&sensor=true"></script>

I added v=3.9

And

function writeAddressName(latLng) {
    ...
    if (results[0].address_components[i].types[b] == "route") {

You may need to handle case where city cannot be set.

I can see the address. [This sample does not include map display]

<!DOCTYPE html>
<html>
<head>

<script src="http://maps.google.com/maps/api/js?v=3.9&sensor=true"></script>
<script>
function writeAddressName(latLng) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ "location": latLng }, function(results, status) {
        for (var i=0; i<results[0].address_components.length; i++) {
            for (var b=0;b<results[0].address_components[i].types.length;b++) {
                //there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
                if (results[0].address_components[i].types[b] == "route") {
                //this is the object you are looking for
                    city = results[0].address_components[i];
                    break;
                }
            }
        }
//alert(city.short_name + " " + city.long_name);
//alert(city.long_name);
        var cityname = city.long_name;
        if (status == google.maps.GeocoderStatus.OK) {
            document.getElementById("address").innerHTML = results[0].formatted_address;
            document.getElementById("citynm").innerHTML = cityname;
        }
        else {
            document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br>";
        }
    });
}

function geolocationSuccess(position) {
    var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Write the formatted address
    writeAddressName(userLatLng);

    var myOptions = {
        zoom : 16,
        center : userLatLng,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    // Draw the map
    var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
    // Place the marker
    new google.maps.Marker({
        map: mapObject,
        position: userLatLng
    });
// Draw a circle around the user position to have an idea of the current localization accuracy
    var circle = new google.maps.Circle({
        center: userLatLng,
        radius: position.coords.accuracy,
        map: mapObject,
        fillColor: '#0000FF',
        fillOpacity: 0.5,
        strokeColor: '#0000FF',
        strokeOpacity: 1.0
    });
    mapObject.fitBounds(circle.getBounds());
}

function geolocationError(positionError) {
    document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br>";
}

function geolocateUser() {
    // If the browser supports the Geolocation API
    if (navigator.geolocation) {
        var positionOptions = {
            enableHighAccuracy: true,
            timeout: 10 * 1000 // 10 seconds
        };
        navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
    }
    else
    document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
}
window.onload = geolocateUser;
</script>
</head>
<body>
<p id="error"></p>
<p id="citynm"></p>
<p id="address"></p>
</body>
</html>

Answer 2

May be this links can help you

https://developers.google.com/maps/articles/geocodestrat

google maps api works at localhost but doesn't work at web server

Answer 3

https://developers.google.com/maps/faq?hl=en&csw=1#browsersupport



https://developers.google.com/maps/documentation/javascript/examples/map-geolocation

http://jsfiddle.net/BQzLq/3/

https://support.google.com/maps/answer/21849?hl=en

http://www.javascript-coder.com/window-popup/javascript-window-open.phtml

These all links is just for your knowledge in some browser or browser's older versions google map v3 doesn't works.

Javascript google geolocation is not working in live site

Question

3 answers

solution1
1 2013-09-05 07:35:42

solution2
0 2013-09-05 06:52:32

solution3
0 2013-09-05 07:02:33

Javascript google geolocation is not working in live site

Question

3 answers

solution1 1 2013-09-05 07:35:42

solution2 0 2013-09-05 06:52:32

solution3 0 2013-09-05 07:02:33

solution1
1 2013-09-05 07:35:42

solution2
0 2013-09-05 06:52:32

solution3
0 2013-09-05 07:02:33