Google Maps API Centered Marker + Geolocation
Question
I tried to write variables to try and place a marker but it's not working. It should first ask to enable location services, then display the user's current location with a marker. I'm not sure whether I have to call the variable "marker" separately? Or is there something wrong with grammar?
What am I doing wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GMAP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Maps API -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0}
#map-canvas { height: 100%; margin-left:auto; margin-right:auto; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUuNJkdVKOzHyIclOyTki6uHwrYpKxaeg&sensor=true">
</script>
<!-- GMaps GPS -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 6
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition( function (position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var showPosition = function (position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({
position: userLatLng,
title: 'Your Location',
map: map
});
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
});
map.setCenter(pos);
};
});
}
else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(37.774929, -122.419416),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<!-- Current Location Google Map API -->
<br />
<div id="map-canvas" style="width: 30%; height: 30%"></div>
</body>
</html>
2 answers
solution1
2 ACCPTED 2014-01-29 08:16:27
There are two errors.
Google Maps API is included two times so we get message: Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors. Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors. One of included links has to be commented out.
The next one is missing call showPosition() function. Even if you put call there it will not work because variables are using pos and userLatLng which should be corrected. Here is changed code:
...
navigator.geolocation.getCurrentPosition( function (position) {
//var pos = new google.maps.LatLng(position.coords.latitude,
// position.coords.longitude);
//var showPosition = function (position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var marker = new google.maps.Marker({
position: userLatLng,
title: 'Your Location',
map: map
});
var infowindow = new google.maps.InfoWindow({
// map: map,
content: 'Info for this place',
position: userLatLng
});
map.setCenter(userLatLng);
//};
}, function (err) {
// message if user denied geolocation
alert('Error(' + err.code + '): ' + err.message);
});
} else {
...
Infowindow won't be opened because there is no event listener for marker.
solution2
0 2014-01-29 08:03:20
你需要调用showPosition函数，你现在只是声明它。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.