1. Introduction
In this tutorial we will talk about Google Maps API V3 which is a new version of the Maps API.
We will see how to get started with the new Googlemaps V3 API. Recall that the old version required a key to work and that it was valid only for a single domain name. Throughout the tutorial, we will show you how to initialize a map, how to place a point on a map, how to create a tooltip on the point placed on the map, how to create a tab in a tooltip.
At the end we will get a Google map with above, the point we will have placed identified by a marker and a tooltip when we click on the marker.
2. Initializing the map
We will not talk about the html or the javascript which is the prerequisite for understanding this tutorial.
No special configurations to do here to start.
The Google Maps JavaScript JavaScript API version 3 allows us to create, edit and customize maps using thegoogle.maps.Map. Several card types exist:
Thanks to the characteristics of the object google.maps.MapOptions we can define the properties of a map according to your needs: center the map , define the map type , activate or disable pan control, etc.
These cards are interactive. We can zoom in or move them at will. You can also add event watchers to make the map react to various events.
Finally, different types of information may appear on the Google map , for example:
- an itinerary
- an image ,
- a polygon
- a polyline
- a bubble info
- a Street view
- the data contained in a file KML KMZ .
To begin, let’s start from a basic html structure as below;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Google Maps Api v3</title>
</head>
<style type="text/css">
#container{position:relative;width:990px;margin:auto;}
#container #map{width:500px;height:500px;margin:auto;}
</style>
<body>
<div id="container">
<div id="map">
<p>Please wait while loading the map...</p>
</div>
</div>
<!-- Include Javascript -->
<script type="text/javascript" src="<a href="http://maps.google.com/maps/api/js?sensor=false">http://maps.google.com/maps/api/js?sensor=false</a>"></script>
<script type="text/javascript" src="/js/functions.js"></script>
</body>
</html>
Some explanations on the structure:
The div bearing the map identifier will be the container of our map; the message in this div will be deleted when the card is loaded.
We include the Googlemap Api and a file called functions.js in which we will initialize our map.
Here are our functions.js
var map;
var initialize;
initialize = function(){
var latLng = new google.maps.LatLng(50.6371834, 3.063017400000035); // Corresponds to the Lille coordinates
var myOptions = {
zoom : 14,
center : latLng,
mapTypeId : google.maps.MapTypeId.TERRAIN, // Card type, different values possible HYBRID, ROADMAP, SATELLITE, FIELD
maxZoom : 20
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
};
initialize();
3. Place a point on the map
We have just initialized our map on Lille, simple is not it?
Now maybe you want to place a point on this map? Well, here’s how to do it:
var marker = new google.maps.Marker({
position : latLng,
map : map,
title : "Lille"
//icon : "marker_lille.gif"
});
It is imperative to create the marker after the initialization of the card to specify the marker the card on which it should be displayed. See the example below:
initialize = function(){
var latLng = new google.maps.LatLng(50.6371834, 3.063017400000035); // Correspond au coordonnées de Lille
var myOptions = {
zoom : 14, // Zoom par défaut
center : latLng, // Starting coordinates of the latLng card
mapTypeId : google.maps.MapTypeId.TERRAIN, // Card type, different values possible HYBRID, ROADMAP, SATELLITE, FIELD
maxZoom : 20
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
var marker = new google.maps.Marker({
position : latLng,
map : map,
title : "Lille"
//icon : "marker_lille.gif" // Marker image path to override default
});
};
4. Create a tooltip
Here you are now with your map and your first point, you will notice that nothing happens when you click on the point, here is how to display a tooltip:
var contentMarker = ‘Suspendisse quis magna dapibus orci porta varius sed sit amet purus. Ut eu justo dictum elit malesuada facilisis. Proin ipsum ligula, feugiat sed faucibus a, http://www.google.fr“>google sit amet mauris.’
var infoWindow = new google.maps.InfoWindow({
content : contentMarker,
position : latLng
});
We have just defined the tooltip and its contents, it remains only to define a listener:
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map,marker);
});
And yes!
5. Create a tab in a tooltip
Previously, with the Api v2 Googlemaps, it was possible to obtain tabs in tooltips, from now on this is no longer possible, one of the solutions is to create the tab itself in javascript. I propose you to go through jQuery where any other library of your choice for the realization of the tabulation. For my part, I choose Jquery. Here is an example below.
var contentString = [
'<div id="containerTabs">',
'<div id="tabs">',
'<ul>',
'<li><a href="#tab-1"><span>Lorem</span></a></li>',
'<li><a href="#tab-2"><span>Ipsum</span></a></li>',
'<li><a href="#tab-3"><span>Dolor</span></a></li>',
'</ul>',
'<div id="tab-1">',
'<h3>Lille</h3><p>Suspendisse quis magna dapibus orci porta varius sed sit amet purus. Ut eu justo dictum elit malesuada facilisis. Proin ipsum ligula, feugiat sed faucibus a, <a href="<a href="http://www.google.fr/">http://www.google.fr</a>">google</a> sit amet mauris. In sit amet nisi mauris. Aliquam vestibulum quam et ligula pretium suscipit ullamcorper metus accumsan.</p>',
'</div>',
'<div id="tab-2">',
'<h3>Aliquam vestibulum</h3><p>Aliquam vestibulum quam et ligula pretium suscipit ullamcorper metus accumsan.</p>',
'</div>',
'<div id="tab-3">',
'<h3>Pretium suscipit</h3><ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li><li>Amectus</li></ul>',
'</div>',
'</div>',
'</div>'
].join('');
google.maps.event.addListener(infoWindow, 'domready', function(){ // infoWindow is of course our tooltip
jQuery("#tabs").tabs();
});
It will of course not forget to download and include jQuery Ui available here http://jqueryui.com/download
Here is the visual result;
You can integrate this code if you want to have two points on the map:
var marker1;
var marker2;
var latLngMarker1 = new google.maps.LatLng ('50 .62925 ',' 3.057256000000052 ');
var latLngMarker2 = new google.maps.LatLng ('50 .6283955 ',' 3.0520400000000336 ');
var contentStringMarker1 = 'Lille';
var contentStringMarker2 = 'rue Léon Gambetta Lille';
var infoWindowMarker1 = new google.maps.InfoWindow ({
content: contentStringMarker1,
position: latLngMarker1
});
var infoWindowMarker2 = new google.maps.InfoWindow ({
content: contentStringMarker2,
position: latLngMarker2
});
google.maps.event.addListener (marker1, \ 'click \', function () {
infoWindowMarker1.open (map, marker1);
});
google.maps.event.addListener (marker2, \ 'click \', function () {
infoWindowMarker2.open (map, marker2);
});
6. References
Reference i : https://developers.google.com/maps/documentation/javascript/tutorial?hl=fr
Reference ii : http://www.touraineverte.com/google-maps-api-version-3/exemple-tutoriel-cartes-maps/index.html
7. Conclusion
To summarize, we have briefly shown how to start with Googlemaps API V3 and this through a step-by-step example in which we placed a point, created a tooltip, created a tab in the tooltip; It should also be noted that Beyond May 19, 2013 cards coded using the Google Maps JavaScript Version 2 API will no longer be displayed.
The API Google map V3 no longer requires an authentication key for its use. Just call the API this way: