Dans cet exemple, nous allons créer une simple carte, à laquelle des boutons personnalisés sont associés.
Un premier groupe de boutons (Zoom) sera situé en haut à droite de la carte (jaune) :
Un second groupe de boutons (Type de carte) sera situé en haut à gauche de la carte (rouge) :
Un troisième groupe de boutons sera situé en bas à droite de la carte (vert) :
[1] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> [2] <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr"> [3] <head> [4] <title>API Google Maps - Personnalisation contrôles - appendChild createTextNode addDomListener</title> [5] <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> [6] <script src="http://maps.google.com/maps?file=api&v=2.x&key= Mettez Votre Clef API Ici " type="text/javascript"></script> [7] <script language='JavaScript' type='text/JavaScript'> [8] function load (){ [9] var MaCarte = new GMap2(document.getElementById('EmplacementDeMaCarte')); [10] function ZOOMBoutonControl() {} [11] ZOOMBoutonControl.prototype = new GControl(); [12] ZOOMBoutonControl.prototype.initialize = function(MaCarte) { [13] var containerZOOM = document.createElement('div'); [14] var boutonZoomPlus = document.createElement('div'); [15] this.setButtonStyle_Zoom_(boutonZoomPlus); [16] containerZOOM.appendChild(boutonZoomPlus); [17] boutonZoomPlus.appendChild(document.createTextNode('Zoom +')); [18] GEvent.addDomListener(boutonZoomPlus, 'click', function() { [19] MaCarte.zoomIn(); [20] }); [21] GEvent.addDomListener(boutonZoomPlus, 'mouseover', function() { [22] this.style.backgroundColor = '#FFFF00'; [23] }); [24] GEvent.addDomListener(boutonZoomPlus, 'mouseout', function() { [25] this.style.backgroundColor = '#FAFDCE'; [26] }); [27] var boutonZoomMoins = document.createElement('div'); [28] this.setButtonStyle_Zoom_(boutonZoomMoins); [29] containerZOOM.appendChild(boutonZoomMoins); [30] boutonZoomMoins.appendChild(document.createTextNode('Zoom -')); [31] GEvent.addDomListener(boutonZoomMoins, 'click', function() { [32] MaCarte.zoomOut(); [33] }); [34] GEvent.addDomListener(boutonZoomMoins, 'mouseover', function() { [35] this.style.backgroundColor = '#FFFF00'; [36] }); [37] GEvent.addDomListener(boutonZoomMoins, 'mouseout', function() { [38] this.style.backgroundColor = '#FAFDCE'; [39] }); [40] var boutonZoom8 = document.createElement('div'); [41] this.setButtonStyle_Zoom_(boutonZoom8); [42] containerZOOM.appendChild(boutonZoom8); [43] boutonZoom8.appendChild(document.createTextNode('Zoom 8')); [44] GEvent.addDomListener(boutonZoom8, 'click', function() { [45] MaCarte.setZoom(8); [46] }); [47] GEvent.addDomListener(boutonZoom8, 'mouseover', function() { [48] this.style.backgroundColor = '#FFFF00'; [49] }); [50] GEvent.addDomListener(boutonZoom8, 'mouseout', function() { [51] this.style.backgroundColor = '#FAFDCE'; [52] }); [53] var boutonZoom15 = document.createElement('div'); [54] this.setButtonStyle_Zoom_(boutonZoom15); [55] containerZOOM.appendChild(boutonZoom15); [56] boutonZoom15.appendChild(document.createTextNode('Zoom 15')); [57] GEvent.addDomListener(boutonZoom15, 'click', function() { [58] MaCarte.setZoom(15); [59] }); [60] GEvent.addDomListener(boutonZoom15, 'mouseover', function() { [61] this.style.backgroundColor = '#FFFF00'; [62] }); [63] GEvent.addDomListener(boutonZoom15, 'mouseout', function() { [64] this.style.backgroundColor = '#FAFDCE'; [65] }); [66] [67] MaCarte.getContainer().appendChild(containerZOOM); [68] return containerZOOM; [69] } [70] ZOOMBoutonControl.prototype.setButtonStyle_Zoom_ = function(button) { [71] button.style.textDecoration = 'none'; [72] button.style.color = '#000000'; [73] button.style.backgroundColor = '#FAFDCE'; [74] button.style.font = '13px Verdana'; [75] button.style.border = '1px solid black'; [76] button.style.padding = '2px'; [77] button.style.marginBottom = '3px'; [78] button.style.textAlign = 'center'; [79] button.style.width = '100px'; [80] button.style.cursor = 'pointer'; [81] } [82] ZOOMBoutonControl.prototype.getDefaultPosition = function() { [83] return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7)); [84] } [85] function PSMBoutonControl() {} [86] PSMBoutonControl.prototype = new GControl(); [87] PSMBoutonControl.prototype.initialize = function(MaCarte) { [88] var containerPSM = document.createElement('div'); [89] var boutonPlan = document.createElement('div'); [90] this.setButtonStyle_PSM(boutonPlan); [91] containerPSM.appendChild(boutonPlan); [92] boutonPlan.appendChild(document.createTextNode('Plan')); [93] GEvent.addDomListener(boutonPlan, 'click', function() { [94] MaCarte.setMapType(G_NORMAL_MAP); [95] }); [96] GEvent.addDomListener(boutonPlan, 'mouseover', function() { [97] this.style.backgroundColor = '#FF0000'; [98] }); [99] GEvent.addDomListener(boutonPlan, 'mouseout', function() { [100] this.style.backgroundColor = '#FFE6E6'; [101] }); [102] var boutonSatellite = document.createElement('div'); [103] this.setButtonStyle_PSM(boutonSatellite); [104] containerPSM.appendChild(boutonSatellite); [105] boutonSatellite.appendChild(document.createTextNode('Satellite')); [106] GEvent.addDomListener(boutonSatellite, 'click', function() { [107] MaCarte.setMapType(G_SATELLITE_MAP); [108] }); [109] GEvent.addDomListener(boutonSatellite, 'mouseover', function() { [110] this.style.backgroundColor = '#FF0000'; [111] }); [112] GEvent.addDomListener(boutonSatellite, 'mouseout', function() { [113] this.style.backgroundColor = '#FFE6E6'; [114] }); [115] var boutonMixte = document.createElement('div'); [116] this.setButtonStyle_PSM(boutonMixte); [117] containerPSM.appendChild(boutonMixte); [118] boutonMixte.appendChild(document.createTextNode('Mixte')); [119] GEvent.addDomListener(boutonMixte, 'click', function() { [120] MaCarte.setMapType(G_HYBRID_MAP); [121] }); [122] GEvent.addDomListener(boutonMixte, 'mouseover', function() { [123] this.style.backgroundColor = '#FF0000'; [124] }); [125] GEvent.addDomListener(boutonMixte, 'mouseout', function() { [126] this.style.backgroundColor = '#FFE6E6'; [127] }); [128] [129] MaCarte.getContainer().appendChild(containerPSM); [130] return containerPSM; [131] } [132] PSMBoutonControl.prototype.setButtonStyle_PSM = function(button) { [133] button.style.textDecoration = 'none'; [134] button.style.color = '#000000'; [135] button.style.backgroundColor = '#FFE6E6'; [136] button.style.font = '13px Arial'; [137] button.style.border = '1px solid black'; [138] button.style.padding = '2px'; [139] button.style.marginBottom = '3px'; [140] button.style.textAlign = 'center'; [141] button.style.width = '100px'; [142] button.style.cursor = 'pointer'; [143] } [144] PSMBoutonControl.prototype.getDefaultPosition = function() { [145] return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7)); [146] } [147] function SRBoutonControl() {} [148] SRBoutonControl.prototype = new GControl(); [149] SRBoutonControl.prototype.initialize = function(MaCarte) { [150] var containerSR = document.createElement('div'); [151] var boutonSauvegarde = document.createElement('div'); [152] this.setButtonStyle_Bis_(boutonSauvegarde); [153] containerSR.appendChild(boutonSauvegarde); [154] boutonSauvegarde.appendChild(document.createTextNode('Enregistrer la carte')); [155] GEvent.addDomListener(boutonSauvegarde, 'click', function() { [156] MaCarte.savePosition(); [157] }); [158] GEvent.addDomListener(boutonSauvegarde, 'mouseover', function() { [159] this.style.backgroundColor = '#00FF00'; [160] }); [161] GEvent.addDomListener(boutonSauvegarde, 'mouseout', function() { [162] this.style.backgroundColor = '#EAFFEA'; [163] }); [164] var boutonRestauration = document.createElement('div'); [165] this.setButtonStyle_Bis_(boutonRestauration); [166] containerSR.appendChild(boutonRestauration); [167] boutonRestauration.appendChild(document.createTextNode('Restaurer la carte')); [168] GEvent.addDomListener(boutonRestauration, 'click', function() { [169] MaCarte.returnToSavedPosition(); [170] }); [171] GEvent.addDomListener(boutonRestauration, 'mouseover', function() { [172] this.style.backgroundColor = '#00FF00'; [173] }); [174] GEvent.addDomListener(boutonRestauration, 'mouseout', function() { [175] this.style.backgroundColor = '#EAFFEA'; [176] }); [177] [178] MaCarte.getContainer().appendChild(containerSR); [179] return containerSR; [180] } [181] SRBoutonControl.prototype.getDefaultPosition = function() { [182] return new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(7, 7)); [183] } [184] SRBoutonControl.prototype.setButtonStyle_Bis_ = function(button) { [185] button.style.textDecoration = 'none'; [186] button.style.color = '#000000'; [187] button.style.backgroundColor = '#EAFFEA'; [188] button.style.font = '13px Verdana'; [189] button.style.border = '1px solid black'; [190] button.style.padding = '2px'; [191] button.style.marginBottom = '3px'; [192] button.style.textAlign = 'center'; [193] button.style.width = '100px'; [194] button.style.cursor = 'pointer'; [195] } [196] MaCarte.addControl(new ZOOMBoutonControl()); [197] MaCarte.addControl(new PSMBoutonControl()); [198] MaCarte.addControl(new SRBoutonControl()); [199] MaCarte.setCenter(new GLatLng(47.168076,0.235895), 17); [200] } [201] </script> [202] </head> [203] [204] <body onload="load()" onunload="GUnload()"> [205] <div id="EmplacementDeMaCarte" style="width: 740px; height: 400px;"></div> [206] </body> [207] </html>
En cours de construction
Néant