jQuery Plugin For Google Maps API Manipulation Google Map - Download jQuery Plugin For Google Maps API Manipulation - Google Map

Download jQuery Plugin For Google Maps API Manipulation – Google Map

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin For Google Maps API Manipulation – Google Map, hope it will help you in programming stack.

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

Demo Download

“

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.

Basic Usage:

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

view source
1 <script src="jquery-latest.min.js"></script>
2 <script src="jquery.googlemap.js"></script>

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

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

3. Create a container to place your Google Map

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

4. Call the plugin to create a simple Google Map

view source
1 $(function() {
2   $("#map").googleMap({
3     zoom: 10,
4     coords: [48.895651, 2.290569],
5     type: "ROADMAP"
6   });
7 })

5. Complete settings with default values.

view source
01 $(function() {
02   $("#map").googleMap({
03     zoom : 10,
04     coords : [48.895651, 2.290569],
05     type : "ROADMAP", // SATELLITE, HYBRID, TERRAIN
06     debug : false,
07     langage : "english",
08     overviewMapControl: false,
09     streetViewControl: false,
10     scrollwheel: false,
11     mapTypeControl: false
12   });
13 })

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

view source
01 $("#map").addMarker({
02   coords: [48.895651, 2.290569],
03   address: "Address", // or an address
04   url: 'https://www.jqueryscript.net',
05   id: 'marker1',
06   title: 'Info Window Title',
07   text:  'HTML Content Here',
08   icon: 'marer.png',
09   draggable: true,
10   success: function(e) { // callback
11     $("#latitude").val(e.lat);
12     $("#longitude").val(e.lon);
13   }
14 });

7. Add a route to the Google Map.

view source
01 $("#map").addWay({
02   start: "Start Address",
03   end:  [48.895651, 2.290569],
04   route : 'way',
05   langage : 'english',
06   step: [ // Array of steps (optional)
07    [48.85837009999999, 2.2944813000000295],
08    "Porte Maillot, 75017 Paris",
09   ]
10 });

8. Remove a marker from the Google Map.

view source
1 $("#map").removeMarker("marker1");

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

view source
1 $("#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.

source : jquery.net

Related posts: