Share
Vous avez conçu un nouveau site Web brillant. en choisissant avec soin les couleurs, la typographie et les photographies afin de refléter parfaitement l'image de marque de l'entreprise. Ensuite, votre client vous demande d’ajouter une carte. Bien sûr, vous pouvez utiliser un "assistant" de création de carte, tel que celui fourni avec chaque compte Google. Mais, avouons-le, leur fonctionnalité est limitée et leur apparence est plutôt générique.!
En revanche, l’API Google Maps vous donne la liberté de créer des cartes entièrement personnalisées, capables de faire toutes sortes de choses intéressantes. La carte de l'historique de Portsmouth est un site que j'ai construit récemment à l'aide de cette API..
Cette série de didacticiels vous montrera comment créer des cartes personnalisées à l'aide de l'API Google Maps. Cela impliquera de vous salir les mains avec un peu de JavaScript, mais ça en vaudra la peine.
Les tutoriels couvriront toutes sortes de choses. Pour en nommer quelques-uns: couleurs de carte personnalisées, menus et marqueurs; donner vie à votre propre conception de carte (par exemple, une carte manuscrite) en la superposant sur une carte google zoomable; la liaison avec l'API Flickr; optimisation de l'image; conception réactive; optimisation et validation du code. Autrement dit, lorsque vous aurez terminé, vous pourrez non seulement créer de jolies cartes, mais vous aurez également examiné de nombreux éléments pertinents pour créer un site Web..
Ces tutoriels utilisent le scénario d’une société britannique qui fait la promotion de festivals de musique. L'image "Produit final" ci-dessus montre le genre de chose que nous visons. Regarde la démo.
Remarque: Seul le marqueur de Glastonbury est "actif" dans cet exemple.
Avant de commencer, vous voudrez peut-être télécharger les fichiers associés à ce tutoriel. J'ai inclus un fichier HTML séparé pour chaque activité.
Une API, ou Application Programming Interface (interface de programmation d'application), est une manière élégante de dire un ensemble de commandes (par exemple, des fonctions) que publie une entreprise (par exemple, Facebook, Twitter, You Tube, Google). L'idée est que vous pouvez utiliser ces commandes pour créer une version hautement personnalisée de leur contenu. Par exemple, dans le cas de l'API Google Maps, le "contenu" correspond aux cartes, alors que dans le cas de l'API Flickr, le "contenu" correspond aux photos..
Lorsque les gens parlent de «mash-ups», ils signifient qu’ils ont utilisé l’API de deux entreprises ou plus pour combiner du contenu, par exemple en faisant apparaître des images de Flickr sur une carte Google. Il y a littéralement des milliers de ces API autour; jetez un oeil à Web programmable pour plus d'informations.
Nous examinerons l'API Flickr dans un prochain tutoriel, mais pour commencer, restons concentrés sur l'API Google Maps. Cela vous permettra de faire toutes sortes de choses, y compris la personnalisation des couleurs, des marqueurs de carte, le style de la boîte de dialogue, le niveau de détail et le niveau de zoom. Sans parler de la possibilité que la carte fasse des choses sympas, telles que l'affichage de données en direct, le regroupement de marqueurs, la planification d'itinéraires, la création de superpositions personnalisées, la révélation dynamique de données… la liste est interminable.!
Au risque de souligner l'évidence, vous avez besoin d'un compte Google pour commencer. Si vous n'en avez pas actuellement, rendez-vous sur Google et inscrivez-vous.
Armé de votre compte Google, vous pouvez désormais vous aventurer dans les pages API Google Maps. Marquer cette page; vous deviendrez très familier avec elle. Les domaines principaux sont:-
Avant d'aller plus loin, vous avez également besoin d'une clé API (une longue séquence de lettres et de chiffres, qui vous est propre). Obtenez votre clé API ici.
OK, vous êtes prêt à commencer à construire.
Pour que la carte fournie fonctionne, remplacez la mention "YOUR_API_KEY_GOES_HERE" par votre propre clé API. Votre carte doit ressembler à la carte ci-dessus.
Le principe de base du code est qu’il crée un div (appelé carte du festival) dans lequel le JavaScript charge la carte. J'ai ajouté des commentaires dans le code pour expliquer son fonctionnement, mais il convient de souligner les éléments principaux..
Le code déclare d'abord votre application en tant que HTML5 à l'aide de la déclaration Doctype .
Il définit ensuite le style de la carte. les bits entre le Mots clés. Vous pouvez adapter le style sur le # carte-festival id en fonction de l'endroit où vous voulez placer votre carte. Si vous souhaitez une carte «plein écran», définissez la largeur et la hauteur sur 100%, puis supprimez les marges..
Ensuite, en sautant un instant le code JavaScript, le code entre les balises body crée un objet html vide, c’est-à-dire un div (carte du festival) pour tenir la carte. Cela agit comme une sorte de "titulaire" dans lequel le JavaScript charge la carte..
OK - maintenant en regardant JavaScript - le code se connecte d'abord à la clé de l'API Google Maps.
Il se lance ensuite dans le code JavaScript qui crée la carte. Rappel rapide: fonctions JavaScript (par exemple. loadFestivalMap) sont un ensemble de commandes qui ne s'exécutent que lorsqu'elles sont appelées par un autre code. Cela peut paraître compliqué, mais en réalité, il ne fait que peu de choses -
Accentsconagua
festivalMapOptions) de la carte (par exemple, la latitude et la longitude, les niveaux de zoom, etc.) et une variable JavaScript vide (festivalMap) est créé et la carte sera assignée sous peu. (Astuce: itouchmap est un site pratique pour rechercher les coordonnées de latitude et de longitude de n’importe quel lieu.)loadFestivalMap La fonction est déclenchée par cette ligne:google.maps.event.addDomListener (window, 'load', loadFestivalMap); festivalMap). Ce faisant, il applique également les options de configuration et charge la carte dans la carte du festival div créé pour le tenir.loadMapMarkers la fonction est déclenchée en cours d'exécution par la dernière ligne du loadFestivalMap une fonction.Si cela n’a aucun sens, parcourez les commentaires de la version complète du code au fur et à mesure de leur explication..
Vous devriez maintenant avoir une carte prête à fonctionner et, avec un peu de chance, le JavaScript ne vous a pas déconcerté! En supposant que tout va bien, nous pouvons commencer à rendre la carte un peu plus intéressante.
Il est facile d'utiliser vos propres images comme marqueurs de carte. De la même manière que vous définissez les options de propriétés pour la carte elle-même (par exemple,. centre, zoom etc. comme ci-dessus), vous pouvez également modifier les propriétés des marqueurs de carte. Pour utiliser une image différente comme marqueur de carte, il vous suffit de définir la icône propriété de vos marqueurs de carte. (Si vous êtes intéressé, la section Marqueurs de l'API Google Maps répertorie toutes les propriétés, méthodes et événements que vous pouvez utiliser.).
En règle générale, les marqueurs de carte sont des fichiers .pngs, car ils vous permettent d’avoir une forme irrégulière avec un arrière-plan transparent..
Nous devons également définir la zone "cliquable" pour chaque marqueur afin de nous assurer que le bit "image" du fichier .png est cliquable et que le bit transparent ne l’est pas. Ceci est vraiment important si les marqueurs se chevauchent.
Vous créez d’abord l’image d’icône de carte (marqueurIconGlastonbury), puis créez la forme d’icône de la carte (marqueurShapeGlastonbury), et enfin vous liez les deux à votre marqueur de carte (marqueurGlastonbury).
// Définition de la position du marqueur de carte de Glastonbury. var markerPositionGlastonbury = new google.maps.LatLng (51.159803, -2.585585); // Définition de l'icône à utiliser avec le marqueur de carte Glastonbury. var markerIconGlastonbury = url: 'icons / icon_glas_uk.png', // Le fichier image de taille. size: new google.maps.Size (225, 120), // Le point sur l'image à partir duquel mesurer l'ancre. 0, 0 est en haut à gauche. origin: new google.maps.Point (0, 0), // Les coordonnées x et y du point d'ancrage sur le marqueur. par exemple. Si votre marqueur de carte était une punaise, l’ancre serait la pointe de la punaise. ancre: new google.maps.Point (189, 116); // Définition de la forme à utiliser avec le marqueur de carte Glastonbury. var markerShapeGlastonbury = coord: [12,4,216,22,212,74,157,70,114,111,125,67,6,56], tapez: 'poly'; // Création du marqueur de carte Glastonbury. markerGlastonbury = new google.maps.Marker (// utilise la position définie ci-dessus. position: markerPositionGlastonbury, // ajoute le marqueur à la carte. map: festivalMap, titre: 'Glastonbury Festival', // attribue l'image définie ci-dessus. icon: markerIconGlastonbury, // assigne la forme de l'icône définie ci-dessus au marqueur. shape: markerShapeGlastonbury, // définit l'index z du marqueur de carte. zIndex: 102);
Vous pouvez télécharger le fichier html complet en haut de cette page ou regarder la version en direct. Pour le moment, je viens d'ajouter un marqueur de carte… évidemment, j'en ajouterai d'autres sous peu!
Allusion: Pour obtenir les coordonnées de forme de l'icône de la carte, j'insère l'image de l'icône dans une page Web temporaire dans Dreamweaver, puis j'utilise l'outil Polygon Hotspot pour obtenir les coordonnées, puis je les recopie dans la page principale de la carte..Les éléments, tels que les marqueurs de carte, peuvent avoir les coordonnées x, y et z. L'indice z est la profondeur. Il détermine comment les éléments sont «empilés» les uns sur les autres, et donc comment ils se chevauchent.
Si les coordonnées x et y d'un élément sont identiques, les éléments ayant un indice z supérieur sont affichés au-dessus des éléments ayant un indice z inférieur. (Z-index ne fonctionne que sur des éléments positionnés, par exemple relatifs, fixes ou absolus).
Jusqu'à présent, la carte semble correcte car, par défaut, l'API Google Maps donne aux éléments apparaissant en bas de l'écran un indice z plus élevé, de sorte qu'ils apparaissent en haut des éléments légèrement plus en haut de l'écran. Par exemple. l'icône de l'île de Wight se trouve au-dessus des icônes du festival de Glastonbury et de Reading (voir l'image ci-dessous).
Nous verrons plus loin dans ce tutoriel comment vous pouvez modifier les index z pour manipuler l'affichage des marqueurs de carte.
Bien que la carte commence à prendre forme, la carte par défaut ne correspond pas vraiment à l'effet que je souhaite obtenir. Heureusement, il est très facile d'utiliser les options de style de l'API pour personnaliser l'apparence de la carte..
Je devrais également dire à ce stade que je viens de saisir quelques festivals de musique pour illustrer cet exemple. C'était quelque peu aléatoire et ma sélection ne reflétait pas mon opinion - pour ou contre - aucun festival!
Utilisez l’assistant JSON pour déterminer l’aspect que vous souhaitez donner à votre carte. Vous pouvez changer les couleurs de pratiquement tout, ajouter et supprimer des détails, définir le remplissage de couleur et la géométrie indépendamment etc. Il vaut la peine de passer un peu de temps à s’habituer à la façon dont cela fonctionne. (Si vous vous posez la question, JSON n’est qu’un moyen de formater les informations afin qu’un ordinateur puisse les lire.)
Lorsque vous êtes satisfait du style affiché dans l’aperçu de l’assistant JSON, cliquez sur le bouton Afficher JSON bouton et copiez le code.
Retournez à votre document html, ajoutez une variable juste après la balise JavaScript d'ouverture pour conserver ces informations, puis collez le code..
// Tout d'abord, nous lisons dans les données décrivant le style. var style_festival = ["featureType": "administratif", "stylers": ["visibilité": "off"], "featureType": "poi", "stylers": ["visibilité": " "], " featureType ":" transit "," stylers ": [" visibilité ":" off "], " featureType ":" route "," stylers ": [" visibilité " : "off"], "featureType": "paysage", "stylers": ["color": "# FFE200"], "featureType": "eau", "stylers": [ "visibilité": "sur", "couleur": "# 4f92c6"]];
Vous devez obtenir votre carte pour traiter les informations que vous venez d'ajouter comme un style de carte. Utilisation StyledMapType pour faire ça.
// Ensuite, nous utilisons ces données pour créer les styles. var styled_festival = new google.maps.StyledMapType (style_festival, name: "Style de festival");
Enfin, vous devez attribuer votre nouveau style à votre carte pour "activer" le style..
festivalMap.mapTypes.set ('map_styles_festival', styled_festival); festivalMap.setMapTypeId ('map_styles_festival'); Veuillez utiliser le lien au début de ce didacticiel pour télécharger une copie du code de la carte ou consulter la démonstration en direct de cette partie du didacticiel. J'ai en fait ajouté deux styles. L'un est activé immédiatement et l'autre le sera lorsque la carte est zoomée pour donner un niveau de détail supérieur. (Ceci est expliqué plus en détail ci-dessous.)
Je ne pouvais pas non plus résister à l’ajout d’un arrière-plan à ce stade :) corps sélecteur css pour voir comment j'ai fait cela.
Bon, il est maintenant temps de faire quelque chose de la carte! Vous pouvez utiliser la superposition de la fenêtre d’information intégrée, mais elles ne semblent pas fantastique et ils ne peuvent pas facilement être personnalisés. Donc, au lieu de cela, nous allons utiliser la bibliothèque Infobox.
Téléchargez une copie de la bibliothèque Infobox. Décompressez-le et stockez-le dans un dossier proche de votre carte. Ajoutez ensuite cette ligne vers le haut de votre fichier html.
Ajoutez des index z pour chaque marqueur de carte afin que ceux qui se trouvent le plus près du bas de l'écran apparaissent au-dessus de ceux qui se trouvent en haut. (c.-à-d. que plus un marqueur est proche du bas de l'écran, plus son indice z doit être élevé.) Tout sera révélé plus tard pour expliquer pourquoi vous le faites! Par exemple -
// Création du marqueur de carte Glastonbury. markerGlastonbury = new google.maps.Marker (// utilise la position définie ci-dessus. position: markerPositionGlastonbury, // ajoute le marqueur à la carte. map: festivalMap, titre: 'Glastonbury Festival', // attribue l'image définie ci-dessus. icon: markerIconGlastonbury, // assigne la forme de l'icône définie ci-dessus au marqueur. shape: markerShapeGlastonbury, // définit l'index z du marqueur de carte. zIndex: 107);
Ajoutez le code suivant après chaque marqueur de carte. Veuillez lire les commentaires dans le code pour voir ce qu'il fait..
// Crée les informations à afficher dans la boîte d'informations contextuelle. var boxTextGlastonbury = document.createElement ("div"); boxTextGlastonbury.style.cssText = pop_up_info; boxTextGlastonbury.innerHTML = '
'; // Configure les options de configuration de la boîte d'information contextuelle. var infoboxOptionsGlastonbury = contenu: boxTextGlastonbury, disableAutoPan: false, maxWidth: 0, pixelOffset: nouveau google.maps.Size (-241, 0), zIndex: null, boxStyle: arrière-plan: "url ('infobox / pop_up_box_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top_top.png' ) no-repeat ", opacité: 1, largeur:" 430px ", closeBoxMargin:" 10px 2px 2px 2px ", closeBoxURL:" icons / button_close.png ", infoBoxClearance: nouveau google.maps.Size (1, 1), isHidden: false, volet: "floatPane", enableEventPropagation: false; // Crée la infobox contextuelle de Glastonbury, en ajoutant les options de configuration définies ci-dessus. infoboxGlastonbury = nouvel InfoBox (infoboxOptionsGlastonbury); // Ajouter un "écouteur d'événement" au marqueur de carte de Glastonbury pour écouter quand il est cliqué. google.maps.event.addListener (markerGlastonbury, "clic", fonction (e) // Ouvre la boîte d’informations Glastonbury. infoboxGlastonbury.open (festivalMap, this); // modifie la propriété z-index du marqueur pour créer le this.setZIndex (google.maps.Marker.MAX_ZINDEX + 1); / / Zoom sur la carte. setZoomWhenMarkerClicked (); // Définit le marqueur de Glastonbury comme centre de la carte. festivalMap.setCenter (marqueurGlastonbury.getPosition ());); Dans le code ci-dessus, vous avez appelé la fonction setZoomWhenMarkerClicked. Cela permettra d'agrandir la carte lorsqu'une personne clique sur un marqueur. Mais il ne se passera pas beaucoup de choses avant d'avoir créé cette fonction! C'est la fonction que vous devez créer -
fonction setZoomWhenMarkerClicked () var currentZoom = festivalMap.getZoom (); si (currentZoom < 7) festivalMap.setZoom(7);
Lorsque la carte est agrandie, il est probable que vous souhaitiez afficher plus de détails sur votre carte. Ceci est fait en ajoutant un écouteur d'événement et en utilisant le getZoom méthode pour vérifier en permanence si le zoom a été modifié. S'il a été augmenté (au-dessus du niveau 6), le setMapTypeId méthode est utilisée pour définir le second style (plus détaillé) défini ci-dessus.
// Ecoute en permanence lorsque le niveau de zoom change. Ceci inclut le zoom de la carte lorsqu'un clic est effectué sur un marqueur. google.maps.event.addListener (festivalMap, "zoom_changed", function () var newZoom = festivalMap.getZoom (); // si la carte est agrandie, le passage au style qui montre le niveau de détail le plus élevé. (newZoom> 6) festivalMap.setMapTypeId ('map_styles_festival_zoomed'); // Sinon, la carte doit être agrandie, utilisez donc le style avec le niveau de détail le plus bas. else festivalMap.setMapTypeId ('map_styles_festival'); ) Style de votre infobox en utilisant le css pour le rendre joli.
// Variable contenant le style de la infobox contextuelle. var pop_up_info = "border: 0px noir uni; background-color: #ffffff; remplissage: 15px; margin-top: 8px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px ; box-shadow: 1px 1px # 888; ";
Lorsqu'une infobox a été ouverte, le marqueur de carte est amené au premier plan. Toutefois, si vous fermez l’infobox, puis que vous faites un zoom sur la carte pour revenir à sa position initiale, le marqueur reste devant. Cela peut paraître bizarre.
À l'étape 1, vous définissez l'index z pour chaque marqueur. Vous pouvez l'utiliser maintenant pour résoudre ce problème. Vous devez créer une fonction (c.-à-d.. réinitialiser les index) qui réinitialise les z-index à leurs valeurs d'origine, puis ajoute un appel à cette fonction (i.e. resetZindexes ();) sur infobox.js pour déclencher la fonction à exécuter lorsque la fenêtre infobox est fermée.
Cliquez sur le lien en haut de cette page pour obtenir une copie du code du site à ce jour ou consultez la version en direct de son apparence actuelle. J'ai seulement ajouté la fenêtre contextuelle pour Glastonbury. N'hésitez pas à ajouter les autres vous-même!
Nous sommes presque là pour personnaliser l'apparence de la carte, mais avant de l'appeler journée, nous devrions ajouter quelques contrôles de navigation..
Google maps comporte 12 zones dans lesquelles vous pouvez ajouter des contrôles de carte, des bannières, etc. Vous pouvez entièrement personnaliser ces zones, en ajoutant le code HTML souhaité, etc..
Nous allons ajouter une bannière personnalisée et une navigation sur le côté droit de la carte..
Pour commencer, commencez par définir une fonction pour créer le menu. Cet extrait de code est plutôt long…
// Fonction qui crée la zone du panneau de contrôle, c'est-à-dire. le titre de la carte et les 2 boutons juste en dessous. function createControlPanel (controlPanelDiv) controlPanelDiv.style.padding = '0px'; controlUI = document.createElement ('div'); controlUI.style.border = '0px blanc uni'; controlUI.style.margin = '10px'; controlUI.style.paddingTop = '11px'; controlUI.style.paddingBottom = '5px'; controlUI.style.paddingLeft = '0px'; controlUI.style.paddingRight = '0px'; controlUI.style.width = '245px'; controlUI.style.height = '419px'; controlPanelDiv.appendChild (controlUI); // Titre de la carte titleBar = document.createElement ('div'); titleBar.style.backgroundColor = '# 89CBED'; titleBar.style.height = '255px'; titleBar.style.width = '245px'; titleBar.style.marginTop = '0px'; titleBar.style.marginBottom = '0px'; titleBar.style.marginLeft = '0px'; titleBar.style.marginRight = '0px'; titleBar.style.paddingTop = '6px'; titleBar.style.paddingBottom = '2px'; titleBar.style.paddingLeft = '0px'; titleBar.style.paddingRight = '0px'; titleBar.style.borderTopLeftRadius = '5px'; titleBar.style.borderTopRightRadius = '5px'; titleBar.style.borderBottomLeftRadius = '0px'; titleBar.style.borderBottomLeftRadius = '0px'; titleBar.style.cssFloat = 'left'; titleBar.innerHTML = '
'; controlUI.appendChild (titleBar); yellowStripe = document.createElement ('div'); yellowStripe.style.backgroundColor = '# # FFFF00'; yellowStripe.style.height = '2px'; yellowStripe.style.width = '245px'; yellowStripe.style.marginTop = '3px'; yellowStripe.style.marginBottom = '3px'; yellowStripe.style.marginLeft = '0px'; yellowStripe.style.marginRight = '0px'; yellowStripe.style.paddingTop = '0px'; yellowStripe.style.paddingBottom = '0px'; yellowStripe.style.paddingLeft = '0px'; yellowStripe.style.paddingRight = '0px'; yellowStripe.style.cssFloat = 'left'; yellowStripe.style.fontFamily = 'Georgia, empattement'; yellowStripe.style.fontSize = '14px'; controlUI.appendChild (yellowStripe); // Bouton d'événements 'plus petits'. smallEvents = document.createElement ('div'); smallEvents.style.height = '108px'; smallEvents.style.width = '129px'; smallEvents.style.marginTop = '0px'; smallEvents.style.marginBottom = '0px'; smallEvents.style.marginLeft = '0px'; smallEvents.style.marginRight = '0px'; smallEvents.style.paddingTop = '0px'; smallEvents.style.paddingBottom = '2px'; smallEvents.style.paddingLeft = '0px'; smallEvents.style.paddingRight = '0px'; smallEvents.style.cssFloat = 'left'; smallEvents.innerHTML = '
'; controlUI.appendChild (smallEvents); // Bouton Umbrella brolly = document.createElement ('div'); brolly.style.height = '149px'; brolly.style.width = '94px'; brolly.style.marginTop = '0px'; brolly.style.marginBottom = '0px'; brolly.style.marginLeft = '0px'; brolly.style.marginRight = '0px'; brolly.style.paddingTop = '0px'; brolly.style.paddingBottom = '2px'; brolly.style.paddingLeft = '0px'; brolly.style.paddingRight = '0px'; brolly.style.cssFloat = 'left'; brolly.innerHTML = '
'; controlUI.appendChild (brolly); Remarque rapide sur les styles: le code ci-dessus utilise le style propriété d'un élément pour définir ses styles à l'aide de JavaScript. Pour convertir les propriétés CSS en notation JavaScript, il vous suffit de vous rappeler que les propriétés qui n'ont pas de trait d'union restent les mêmes, tandis que celles avec un trait d'union sont converties en camelCase, par exemple. background-image devient backgroundImage. L'exception est flotte, qui devient cssFloat.
Créez ensuite un div pour contenir le menu, puis ajoutez le menu à ce div en appelant la fonction que vous venez de créer à l'étape 1..
// Créer un panneau de contrôle (titre du site et 2 boutons) qui apparaît sur le côté droit. var controlPanelDiv = document.createElement ('div'); var festivalMapControlPanel = new createControlPanel (controlPanelDiv, festivalMap); Puis réglez le les contrôles propriété de votre carte pour ajouter le menu à l'emplacement approprié, dans ce cas EN HAUT A DROITE.
// Ajoute le panneau de contrôle et le bouton de réinitialisation (créé précédemment) à la carte. festivalMap.controls [google.maps.ControlPosition.RIGHT_TOP] .push (controlPanelDiv);
Vous devriez maintenant avoir quelque chose qui ressemble à un menu personnalisé et qui apparaît sur le côté droit de votre carte. Donc, tout ce qui reste à faire est d'obtenir votre menu pour faire quelque chose…
Au cours des prochains tutoriels, nous aurons le bouton Événements plus petits pour révéler les photos de Flickr, et le bouton Parapluie pour afficher une superposition de carte de précipitations esquissée. (Un cliché que je connais, mais nous avons beaucoup de pluie ici pendant les mois d'été!)
Donc, pour que quelque chose fonctionne dans ce tutoriel, j'ai répété les étapes ci-dessus pour également ajouter un bouton Réinitialiser à la RIGHT_BOTTOM surface. Cela inclut le code enveloppant le bouton Réinitialiser pour appeler le handelRequests une fonction.
// Fonction qui crée le bouton 'Reser map'. function createResetButton (resetButtonDiv) resetButtonDiv.style.padding = '0px'; controlUI2 = document.createElement ('div'); controlUI2.style.backgroundColor = '#ffffff'; controlUI2.style.borderRadius = '5px'; controlUI2.style.margin = '10px'; controlUI2.style.paddingTop = '2px'; controlUI2.style.paddingBottom = '2px'; controlUI2.style.paddingLeft = '2px'; controlUI2.style.paddingRight = '5px'; controlUI2.style.textAlign = 'center'; controlUI2.style.width = '148px'; controlUI2.style.height = '31px'; controlUI2.innerHTML = '
'; resetButtonDiv.appendChild (controlUI2); le handelRequests la fonction fait quelques choses - jetez un coup d'oeil aux commentaires dans le code.
// Fonction appelée lorsque l'utilisateur clique sur les boutons "Événements plus petits", "Unbrella" ou "Réinitialiser la carte". function handelRequests (buttonPressed) if (buttonPressed === "reset") // Réinitialise le zoom, la position de la carte et les index z des marqueurs sur leur position initiale. Ferme également toutes les infoboxes actuellement ouvertes. festivalMap.setZoom (festivalMapZoom); festivalMap.setCenter (festivalMapCenter); resetZindexes (); // C'est une fonction que j'ai créée qui ferme toutes les boîtes d'informations ouvertes. closeAllInfoboxes (); else if (buttonPressed === "small_events") alert ("Ce bouton sera utile dans un prochain tutoriel!"); else if (buttonPressed === "pluies") alert ("Ce bouton fera quelque chose d’utile dans un prochain tutoriel!"); Vous pouvez obtenir une copie complète du fichier html de cette partie du didacticiel à partir du haut de cette page ou consulter l’exemple en direct. Seul le marqueur de carte de Glastonbury est 'actif dans cet exemple.
Voilà pour ce tutoriel! J'espère que vous avez maintenant quelque chose qui fonctionne qui ressemble vaguement à l'image en haut de cette page. Si quelque chose ne va pas, parcourez les fichiers téléchargeables disponibles sur GitHub. J'ai inclus le code dans des fichiers séparés pour chaque partie de ce didacticiel, vous devriez donc pouvoir déterminer où tout s'est mal passé..
Le prochain tutoriel examinera comment utiliser l'API Google Maps pour donner vie à vos propres cartes (par exemple, une carte manuscrite ou historique), ce qui les rend zoomables et interactives..
Les photographies utilisées dans ce tutoriel ont toutes été publiées sous la licence Creative Commons..
