Télécharger le code : Menu contextuel sur click droit
Cet exemple vous permet d'afficher un menu contextuel grâce à un simple click droit sur une carte Google Maps.
Il est suffisamment complet pour voir comment utiliser à la fois gmap3 avec Google Maps et obtenir ainsi une interface avancée.
Afin d'obtenir un code clair, le menu est créé en utilisant une classe personnalisée.
Une fois la carte initialisée, des auditeurs d'événement sont créés et paramétrés afin d'afficher un menu personnalisé sur un simple clic droit et gérer certaines actions.
Le menu contextuel sera automatiquement masqué, après quelques secondes, une fois la souris déplacée en dehors de son espace.
L'utilisation de ce menu permet d'effectuer un zoom avant, un zoom arrière, de centrer la carte et de calculer un itinéraire routier.
Les icônes du menu sont affichés en utilisant CSS.
Faites un clic droit sur la carte pour utiliser le menu contextuel.
Carte
Code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8"/>
<title>Votre titre de page</title>
<style>
#container{
position:relative;
height:700px;
}
#directions{
position:absolute;
width: 23%;
right:1%;
height: 690px;
overflow:auto;
}
#googleMap{
width: 75%;
height: 700px;
}
#menu{
background-color: #FFFFFF;
width:190px;
height:150px;
padding:0px;
border:1px;
cursor:pointer;
border-left:1px solid #cccccc;
border-top:1px solid #cccccc;
border-right:1px solid #676767;
border-bottom:1px solid #676767;
}
#menu .item{
font-family: arial,helvetica,sans-serif;
font-size: 12px;
text-align:left;
line-height: 30px;
border-left:0px;
border-top:0px;
border-right:0px;
padding-left:30px;
background-repeat: no-repeat;
background-position: 4px center;
}
#menu .item.itemA{
background-image: url(http://www.votredomaine.fr/images/icon_greenA.png);
}
#menu .item.itemB{
background-image: url(http://www.votredomaine.fr/images/icon_greenB.png);
}
#menu .item.zoomIn{
background-image: url(http://www.votredomaine.fr/images/zoomin.png);
}
#menu .item.zoomOut{
background-image: url(http://www.votredomaine.fr/images/zoomout.png);
}
#menu .item.centerHere{
background-image: url(http://www.votredomaine.fr/images/here.png);
}
#menu .item.hover{
background-color: #d6e9f8;
}
#menu .item.separator{
border-bottom:1px solid #cccccc;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="http://www.votredomaine.fr/js/gmap3.js"></script>
<script type="text/javascript">
/**************************************************
* Menu
**************************************************/
function Menu($div){
var that = this, ts = null;
this.$div = $div;
this.items = [];
// create an item using a new closure
this.create = function(item){
var $item = $('<div class="item '+item.cl+'">'+item.label+'</div>');
$item
// bind click on item
.click(function(){
if (typeof(item.fnc) === 'function'){
item.fnc.apply($(this), []);
}
})
// manage mouse over coloration
.hover(
function(){$(this).addClass('hover');},
function(){$(this).removeClass('hover');}
);
return $item;
};
this.clearTs = function(){
if (ts){
clearTimeout(ts);
ts = null;
}
};
this.initTs = function(t){
ts = setTimeout(function(){that.close()}, t);
};
}
// add item
Menu.prototype.add = function(label, cl, fnc){
this.items.push({
label:label,
fnc:fnc,
cl:cl
});
}
// close previous and open a new menu
Menu.prototype.open = function(event){
this.close();
var k,
that = this,
offset = {
x:0,
y:0
},
$menu = $('<div id="menu"></div>');
// add items in menu
for(k in this.items){
$menu.append(this.create(this.items[k]));
}
// manage auto-close menu on mouse hover / out
$menu.hover(
function(){that.clearTs();},
function(){that.initTs(3000);}
);
// change the offset to get the menu visible (#menu width & height must be defined in CSS to use this simple code)
if ( event.pixel.y + $menu.height() > this.$div.height()){
offset.y = -$menu.height();
}
if ( event.pixel.x + $menu.width() > this.$div.width()){
offset.x = -$menu.width();
}
// use menu as overlay
this.$div.gmap3({
action:'addOverlay',
latLng: event.latLng,
content: $menu,
offset: offset
});
// start auto-close
this.initTs(5000);
}
// close the menu
Menu.prototype.close = function(){
this.clearTs();
this.$div.gmap3({action:'clear', name:'overlay'});
}
/**************************************************
* Main
**************************************************/
$(function(){
var $map = $('#googleMap'),
menu = new Menu($map),
current, // current click event (used to save as start / end position)
m1, // marker "from"
m2, // marker "to"
center = [48.85861640881589, 2.3459243774414062];
// add marker and manage which one is it (A, B)
function addMarker(isM1){
// clear previous marker if set
var clear = {action:'clear', name:'marker', tag:''};
if (isM1 && m1) {
clear.tag = 'from';
$map.gmap3(clear);
} else if (!isM1 && m2){
clear.tag = 'to';
$map.gmap3(clear);
}
// add marker and store it
$map.gmap3({
action:'addMarker',
latLng:current.latLng,
options:{
icon:new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/icon_green' + (isM1 ? 'A' : 'B') + '.png')
},
tag: (isM1 ? 'from' : 'to'),
callback: function(marker){
if (isM1){
m1 = marker;
} else {
m2 = marker;
}
updateDirections();
}
});
}
// function called to update direction is m1 and m2 are set
function updateDirections(){
if (!(m1 && m2)){
return;
}
$map.gmap3({
action:'getRoute',
options:{
origin:m1.getPosition(),
destination:m2.getPosition(),
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function(results){
if (!results) return;
$map.gmap3({ action: 'setDirections', directions:results});
}
});
}
// MENU : ITEM 1
menu.add('Itinéraire à partir de ce lieu', 'itemA',
function(){
menu.close();
addMarker(true);
})
// MENU : ITEM 2
menu.add('Itinéraire vers ce lieu', 'itemB separator',
function(){
menu.close();
addMarker(false);
});
// MENU : ITEM 3
menu.add('Zoom avant', 'zoomIn',
function(){
var map = $map.gmap3('get');
map.setZoom(map.getZoom() + 1);
menu.close();
});
// MENU : ITEM 4
menu.add('Zoom arrière', 'zoomOut',
function(){
var map = $map.gmap3('get');
map.setZoom(map.getZoom() - 1);
menu.close();
});
// MENU : ITEM 5
menu.add('Centrer la carte ici', 'centerHere',
function(){
$map.gmap3('get').setCenter(current.latLng);
menu.close();
});
// INITIALIZE GOOGLE MAP
$map.gmap3(
{
action: 'init',
options:{
center:center,
zoom: 5
},
events:{
rightclick:function(map, event){
current = event;
menu.open(current);
},
click: function(){
menu.close();
},
dragstart: function(){
menu.close();
},
zoom_changed: function(){
menu.close();
}
}
},
// add direction renderer to configure options (else, automatically created with default options)
{
action:'addDirectionsRenderer',
preserveViewport: true,
markerOptions:{
visible: false
}
},
// add a direction panel
{
action:'setDirectionsPanel',
id : 'directions'
}
);
});
</script>
</head>
<body>
<div id="container">
<div id="directions"></div>
<div id="googleMap"></div>
</div>
</body>
</html>
Icônes
