I'm building a mobile map using the Google Map API V3. The is a little different than a standard map in that I have categories of markers than you can turn on/off. Everything works great, but I can't seem to get geolocation working. I've tried every combination and code snippet I can find and at most I can get it to register the location request, but it will not display a marker there no matter what I do. I'm sure I'm doing something very simple wrong, but I'm very new to Javascript so the answer is evading me.
Here is a shortened version of my current code (contains an example of everything, but cuts out a lot of the repetitive variables). This example doesn't include the geolocation functions since I've tried so many in different ways I'm not sure which one I would even put on here. The toggleMarkers() function is what I'm using to turn on/off the markers and I'm guessing that's where the problem is for the geolocation marker being displayed. If you could show me how to implement geolocation within this code I would greatly appreciate it!
var markers = [];
function initialize() {
//Setting Map
var mapOptions = {
zoom: 18,
center: new google.maps.LatLng(45.73158,-122.636277),
mapTypeId: 'satellite'
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(0);
//Marker Categories
var markerBuildings = {
category: 'buildings',
}
var markerParking = {
category: 'parking',
}
// Icons
var iconBuilding = new google.maps.MarkerImage('images/building.png',
new google.maps.Size(32, 37),
new google.maps.Point(0,0),
new google.maps.Point(16,32));
var iconAmphitheater = new google.maps.MarkerImage('images/amphitheater.png',
new google.maps.Size(32, 37),
new google.maps.Point(0,0),
new google.maps.Point(16,32));
//Coordinates
//Buildings
var vmcb = new google.maps.Marker({
position: new google.maps.LatLng(45.730513,-122.638106),
map: map,
url: 'http://www.google.com/',
icon: iconBuilding,
data: markerBuildings
});
markers.push(vmcb);
var vadm = new google.maps.Marker({
position: new google.maps.LatLng(45.730899,-122.637742),
map: map,
url: 'http://www.google.com/',
icon: iconBuilding,
data: markerBuildings
});
markers.push(vadm);
}
function toggleMarkers(attr,val) {
if (markers){
for (i in markers) {
if(markers[i].data[attr] == val){
var visibility = (markers[i].getVisible() == true) ? false : true;
markers[i].setVisible(visibility);
}
}
}
}
If you could show me how to implement geolocation within this code I would greatly appreciate it!
call getGeoLocation() (below) after you create the map object
function getGeoLocation() {
// http://stackoverflow.com/questions/3397585/navigator-geolocation-getcurrentposition-sometimes-works-sometimes-doesnt
var options = null;
if (navigator.geolocation) {
if (!browserChrome) {
// By using the 'maximumAge' option, the position
// object is guaranteed to be at most 15 seconds old.
// FF and Safari seem to like these options; Chrome does not
options={enableHighAccuracy: false, maximumAge: 15000, timeout: 30000};
}
else {
// Request a position. We only accept cached positions, no matter what
// their age is. If the user agent does not have a cached position at
// all, it will immediately invoke the error callback.
// http://dev.w3.org/geo/api/spec-source.html
// Chrome will not allow this submitted via the file:// protocol
options={maximumAge:Infinity, timeout:0};
}
navigator.geolocation.getCurrentPosition(function(position) {
centerIsSet = true
canGeolocate = true;
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(pos);
},
getGeoLocationErrorCallback(true),
options);
}
else {
// browser doesn't support geolocation
getGeoLocationErrorCallback(false);
}
}
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.