jQuery Plugin For Google Maps API Manipulation - Google Map

jQuery Plugin For Google Maps API Manipulation - Google Map
File Size: 6.84 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.