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

File Size: 214 KB
Views Total: 907
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></script>
<script src="//;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 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>
$(document).ready(function() {

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

  zoom: 15,
  Lng: 0,
  Lat: 0,
  MarginLat: 0,
  MarginLng: 0,
  center: true,
  scrollwheel: true,
  draggable: true,
  disableDefaultUI: true,
  styles: 'default',
  imgMap: '', //
  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.