Demo map
GMap3 allows you to finely manipulate yours markers and others objects, to associate custom data usable in each event.
This is an example of using jQuery UI Bootstrap with gmap3.
Accordion
Paris
Paris is the capital and largest city of France.
It is situated on the river Seine, in northern France, at the heart of the Île-de-France region.
The city of Paris, within its administrative limits (the 20 arrondissements), has a population of about 2,230,000.
Its metropolitan area is one of the largest population centres in Europe, with more than 12 million inhabitants.
Paris on Wikipedia
Poitiers
Poitiers is a city on the Clain river in west central France.
It is a commune and the capital of the Vienne department and of the Poitou-Charentes region.
The centre is picturesque and its streets are interesting for predominant remains of historical architecture, especially from the Romanesque period.
Two major military battles occurred near the city: in 732, the Battle of Poitiers (also known as the Battle of Tours), in which the Franks commanded by Charles Martel halted the expansion of the Umayyad Caliphate, and in 1356, the Battle of Poitiers, a key victory for English forces during the Hundred Years' War.
Poitiers on Wikipedia
Perpignan
Perpignan is a city, a commune and the capital of the Pyrénées-Orientales department in southern France.
Perpignan was the capital of the former province and county of Roussillon (Rosselló in Catalan) and continental capital of the Kingdom of Majorca in the 13th and 14th centuries.
As of 2009, Perpignan had 120,100 inhabitants (Perpignanais, Perpinyanés) in the city proper. The metropolitan area has a total population of 300,221 in 2009.
Perpignan on Wikipedia
function selectCity(index, updateAccordion) {
if (updateAccordion) {
$( "#accordion-map" ).accordion("option", "active", index);
}
$('#gmap3').gmap3({
exec: {
name: "marker",
all:"true",
func: function(value){
// data.object is the google.maps.Marker object
if (value.data.index === index) {
value.object.setIcon("http://maps.google.com/mapfiles/marker_green.png");
} else {
value.object.setIcon("http://maps.google.com/mapfiles/marker.png");
}
}
}
});
}
$(function(){
//##### Accordion with gmap3
$( "#accordion-map" ).accordion({
header: "h3",
activate: function(event, ui) {
// index / 2 because of the 2 elements by set (h3 + div)
selectCity(ui.newHeader.index() / 2);
}
});
$('#gmap3').gmap3({
map:{
options:{
center:[46.578498,2.457275],
zoom: 5
}
},
marker:{
values:[
{latLng:[48.8620722, 2.352047], data: {index: 0},
options:{icon: "http://maps.google.com/mapfiles/marker_green.png"}
},
{address:"86000 Poitiers, France", data: {index: 1}},
{address:"66000 Perpignan, France", data: {index: 2}}
],
options:{
draggable: false
},
events:{
click: function (marker, event, context) {
selectCity(context.data.index, true);
}
}
}
});
});
Tabs
Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.
Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.
// invoque google maps on 2 divs
$(".gmap3").gmap3({
map: {
options: {
zoom: 6,
center: [49.265984, -123.127491],
mapTypeId: google.maps.MapTypeId.ROADMAP
}
}
});
// Append the meteo layer on weather map
var map = $("#weather").gmap3("get");
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
// force maps to refresh on show
$("#tabs").tabs({
activate: function(event, ui) {
if (ui.newPanel.hasClass("gmap3")) {
ui.newPanel.gmap3({trigger: "resize"});
}
}
});