jQuery Plugin For Google Maps API Manipulation - Google Map

Google Map is a lightweight jQuery plugin that enables you to create maps, markers or routes for your own complete google map using google maps API 3.

Features:

• Allows to create 4 types of maps: road map, satellite map, hybrid and terrain.
• Allows to create map markers with links, infoview and personal icons.
• Allows you to create a route between a start postal address to an arrival postal address or GPS coordinates.
• Callback supported.

See also:

• Lightweight jQuery Plugin For Embedding Google Maps - initmap.js
• jQuery Plugin for Integrating Google Maps v3 With Your Web Page - TekMap
• Google Maps Store Locator Plugin For jQuery
• jQuery Plugin To Locate and Display Determined Places with Google Maps API

Basic Usage:

1. Include jQuery library and jQuery Google Map plugin on the web page

<script src="jquery-latest.min.js"></script>
<script src="jquery.googlemap.js"></script>

2. Load the Google Maps JavaScript API on the page.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>

3. Create a container to place your Google Map

<div id="map" style="width: 400px; height: 300px;"></div>

4. Call the plugin to create a simple Google Map

$(function() {
  $("#map").googleMap({
    zoom: 10, 
    coords: [48.895651, 2.290569], 
    type: "ROADMAP" 
  });
})

5. Complete settings with default values.

$(function() {
  $("#map").googleMap({
    zoom : 10,
    coords : [48.895651, 2.290569],
    type : "ROADMAP", // SATELLITE, HYBRID, TERRAIN
    debug : false,
    langage : "english",
    overviewMapControl: false,
    streetViewControl: false,
    scrollwheel: false,
    mapTypeControl: false
  });
})

6. Add a marker & infowindow to the Google Map.

$("#map").addMarker({
  coords: [48.895651, 2.290569],
  address: "Address", // or an address
  url: 'https://www.jqueryscript.net', 
  id: 'marker1',
  title: 'Info Window Title',
  text:  'HTML Content Here',
  icon: 'marer.png',
  draggable: true,
  success: function(e) { // callback
    $("#latitude").val(e.lat);
    $("#longitude").val(e.lon);
  }
});

7. Add a route to the Google Map.

$("#map").addWay({
  start: "Start Address",
  end:  [48.895651, 2.290569],
  route : 'way', 
  langage : 'english',
  step: [ // Array of steps (optional)
   [48.85837009999999, 2.2944813000000295],
   "Porte Maillot, 75017 Paris", 
  ]
});

8. Remove a marker from the Google Map.

$("#map").removeMarker("marker1");

9. Remove all markers & routes from the Google Map.

$("#map").removeMarker("marker1");

Changelog:

2019-03-21

• Close infowindow when another marker is clicked
• Doc updated
• Demo updated

2018-10-16

• Get Zipcode in the addMarker success function.

2016-03-21

• v1.5

2015-11-20

• Update jquery.googlemap.js

2015-08-15

• Various bugfixes

2015-07-16

• Update jquery.googlemap.js

2015-06-16

• Add Marker using coords

v1.3.1 (2014-04-10)

• Bugs fixed.

v1.3.0 (2014-01-09)

• Add waysteps and debug option

---

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