[HTML5] APIs – Geolocation: Mapping

Finding out your position (latitude and longitude) is quite interesting but for most of us, those numbers are not intuitive until they are displayed in the map.

Let’s pin your location on the Map. “Google Maps” provides all necessary scripts for you.

 

1. Google Maps Script

The first step is to include the google maps script in your page.

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

 

2. Adding a Map Area

At first, you need to define an area for a map.

<div id="map" style="height:600px; width:600px"> </div>

 

3. Creating a LatLng object

Once you get your position using Geolocation APIs, you need to convert your position to the “google.maps.LatLng” object.

var googlePosition = new google.maps.LatLng(latitude, longitude);

 

4. Setting the Map Options

The next step is to decide how the map is created. There are a lot of options available but the following options are requred:

  • zoom: The initial Map zoom level (0-21)
  • center: The initial Map center as a “LatLng” object
  • mapTypeId: HYBRID, ROADMAP, SATELLITE, or TERRAIN
var mapOptions = {
  zoom: 10,
  center: googlePosition,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

 

5. Creating the Map Object

Now you are ready to create a map.

The constructor of the “google.maps.Map” class is like this:

  •  Map(mapDiv:Node, opts?:MapOptions)
var mapDiv = document.getElementById("map");
var map = new google.maps.Map(mapDiv, mapOptions);

 

6. Sticking a Pin in the Map

Without a pin, you are lost in the map. Let’s pin your location.

To pin the location on a map, you need to create a “google.maps.Marker” object with options.

  • position: a “LatLng” object
  • map:  a “google.maps.Map” object
  • title: a text for the pin
var markerOptions = {
  position: googlePosition,
  map: map,
  title: "You are here."
};
var marker = new google.maps.Marker(markerOptions);

 

7. Displaying Location Information

The pin you just added is clickable by default and you can display the information when it is clicked.

The code is a little more complex. You need to create a “google.maps.InfoWindow” object and add a listener to the click event.

var infoWindowOptions = {
  content: "You are at Latitude: " + latitude + ", Longitude: " + longitude,
  position: googlePosition
};
var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
google.maps.event.addListener(marker, "click", function() { infoWindow.open(map) });

 

8. Sample Code

Here is the full page code.

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation Map</title>
    <script src="../../Scripts/jquery.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script>
    function displayLocation(position) {
      var latitude = position.coords.latitude;
      var longitude = position.coords.longitude;
      // map
      var googlePosition = new google.maps.LatLng(latitude, longitude);
      var mapOptions = {
        zoom: 12,
        center: googlePosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var mapDiv = document.getElementById("map");
      var map = new google.maps.Map(mapDiv, mapOptions);
      // marker
      var markerOptions = {
        position: googlePosition,
        map: map,
        title: "You are here."
      };
      var marker = new google.maps.Marker(markerOptions);
      // info
      var infoWindowOptions = {
        content: "You are at Latitude: " + latitude + ", Longitude: " + longitude,
        position: googlePosition
      };
      var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
      google.maps.event.addListener(marker, "click", function() { infoWindow.open(map) });
    }
    $(document).ready(function () {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(displayLocation);
      }
    });
    </script>
  </head>
  <body>
    <section id="mapsection">
      <div id="map" style="height:600px; width:600px"></div>
    </section>
  </body>
</html>

One thought on “[HTML5] APIs – Geolocation: Mapping

  1. First of all thanks for this tutorial.
    I was trying to use the geolocation for an html5 ios app, and your sample code works perfectly in firefox for osx, but when i try to load it in a webview inside the app, nothing is displayed, why? looking around, I’ve seen that iOS Safari should support it (http://caniuse.com/geolocation) any ideas?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s