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 :
- ROADMAP : The default map, displaying streets, city names, etc.
- SATELLITE : The Google Satellite view.
- HYBRID : The Google Satellite view combine with the roadmap view.
- TERRAIN : The relief view.
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>