Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

test google maps V3 geolocation locally ?

I'm trying to test some geolocation codes on my computer, but I'm not even able to run the examples. Although they run perfectly from documentation website when I try to open the html file from my computer I get a blank page, all I do is trying to detect my position...

Here is the code:

    <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <link href="/apis/maps/documentation/javascript/examples/default.css"
      rel="stylesheet" type="text/css">
    <!--
    Include the maps javascript with sensor=true because this code is using a
    sensor (a GPS locator) to determine the user's location.
    See: http://code.google.com/apis/maps/documentation/javascript/basics.html#SpecifyingSensor
    -->
    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

    <script type="text/javascript">
      var map;

      function initialize() {
        var myOptions = {
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);

        // Try HTML5 geolocation
        if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
                                             position.coords.longitude);

            var infowindow = new google.maps.InfoWindow({
              map: map,
              position: pos,
              content: 'Location found using HTML5.'
            });

            map.setCenter(pos);
          }, function() {
            handleNoGeolocation(true);
          });
        } 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(60, 105),
          content: content
        };

        var infowindow = new google.maps.InfoWindow(options);
        map.setCenter(options.position);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

Please help, can you find out what am I doing wrong?

like image 976
rabidmachine9 Avatar asked Oct 28 '11 21:10

rabidmachine9


People also ask

How do I test Google Geolocation API?

Geocoding request and response (latitude/longitude lookup) You can test this by entering the URL into your web browser (be sure to replace YOUR_API_KEY with your actual API key). The response includes the latitude and longitude of the address.

How do I turn on geolocation in Google Maps?

Open your phone's Settings app. Under "Personal," tap Location access. At the top of the screen, turn Access to my location on or off.

Is Google API for geolocation free?

As mentioned, you won't be charged for your Google Maps API usage until you turn on auto-billing. The free trial limits you to $300 in credit over 90 days. API users also get $200 of credit per month toward API requests, equal to 100,000 static map requests or around 28,000 dynamic map requests per month.


1 Answers

You need change the link in the stylesheet to an absolute link:

<link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">
like image 122
uɥƃnɐʌuop Avatar answered Oct 13 '22 01:10

uɥƃnɐʌuop