October 18, 2017 Syed Shah

How to add google geo coding lookup and map marker using express with pug

google map market using node, express and pug

Purpose

In this post we will do the following:

  1. Lookup an address using google’s geocoding API
  2. Show it in a map by specifying a google map marker

We will do this in express using pug template engine

Include google maps api

First include the google maps api in your .pug file

script(async defer src="https://maps.googleapis.com/maps/api/js?key={your_key}&callback=initMap")

key: Is the google api key assigned to your account by google

callback: the callback function which would get invoked when the api loads. We will define this function in the next section

Define callback function: initMap()

Our main function which will do all the talking. Subsequent sections will implement this function

function initMap() {
}

Lookup address using geocoding API

Inside initMap() implementation we will first lookup the address using google’s geocoding API

function initMap() {
  var formattedAddress = "1600 Amphitheatre Parkway Mountain View CA";
      
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode( { "address": formattedAddress }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
      var location = results[0].geometry.location;
    } else {
      console.log("STATUS: " + status);
    }
  });
}

Once the call to geocode function succeeds, the location’s latitude and longitude would be accessible via results[0].geometry.location

Render map with marker

Now update the initMap() function to render map with a marker pointing to the address we are interested in

function initMap() {
  var formattedAddress = "1600 Amphitheatre Parkway Mountain View CA";
      
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode( { "address": formattedAddress }, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
    var location = results[0].geometry.location;
          
          
    var uluru = {lat:location.lat(), lng: location.lng()};
    var map = new google.maps.Map(document.getElementById('map'), {zoom: 10,center: uluru});
    var marker = new google.maps.Marker({position: uluru,map: map});
  } else {
    console.log("STATUS: " + status);
  }
});

Add div for map

Finally we need to add a div to serve as a placeholder for the map. Note line #11 in initMap() implementation, we get an element by id=map and pass it to the map API. Therefore we need to define a section in our page with id set to map

div(id="map" style="height: 250px; width:342px")

Complete file

My complete pug file looks like as follows:

html
  head
    title= 'Maps Test'

block content
  script(async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC3NwSSI8vS76gZ9wz4Q0yOo-eWtrsq-Kw&callback=initMap")

  script.
    function initMap() {
      var formattedAddress = "1600 Amphitheatre Parkway Mountain View CA";
      
      var geocoder = new google.maps.Geocoder();
      geocoder.geocode( { "address": formattedAddress }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
          var location = results[0].geometry.location;
          
          var uluru = {lat:location.lat(), lng: location.lng()};
          var map = new google.maps.Map(document.getElementById('map'), {zoom: 10,center: uluru});
          var marker = new google.maps.Marker({position: uluru,map: map});

          } else {
            console.log("STATUS: " + status);
          }
      });
    }

  div(id="map" style="height: 250px; width:342px")

Test It!

The above code yields the following output

google map marker using express and pug

HTH! 🙂

References

https://developers.google.com/maps/documentation/geocoding/start
https://codepen.io/SitePoint/pen/ KwwMJP

Share this...
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Tagged: , , , , , ,

Contact Us

Get in touch to schedule your FREE consultation!