See on GitHub

Jquery Google Map

Plugin jQuery : Create your own complete Google Map

Download .zip Download .tar.gz

Introduction

jQuery Google Map is a jQuery Plugin allows you to easely manipulate the Google Map API. You are now able to create maps, add some markers et create routes.

Installation

For using the plugin, you need to call jQuery, the Google API and the plugin file :

<script src="javascripts/jquery.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>
<script type="text/javascript" src="javascripts/jquery.googlemap.js"></script>

How it works

Create a simple map

On your HTML file, create your map block. Don't forget to give it some width and height with CSS.

You just have to call the googleMap() method. You can specify the center of the map, the map type and the initial zoom level.

<div id="map" style="width: 300px; height: 300px;"></div>
<script type="text/javascript">
  $(function() {
    $("#map").googleMap({
      zoom: 10, // Initial zoom level (optional)
      coords: [48.895651, 2.290569], // Map center (optional)
      type: "ROADMAP" // Map type (optional)
    });
  })
</script>

There is 4 different type of map :

Add a marker

Once your map initialized, you can add some markers and assign them an action.

Add a marker with a link
<div id="map" style="width: 300px; height: 300px;"></div>
<script type="text/javascript">
  $(function() {
    $("#map").googleMap();
    $("#map").addMarker({
      coords: [48.895651, 2.290569], // GPS coords
      url: 'http://www.tiloweb.com', // Link to redirect onclick (optional)
      id: 'marker1' // Unique ID for your marker
    });
  })
</script>
Add a marker with infoview

You can add a marker by give it a title and a HTML content.

<div id="map" style="width: 300px; height: 300px;"></div>
<script type="text/javascript">
  $(function() {
    $("#map").googleMap();
    $("#map").addMarker({
      coords: [48.895651, 2.290569], // GPS coords
      title: 'Marker n°1', // Title
      text:  '<b>Lorem ipsum</b> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' // HTML content
    });
  })
</script>
Add a marker with a personnal icon

You can add a marker and change the default icon by specify the URL to your image.

<div id="map" style="width: 300px; height: 300px;"></div>
<script type="text/javascript">
  $(function() {
    $("#map").googleMap();
    $("#map").addMarker({
      coords: [48.895651, 2.290569],
      icon: 'http://www.tiloweb.com/wp-content/uploads/2012/04/logo-e1335400790554.png', // Icon URL,
      url: 'http://www.tiloweb.com' // Link URL
    });
  })
</script>
Add multiple markers

You can add multiple markers to your map.

<div id="map" style="width: 300px; height: 300px;"></div>
<script type="text/javascript">
  $(function() {
    $("#map").googleMap();
    
    // Marker 1
    $("#map").addMarker({
    	 coords: [48.895651, 2.290569]
    });
    
    // Marker 2
    $("#map").addMarker({
    	 coords: [48.869439, 2.308664]
    });
	
    // Marker 3
    $("#map").addMarker({
        coords: [48.888846, 2.198674]
    });
  })
</script>
Add a marker from a postal address

You can place a marker by giving a postal address.

<div id="map" style="width: 300px; height: 300px;"></div>
<script type="text/javascript">
  $(function() {
    $("#map").googleMap();
    $("#map").addMarker({
    	address: "15 avenue des champs Elysées 75008 Paris", // Postale Address
    	url: 'http://www.tiloweb.com' // Link
    });
  })
</script>

Add a route

Google allows you to create a route between a start postal address to an arrival postal address or GPS coordinates. You have to specify the path the block where you want the route to be displayed.

<div id="map" style="width: 300px; height: 300px;"></div>
<script type="text/javascript">
  $(function() {
    $("#map").googleMap();
    $("#map").addWay({
    	start: "15 avenue des champs Elysées 75008 Paris", // Postal address for the start marker (obligatory)
		end:  [48.895651, 2.290569], // Postal Address or GPS coordinates for the end marker (obligatory)
		route : 'way', // Block's ID for the route display (optional)
		langage : 'english' // language of the route detail (optional)
	});
  })
</script>

Add a route with some steps

You can add some steps to your route

<div id="map" style="width: 300px; height: 300px;"></div>
<script type="text/javascript">
  $(function() {
    $("#map").googleMap();
    $("#map").addWay({
    	start: "15 avenue des champs Elysées 75008 Paris", // Postal address for the start marker (obligatory)
		end:  [48.895651, 2.290569], // Postal Address or GPS coordinates for the end marker (obligatory)
		route : 'way', // Block's ID for the route display (optional)
		langage : 'english', // language of the route detail (optional)
		step: [ // Array of steps (optional)
		    [48.85837009999999, 2.2944813000000295], // Postal Address or GPS coordinates of the step
		    "Porte Maillot, 75017 Paris", // Postal Address or GPS coordinates of the step
		]
	});
  })
</script>

Add a callback

When you start to place a marker on the map, you can have a callback with the GPS coordinates of the calculated marker in order to save it.

<div id="map" style="width: 300px; height: 300px;"></div>
<script type="text/javascript">
  $(function() {
    $("#map").googleMap();
    $("#map").addMarker({
    	address: "15 avenue des champs Elysées 75008 Paris", // Postal address
    	success: function(e) {
    	    $("#latitude").val(e.lat);
    	    $("#longitude").val(e.lon);
    	}
	});
  })
</script>

Make a marker draggable

When you want to be abble to move your marker with your mouse, you can add the "draggable" param to it. The success function will be call every time your user finish dragging the marker.

<div id="map" style="width: 300px; height: 300px;"></div>
<script type="text/javascript">
  $(function() {
    $("#map").googleMap();
    $("#map").addMarker({
    	address: "15 avenue des champs Elysées 75008 Paris", // Postal address
    	draggable: true,
    	success: function(e) {
    	    $("#latitude").val(e.lat);
    	    $("#longitude").val(e.lon);
    	}
	});
  })
</script>

Remove a marker

If you have set an ID for your marker, you will be able to remove this marker.

<div id="map" style="width: 300px; height: 300px;"></div>
<script type="text/javascript">
  $(function() {
  	$("#map").googleMap();
  	$("#map").addMarker({
      coords: [48.895651, 2.290569], // GPS coords
      url: 'http://www.tiloweb.com', // Link to redirect onclick (optional)
      id: 'marker1' // Unique ID for your marker
    });
    $("#map").removeMarker("marker1");
  })
</script>

Clean a map

You can remove all the marker just by reinitializing the map.

<div id="map" style="width: 300px; height: 300px;"></div>
<script type="text/javascript">
  $(function() {
    $("#map").googleMap();
  })
</script>