SEO-friendly Google Maps Embed Plugin For jQuery - k-gmaps

k-gmaps is a jQuery plugin which helps you embed customizable, SEO-friendly Google maps into the webpage using both semantic html markups and JavaScript objects.

How to use it:

1. Include the necessary jQuery library and Google Maps API on the webpage.

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>

2. Download and place the jQuery k-maps plugin's script after jQuery.

<script src="js/kmaps.js"></script>

3. Embed a Google map with custom address, infowindow, lat/lng, logo and other map options into the webpage using html markups:

<div id="gmap_canvas" class="gmap">
  <div class="Lat">10.359352</div>
  <div class="Lng">106.673089</div>
  <div class="MarginLat">-0.0050</div>
  <div class="MarginLng">0</div>
  <div class="imgMap">logo.png</div>
    <address>Address Here</address>
  <div class="infoWindow">
    <h3>Hello World</h3>
    <p>More Description here</p>
  </div>
  <div class="mapType">ROADMAP</div>
  <div class="mapCenter">true</div>
  <div class="Title">Hello</div>
  <div class="infoWidth">200</div>
  <div class="mapStyle">black</div>
  <div class="mapZoom">15</div>
  <div class="scrollwheel">true</div>
  <div class="disableDoubleClickZoom">true</div>
  <div class="fullscreenControl">true</div>
  <div class="disableOpenURL">false</div>
  <div class="OpenURL">View full map</div>
  <div class="draggable">true</div>
  <div class="disableDefaultUI">false</div>
</div>

$(document).ready(function() {
  $('#gmap_canvas').kmaps();
});

4. You can also set the options in the JavaScript during initializing.

$('.gmap_canvas').kmaps({
  zoom: 15,
  Lng: 0,
  Lat: 0,
  MarginLat: 0,
  MarginLng: 0,
  center: true,
  scrollwheel: true,
  draggable: true,
  disableDefaultUI: true,
  styles: 'default',
  imgMap: 'http://maps.google.com/mapfiles/ms/micons/red.png', // https://sites.google.com/site/gmapsdevelopment/
  mapTypeId: 'ROADMAP',
  infoWindow: '',
  InfoWidth: 400,
  OpenURL: 'view full map',
  disableOpenURL: true,
  disableDoubleClickZoom: false,
  fullscreenControl: false,
  Title: '',
  Address: ''
});

---

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