gmaps.js Test

HTML

<script src="https://rawgit.com/HPNeo/gmaps/master/gmaps.js"></script>
<div id="map">
</div>

<p style="margin-top: 30px; color: #666;">From the article <a style="color: #666;" target="_blank" href="http://sitepoint.com/google-maps-made-easy-with-gmaps-js">Google Maps Made Easy with GMaps.js</a>, by Shivam Mamgain. (<a style="font-style: italic; color: #999;" href="http://codepen.io/shivamMg/pen/ojaJMv">Original Pen</a>)</p>

CSS

#map {
  width: 100%;
  height: 100%;
}

JavaScript

var marker1 = {
  lat: 29.022166,
  lng: 79.4902733,
  color: 'red'
}
var marker2 = {
  lat: 29.022646,
  lng: 79.4951863,
  color: 'blue'
}

var polyline = {
  path: [
    [29.022166, 79.4902733],
    [29.022646, 79.4951863]
  ],
  strokeColor: '#004d40',
  strokeWeight: 7
}

var url = GMaps.staticMapURL({
  size: [700, 500],
  lat: 29.021941,
  lng: 79.4904443,
  zoom: 16,
  markers: [
    marker1,
    marker2
  ],
  polyline: polyline
});

console.log(url);

var map = document.getElementById('map');
var static_img = document.createElement('img');
static_img.src = url;
map.appendChild(static_img);