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);
  }
}