HTML5 Geolocation simple example not working

Question

In an extremely simple example I am trying to fetch co-ordinates of user device and plotting the same on google maps in the web page. The example is simple and must run, but however I am finding an error. Can someone help out to solve it?

x = navigator.geolocation; 

x.getCurrentPosition(success, failure);

function success(position){

var lat = position.coords.latitude; 
var long = position.coords.longitude; 
document.getElementById('para1').innerHTML = lat;
document.getElementById('para2').innerHTML = long;

var coords = new google.maps.LatLng(lat, long );

var mapOptions = {
	zoom: 15, 
	center: coords, 
	mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById('mapDiv'), mapOptions);

}

function failure(){
alert ("It did not work");
}

<body>
<p id="para1"></p>
<p id="para2"></p>
<div id="mapDiv" style="width:500px;height:500px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.googlemap/1.5/jquery.googlemap.min.js"></script> 
</body>

Error:

Reference: https://www.youtube.com/watch?v=obOa8fdJ9aQ

Are you running on under HTTPS? If you check the console in Chrome you'll see this message: getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS — Rory McCrossan
– Rory McCrossan, Commented Feb 20, 2017 at 8:06
No, "ReferenceError: google is not defined" that's all I get! ;( — Deadpool
– Deadpool, Commented Feb 20, 2017 at 8:09
Thats because you need to include the Google Maps JS API: developers.google.com/maps/documentation/javascript — Rory McCrossan
– Rory McCrossan, Commented Feb 20, 2017 at 8:13

Rory McCrossan · Accepted Answer · 2017-02-20 08:14:11Z

1

try these 2 things below:

add this script incase it still shows the error, google for googlemap script without key

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=[KEY]" type="text/javascript"></script>

I faced a lot of issues while using ajax. Code gets always compiled first before even getting the response. So make sure you wait for the ajax response and then the control should go to next line. Use wait method to test.. and remove it once you solve the issue.

edited Feb 20, 2017 at 8:14

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

answered Feb 20, 2017 at 8:13

Skeptic Scribbler

5571 gold badge7 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Deadpool · Accepted Answer · 2017-02-20 08:15:35Z

0

I tried this script instead of the one from cdnjs and the code worked perfectly well:

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

I dont know why, but this solved the issue! ;(

answered Feb 20, 2017 at 8:15

Deadpool

8,2969 gold badges49 silver badges96 bronze badges

1 Comment

Rory McCrossan Over a year ago

It's because the library you were using was to make it easier to interact with a Google Map from jQuery, not to create the Map. You still need to use the Google API to do that.

Collectives™ on Stack Overflow

HTML5 Geolocation simple example not working

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related