Solved

HTML5 Get geolocation with map code not working

Posted on 2014-09-06
7
121 Views
Last Modified: 2014-10-24
Hi, all am trying to click on a button and get get the page to return my geolocation on a google map.

I found this code but it doesn't do anything.

Wonder it anyone can help?

Here's the complate source code:

<!DOCTYPE html>
<html>
  <head>
    <title>GeoLocation</title>
    <script src="http://maps.google.com/maps/api/js?sensor=true">
 </script>
    <script type="text/javascript" charset="utf-8">
   function getLocation(){
      console.log("Entering getLocation()");
      if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(
      displayCurrentLocation,
      displayError,
      { 
        maximumAge: 3000, 
        timeout: 5000, 
        enableHighAccuracy: true 
      });
    }else{
      console.log("Oops, no geolocation support");
    } 
      console.log("Exiting getLocation()");
    };
    function displayCurrentLocation(position){
      console.log("Entering displayCurrentLocation");
      var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    console.log("Latitude " + latitude +" Longitude " + longitude);
    getAddressFromLatLang(latitude,longitude);
      console.log("Exiting displayCurrentLocation");
    }
   function  displayError(error){
    console.log("Entering ConsultantLocator.displayError()");
    var errorType = {
      0: "Unknown error",
      1: "Permission denied by user",
      2: "Position is not available",
      3: "Request time out"
    };
    var errorMessage = errorType[error.code];
    if(error.code == 0  || error.code == 2){
      errorMessage = errorMessage + "  " + error.message;
    }
    alert("Error Message " + errorMessage);
    console.log("Exiting ConsultantLocator.displayError()");
  }
    function getAddressFromLatLang(lat,lng){
      console.log("Entering getAddressFromLatLang()");
      var geocoder = new google.maps.Geocoder();
        var latLng = new google.maps.LatLng(lat, lng);
        geocoder.geocode( { 'latLng': latLng}, function(results, status) {
        console.log("After getting address");
        console.log(results);
        if (status == google.maps.GeocoderStatus.OK) {
          if (results[1]) {
            console.log(results[1]);
            alert(results[1].formatted_address);
          }
        }else{
          alert("Geocode was not successful 
    for the following reason: " + status);
        }
        });
      console.log("Entering getAddressFromLatLang()");
    }
    </script>
  </head>
  <body>
    <h1>Display the map here</h1>
    <input type="button" id="getLocation"
 onclick="getLocation()" value="Get Location"/>
    <div id="map"></div>
  </body>
</html>

Open in new window

0
Comment
Question by:error77
  • 2
  • 2
7 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40308042
Two things.  That code does not do Geo-location by IP even when it works and you're not giving it anything to work with.  What were you expecting?
0
 

Author Comment

by:error77
ID: 40308069
I wanted to click a button and get a google map showing my geolocation
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 250 total points
ID: 40308091
0
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 250 total points
ID: 40308114
The Google Maps API that I have used will do an address-to-geolocation translation so you can get the longitude and latitude that Google maps require.  I also use the MaxMind GeoIP code but that is PHP based (although it is available for other languages).  There is another javascript interface to MaxMind that I have on this page: http://www.dibsplace.com/MaxMindJS.html  You could combine the two to get the longitude and latitude from MaxMind and pass it to the Google Maps API.

Note that GeoIP actually returns a location based on your ISP because IP addresses are allocated to ISPs, not individuals.
0
 

Author Comment

by:error77
ID: 40317641
Sorry, but I'm not looking for my isp's ip. I'm looking for geolocation
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Add box and text color changing for everything 1 26
add image on html mail 6 19
Save ms data to server side. 19 46
How can i  prevent default  Submision? 6 27
This article discusses four methods for overlaying images in a container on a web page
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question