Google Maps + Geo-location w/ SQL
I have a script that displays a bunch of addresses in a SQL database (They're all geocoded) and places them onto a google map. I can't seem to figure out how to have the map center on the user's location using their mobile device GPS. I have a script that does this but I can't figure out how to combine the two features. Anyone? Please help me, loosing sleep...
Here is my code:
<?php
require_once('/home/session_data.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=480px"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TEST</title>
<script src="http://www.google.com/jsapi?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></script>
<script>
(function () {
google.load("maps", "2");
google.setOnLoadCallback(function () {
// Create map
var map = new google.maps.Map2(document.getElementById("map")),
markerText = "<?php echo $_SESSION['SESS_FULL_NAME']?> - #<?php echo $_SESSION['SESS_MEMBER_ID']?><br><?php echo $_SESSION['SESS_DEPT']?> - <?php echo $_SESSION['SESS_REGION']?>",
markOutLocation = function (lat, long) {
var latLong = new google.maps.LatLng(lat, long),
marker = new google.maps.Marker(latLong);
map.setCenter(latLong, 13);
map.addOverlay(marker);
marker.openInfoWindow(markerText);
google.maps.Event.addListener(marker, "click", function () {
marker.openInfoWindow(markerText);
});
};
map.setUIToDefault();
// Check for geolocation support
if (navigator.geolocation) {
// Get current position
navigator.geolocation.getCurrentPosition(function (position) {
// Success!
markOutLocation(position.coords.latitude, position.coords.longitude);
},
function () {
// Gelocation fallback: Defaults to New York, US
开发者_如何转开发 markerText = "<p>Please accept geolocation for me to be able to find you. <br>I've put you in New York for now.</p>";
markOutLocation(40.714997,-74.006653);
}
);
}
else {
// No geolocation fallback: Defaults to Eeaster Island, Chile
markerText = "<p>No location support. Try Easter Island for now. :-)</p>";
markOutLocation(-27.121192, -109.366424);
}
});
})();
</script>
<script type="text/javascript">
//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
// global "map" variable
var map = null;
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
function initialize() {
// create the map
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(43.907787,-79.359741),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Read the data from example.xml
downloadUrl("phpsqlajax_genxml2.php", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
// create the marker
var marker = createMarker(point,label,html);
}
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
});
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
//]]>
</script>
</head>
<body onload="load()" onunload="Unload()">
<div id="map" style="width: 480px; height: 300px"></div>
</body>
</html>
you provided only #map, but half of your code deals with #map_canvas..?
In your first script you have declared a "map" variable and in your 2nd, under initialize(), you declare it again, which i think, overrides your first "map", which is essential for centering the latlong provided by var markOutLocation.
I suggest renaming the "map" and its relation in your initialize function(), which i assume is going to control another map element.
It looks like you're using an old version of the google maps API. Version 3 is the latest. Here's the getting started page.
To instruct Google maps to use a GPS sensor, the javascript is loaded with sensor=true. Note in V3, that the sensor parameter is required, so if you don't want it to use GPS, you have to explicitly set it to false:
#
# Example using sensor when loading the Maps JavaScript API
#
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
Here is also a Google code snippet on centering on the users location. It tries a number of different methods to resolve the users location:
// Note that using Google Gears requires loading the Javascript
// at http://code.google.com/apis/gears/gears_init.js
var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag = new Boolean();
function initialize() {
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Try W3C Geolocation (Preferred)
if(navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
// Try Google Gears Geolocation
} else if (google.gears) {
browserSupportFlag = true;
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
map.setCenter(initialLocation);
}, function() {
handleNoGeoLocation(browserSupportFlag);
});
// Browser doesn't support Geolocation
} else {
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
alert("Geolocation service failed.");
initialLocation = newyork;
} else {
alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
initialLocation = siberia;
}
map.setCenter(initialLocation);
}
}
.
map.setCenter(initialLocation);
is what is centering the map on the latitude / longitude specified (which is the location of the user in this case).
加载中,请稍侯......
精彩评论