jQuery / HTML5 Based Google Maps Image Generator

A minimalist jQuery script that helps you generate custom Google Maps images using HTML5 data attributes and Google Static Maps API.

How to use it:

1. Create an element for the Google Maps image and specify the address using data-address attributes.

<a href="#" class="demo" 
   data-address="New York, US">
</a>

2. Include the needed jQuery JavaScript library at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

3. The Google Maps Image Generator Function.

function generateGoogleMapImg(e) {
  $(e).each(function(){
    
    /** Settings */
    var address = $(this).data('address');
    var marker = $(this).data('marker');
    var markerSize = $(this).data('marker-size') ? $(this).data('marker-size') : 'normal';
    var markerColor = $(this).data('marker-color') ? $(this).data('marker-color') : 'purple';
    var mapWidth = $(this).data('width') ? $(this).data('width') : 390;
    var mapHeight = $(this).data('height') ? $(this).data('height') : 250;
    var mapZoom = $(this).data('zoom') ? $(this).data('zoom') : 12;
    var mapType = $(this).data('type') ? $(this).data('type') : 'terrain';
    
    /** If the address is set, generate the map image */
    if(address) {
      
      /** Create the map URL */
      var url = 'https://maps.googleapis.com/maps/api/staticmap?center=' + address + '&zoom=' + mapZoom + '&size=' + mapWidth + 'x' + mapHeight + '&maptype=' + mapType;
      
      /** Check for the marker */
      if(marker){
        url += '&markers=size:' + markerSize + '%7Ccolor:' + markerColor + '%7C' + address;
      }
      
      /** Create the map image */
      $(this).html('<img src="' + url + '">');
      
    /** If the address is empty remove the map wrapper */
    } else {
      $(this).css("display", "none");
    }
  });
}

4. Generate a Google Maps image inside the element you just created.

$(function() {
  generateGoogleMapImg('.demo');
});

5. All Html5 data attributes.

• data-address: Required. Used to generate the map.
• data-marker: Enables the pin/marker.
• data-marker-Size: tiny, small, mid, normal.
• data-marker-Color: black, brown, green, purple, yellow, blue, gray, orange, red, white.
• data-width: sets the image width, in pixels.
• data-height: sets the image height, in pixels.
• data-Zoom: sets the map's zoom level, 0 to 21.
• data-Type: roadmap, satellite, terrain, or hybrid.

---

This awesome jQuery plugin is developed by CSWApps. For more Advanced Usages, please check the demo page or visit the official website.