{"id":1097,"date":"2014-10-31T15:23:56","date_gmt":"2014-10-31T13:23:56","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=1097"},"modified":"2017-12-19T15:41:03","modified_gmt":"2017-12-19T13:41:03","slug":"html5-geolocation-api-with-google-maps","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-geolocation-api-with-google-maps\/","title":{"rendered":"HTML5 Geolocation API with Google Maps"},"content":{"rendered":"

\"\"I have been reading Head First HTML5<\/a> and read about the Geolocation support in HTML5<\/a> and also went through the example they have shared about using the Google Maps<\/a> with HTML5 geolocation API.<\/p>\n

It was an interesting example and I went a step further and enhanced the example to show some eat outs around the current location. For this I made use of the Places library<\/a> which comes with the Google Maps API.
\n 
\nIn this post I will cover:<\/p>\n

    \n
  1. Getting started with HTML5 Geolocation API.<\/a><\/li>\n
  2. Integrating Google map to show current location.<\/a><\/li>\n
  3. Enhancing to show nearby places on Google map.<\/a><\/li>\n<\/ol>\n

    [ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n

    <\/a>Getting started with HTML5 Geolocation API<\/h2>\n

    The Geolocation API enables the browser to identify the location of the user using various mechanisms like IP Address, GPS, Cellular networks depending on the device being used by the user. The location is identified as a pair of latitude and longitude values. Lets go ahead and create a simple html page and a javascript file to get the user location:<\/p>\n

    <html>\r\n  <head>\r\n    <meta charset='utf-8'>\r\n    <title>Where am I?<\/title>\r\n    <script src='myLoc.js'><\/script>\r\n  <\/head>\r\n  <body>\r\n    <!-- The location will be updated in the below div -->\r\n    <div id='location'>\r\n      Your location will go here.\r\n    <\/div>\r\n  <\/body>\r\n<\/html><\/pre>\n
    And the javascript code which updates the above html with the user location is:<\/p>\n
    \/\/myLoc.js\r\nwindow.onload = getMyLocation;\r\n\r\nfunction getMyLocation() {\r\n  if (navigator.geolocation) {\r\n    navigator.geolocation.getCurrentPosition(displayLocation);\r\n  } else {\r\n    alert('Oops, no geolocation support');\r\n  }\r\n}\r\n\r\n\/\/This function is inokved asynchronously by the HTML5 geolocation API.\r\nfunction displayLocation(position) {\r\n\r\n  \/\/The latitude and longitude values obtained from HTML 5 API.\r\n  var latitude = position.coords.latitude;\r\n  var longitude = position.coords.longitude;\r\n\r\n  \/\/Setting the latitude and longitude values in the div.\r\n  var div = document.getElementById('location');\r\n  div.innerHTML = 'You are at Latitude: ' + latitude + ', Longitude: ' + longitude;\r\n}<\/pre>\n
    In the above javascript code the navigator<\/code> object\u2019s geolocation<\/code> property is used to obtain the location of the user. If the browser supports the HTML5 Geolocation API then it will ask confirmation from the user about accessing the user\u2019s location. Once the location has been identified it asynchronously invokes the callback displayLocation<\/code> registered with the Geolocation API. The callback does nothing special other than updating the html with the latitude and longitude values.<\/p>\n
    <\/a>Integrating Google map to show current location<\/h2>\n
    To integrate the Google Map, one should start with the Getting started<\/a> document of Google Map API which shows how to get a Google API Key and also some sample example to start using Google Maps API. One would have to do the following to mark the current location on the Google map:<\/p>\n
      \n
        \n
      1. Create an LatLng<\/a> object using the latitude and longitude values obtained from the geolocation API<\/li>\n<\/ol>\n<\/ol>\n
        \/\/Creating a new object for using latitude and longitude values with Google map.\r\nvar latLng = new google.maps.LatLng(latitude, longitude);<\/pre>\n
          \n
            \n
          1. Create a MapOptions<\/a> object.<\/li>\n<\/ol>\n<\/ol>\n
            \/\/Setting up the map options like zoom level, map type.\r\nvar mapOptions = {\r\n  center: latLng,\r\n  zoom: 18,\r\n  mapTypeId: google.maps.MapTypeId.ROADMAP\r\n};<\/pre>\n
              \n
                \n
              1. Create a Map<\/a> object and pass the html element (in our case div<\/code> tag) to embed the map and MapOptions object created in the step above.<\/li>\n<\/ol>\n<\/ol>\n
                \/\/Creating the Map instance and assigning the HTML div element to render it in.\r\nvar map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);<\/pre>\n
                  \n
                    \n
                  1. Create a MarkerOptions<\/a> object indicating the location to be marked on the map<\/li>\n<\/ol>\n<\/ol>\n
                    var markerOptions = {\r\n  position: latLng,\r\n  map: map,\r\n  animation: google.maps.Animation.DROP,\r\n  clickable: true\r\n}<\/pre>\n
                      \n
                        \n
                      1. Create a Marker<\/a> object and provide it the MarkerOptions object and the Map object created in the steps above. This Marker object uses the MarkerOptions object to get the location information and then the Map object to mark the location.<\/li>\n<\/ol>\n<\/ol>\n
                        \/\/Setting up the marker object to mark the location on the map canvas.\r\nvar marker = new google.maps.Marker(markerOptions);<\/pre>\n
                          \n
                        1. Additionally lets add an note window which would show some thing about the place when the user clicks on the location. This is achieved by creating an InfoWindowOptions object and using it to create an InfoWindow object. This note window should be opened when the user clicks on the marker which can be done by adding an event listener for click<\/code> event.<\/li>\n<\/ol>\n
                          var infoWindowOptions = {\r\n  content: content,\r\n  position: latLng\r\n};\r\n\r\nvar infoWindow = new google.maps.InfoWindow(infoWindowOptions);\r\n\r\ngoogle.maps.event.addListener(marker, 'click', function() {\r\n  infoWindow.open(map);\r\n});<\/pre>\n
                          The complete code which shows the location on the Google map is given below:<\/p>\n
                          <!-- index.html -->\r\n<html>\r\n  <head>\r\n    <meta charset='utf-8'>\r\n    <title>Where am I?<\/title>\r\n    <script type='text\/javascript' src='https:\/\/maps.googleapis.com\/maps\/api\/js?sensor=true'><\/script>\r\n    <script src='myLoc.js'><\/script>\r\n    <style type='text\/css'>\r\n      html { height: 100% }\r\n      body { height: 100%; margin: 0; padding: 0 }\r\n      #map-canvas { height: 100% }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div id='location'>\r\n      Your location will go here.\r\n    <\/div>\r\n    <div id='map-canvas'>\r\n      Google Map will go here!.\r\n    <\/div>\r\n  <\/body>\r\n<\/html><\/pre>\n
                          The javascript code:<\/p>\n
                          \/\/myLoc.js\r\nwindow.onload = getMyLocation;\r\n\/\/Note that map has been globally declared.\r\nvar map;\r\nfunction getMyLocation() {\r\n  if (navigator.geolocation) {\r\n    navigator.geolocation.getCurrentPosition(displayLocation);\r\n  } else {\r\n    alert('Oops, no geolocation support');\r\n  }\r\n}\r\n\r\n\/\/This function is inokved asynchronously by the HTML5 geolocation API.\r\nfunction displayLocation(position) {\r\n  \/\/The latitude and longitude values obtained from HTML 5 API.\r\n  var latitude = position.coords.latitude;\r\n  var longitude = position.coords.longitude;\r\n\r\n  \/\/Creating a new object for using latitude and longitude values with Google map.\r\n  var latLng = new google.maps.LatLng(latitude, longitude);\r\n\r\n  showMap(latLng);\r\n  createMarker(latLng);\r\n\r\n  \/\/Also setting the latitude and longitude values in another div.\r\n  var div = document.getElementById('location');\r\n  div.innerHTML = 'You are at Latitude: ' + latitude + ', Longitude: ' + longitude;\r\n}\r\n\r\nfunction showMap(latLng) {\r\n  \/\/Setting up the map options like zoom level, map type.\r\n  var mapOptions = {\r\n    center: latLng,\r\n    zoom: 18,\r\n    mapTypeId: google.maps.MapTypeId.ROADMAP\r\n  };\r\n\r\n  \/\/Creating the Map instance and assigning the HTML div element to render it in.\r\n  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);\r\n}\r\nfunction createMarker(latLng) {\r\n  \/\/Setting up the marker object to mark the location on the map canvas.\r\n  var markerOptions = {\r\n    position: latLng,\r\n    map: map,\r\n    animation: google.maps.Animation.DROP,\r\n    clickable: true\r\n  }\r\n  var marker = new google.maps.Marker(markerOptions);\r\n\r\n  var content = 'You are here: ' + latLng.lat() + ', ' + latLng.lng();\r\n  addInfoWindow(marker, latLng, content);\r\n\r\n}\r\n\r\nfunction addInfoWindow(marker, latLng, content) {\r\n  var infoWindowOptions = {\r\n    content: content,\r\n    position: latLng\r\n  };\r\n\r\n  var infoWindow = new google.maps.InfoWindow(infoWindowOptions);\r\n\r\n  google.maps.event.addListener(marker, 'click', function() {\r\n    infoWindow.open(map);\r\n  });\r\n}<\/pre>\n
                          <\/a>Enhancing to show nearby places on Google map<\/h2>\n
                          Now lets make use of the Places library and mark the nearby eatouts on the map. This involves the following steps:<\/p>\n
                            \n
                              \n
                            1. Create an instance of PlacesService<\/a> using the Map object created previously.<\/li>\n<\/ol>\n<\/ol>\n
                              var nearByService = new google.maps.places.PlacesService(map);<\/pre>\n
                                \n
                                  \n
                                1. Create a PlacesSearchRequest<\/a> object to hold the information related to searching the places.<\/li>\n<\/ol>\n<\/ol>\n
                                  var request = {\r\n  location: latLng,\r\n  radius: 1000,\r\n  types: ['food', 'bakery', 'cafe',\r\n          'grocery_or_supermarket',\r\n          'meal_delivery','restaurant',\r\n          'meal_takeaway',\r\n          'shopping_mall']\r\n};<\/pre>\n
                                    \n
                                      \n
                                    1. Create a callback method which will be invoked on obtaining the places result. This callback method will be provided with the results and the result status.<\/li>\n<\/ol>\n<\/ol>\n
                                      function handleNearBySearchResults(results, status) {\r\n  if (status == google.maps.places.PlacesServiceStatus.OK) {\r\n    for (var i = 0; i < results.length; i++) {\r\n      var place = results[i];\r\n      createMarker(place.geometry.location, place);\r\n    }\r\n  }\r\n}<\/pre>\n
                                        \n
                                      1. Register the callback with the PlacesService object and also provide the PlacesSearchRequest object created above.<\/li>\n<\/ol>\n
                                        nearByService.nearbySearch(request, handleNearBySearchResults);<\/pre>\n
                                        Lets look at the complete code which identifies the location, marks it on the Google map and also marks nearby eat outs on the map.
                                        \nThe html for this is:<\/p>\n
                                        <!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset='utf-8'>\r\n    <title>Where am I?<\/title>\r\n    <script type='text\/javascript'\r\n    src='https:\/\/maps.googleapis.com\/maps\/api\/js?sensor=true&libraries=places,weather'><\/script>\r\n    <script src='myLoc.js'><\/script>\r\n    <style type='text\/css'>\r\n      html { height: 100% }\r\n      body { height: 100%; margin: 0; padding: 0 }\r\n      #map-canvas { height: 100% }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div id='location'>\r\n      Your location will go here.\r\n    <\/div>\r\n    <div id='map-canvas'>\r\n      Google Map will go here!.\r\n    <\/div>\r\n  <\/body>\r\n<\/html><\/pre>\n
                                        The javascript code for this is:<\/p>\n
                                        window.onload = getMyLocation;\r\n\r\nvar map;\r\nfunction getMyLocation() {\r\n  if (navigator.geolocation) {\r\n    navigator.geolocation.getCurrentPosition(displayLocation);\r\n  } else {\r\n    alert('Oops, no geolocation support');\r\n  }\r\n}\r\n\r\n\/\/This function is inokved asynchronously by the HTML5 geolocation API.\r\nfunction displayLocation(position) {\r\n  \/\/The latitude and longitude values obtained from HTML 5 API.\r\n  var latitude = position.coords.latitude;\r\n  var longitude = position.coords.longitude;\r\n\r\n  \/\/Creating a new object for using latitude and longitude values with Google map.\r\n  var latLng = new google.maps.LatLng(latitude, longitude);\r\n\r\n  showMap(latLng);\r\n\r\n  addNearByPlaces(latLng);\r\n  createMarker(latLng);\r\n\r\n  \/\/Also setting the latitude and longitude values in another div.\r\n  var div = document.getElementById('location');\r\n  div.innerHTML = 'You are at Latitude: ' + latitude + ', Longitude: ' + longitude;\r\n}\r\n\r\nfunction showMap(latLng) {\r\n  \/\/Setting up the map options like zoom level, map type.\r\n  var mapOptions = {\r\n    center: latLng,\r\n    zoom: 18,\r\n    mapTypeId: google.maps.MapTypeId.ROADMAP\r\n  };\r\n\r\n  \/\/Creating the Map instance and assigning the HTML div element to render it in.\r\n  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);\r\n}\r\n\r\nfunction addNearByPlaces(latLng) {\r\n\r\n  var nearByService = new google.maps.places.PlacesService(map);\r\n\r\n  var request = {\r\n    location: latLng,\r\n    radius: 1000,\r\n    types: ['food', 'bakery', 'cafe', 'grocery_or_supermarket', 'meal_delivery','restaurant', 'meal_takeaway', 'shopping_mall']\r\n  };\r\n\r\n  nearByService.nearbySearch(request, handleNearBySearchResults);\r\n}\r\n\r\nfunction handleNearBySearchResults(results, status) {\r\n  if (status == google.maps.places.PlacesServiceStatus.OK) {\r\n    for (var i = 0; i < results.length; i++) {\r\n      var place = results[i];\r\n      createMarker(place.geometry.location, place);\r\n    }\r\n  }\r\n}\r\n\r\nfunction createMarker(latLng, placeResult) {\r\n  var markerOptions = {\r\n    position: latLng,\r\n    map: map,\r\n    animation: google.maps.Animation.DROP,\r\n    clickable: true\r\n  }\r\n  \/\/Setting up the marker object to mark the location on the map canvas.\r\n  var marker = new google.maps.Marker(markerOptions);\r\n\r\n  if (placeResult) {\r\n    var content = placeResult.name+'<br\/>'+placeResult.vicinity+'<br\/>'+placeResult.types;\r\n    addInfoWindow(marker, latLng, content);\r\n  }\r\n  else {\r\n    var content = 'You are here: ' + latLng.lat() + ', ' + latLng.lng();\r\n    addInfoWindow(marker, latLng, content);\r\n  }\r\n\r\n}\r\n\r\nfunction addInfoWindow(marker, latLng, content) {\r\n  var infoWindowOptions = {\r\n    content: content,\r\n    position: latLng\r\n  };\r\n\r\n  var infoWindow = new google.maps.InfoWindow(infoWindowOptions);\r\n\r\n  google.maps.event.addListener(marker, 'click', function() {\r\n    infoWindow.open(map);\r\n  });\r\n}<\/pre>\n
                                        Some of the recommended books:<\/p>\n