Share
Dans ce didacticiel, nous allons créer un petit widget permettant aux utilisateurs de récupérer des instructions détaillées jusqu'à un emplacement spécifié. Nous utiliserons l'API Google Maps, via JavaScript, pour fournir cette fonctionnalité plutôt avancée..
Le seul inconvénient de l'utilisation de Google Maps est que nous devons demander une clé API, mais il s'agit d'un processus relativement simple si vous possédez déjà un compte Google / GMail. Malheureusement, en raison des exigences de Google, nous devons développer le domaine que nous fournissons à Google, c’est-à-dire que nous ne pouvons pas développer sur un serveur local. Heureusement pour nous, le processus sera rapide et nous ne passerons pas beaucoup de temps sur le serveur en direct. Assurez-vous également de stocker votre clé API dans un endroit sûr, car je ne pouvais pas trouver un moyen de les récupérer une fois générés, bien que je suppose que vous puissiez simplement en recréer une..
Avant de plonger dans le code, laissez-moi discuter de la raison de cette idée. Comme la plupart des développeurs, je passe beaucoup de temps sur le Web. Un sous-ensemble de sites Web que je visite sont les entreprises locales qui n’ont certainement pas beaucoup de ressources à consacrer à la conception Web, mais espérons que les développeurs de ces sites verront des articles comme celui-ci et réaliseront à quel point il est facile d’inclure des fonctionnalités complètes. carte dans une page Web. Presque tous les sites Web représentant une petite entreprise ont une page dédiée à indiquer aux utilisateurs comment localiser leur emplacement physique. Souvent, vous obtenez une carte avec leur emplacement épinglé dessus, ce qui n'aide pas les utilisateurs qui ne connaissent pas la région. Dans ce didacticiel, nous allons changer cela et laisser les utilisateurs entrer leur adresse et obtenir des instructions détaillées pour accéder à l'adresse de votre choix..
Maintenant que la tribune est hors d'usage, examinons le code. La première chose à faire est d’inclure la bibliothèque Javascript qui contient toutes les méthodes de Google Maps. Google a probablement généré ce code lors de la création de votre clé d'API, mais cela aurait pu pointer sur l'API de version 3, toujours en phase de test bêta. Voici le lien vers l'API version 2, assurez-vous d'insérer votre clé API. Nous allons également inclure un fichier, application.js qui contiendra nos fonctions personnalisées, j’ai stocké le mien dans un répertoire au niveau de la racine appelé js. Le code suivant va dans la section head de votre page.
Dans la section body de notre page, nous avons besoin de balises limitées. Je vais brièvement passer en revue les éléments requis, et vous pouvez consulter le code source pour voir les duvet que j'ai inclus dans ma démo. Le premier élément est un div vide avec un ID de map_canvas, il s'agit de l'espace réservé auquel nous pointons les appels Google Maps et il générera tout le balisage de la carte dans cet élément.
Ensuite, j'ai créé un div pour contenir l'adresse de l'organisation et le formulaire pour que l'utilisateur entre son adresse. Vous pouvez consulter ce code, mais il est assez simple et pas très difficile de discerner sa réunion. Assurez-vous de regarder mon CSS pour voir comment il est stylé dans ma démo.
Notre adresse
1450 Jayhawk Blvd # 223
Lawrence, KS
66045Votre adresse
Notez que nous nous soumettons cette page à elle-même afin de pouvoir traiter la page à l'aide de PHP si l'utilisateur a désactivé JS. Si JS est activé, nous voulons exécuter une fonction, overlayDirections () que nous examinerons un peu plus tard. La majeure partie de ce code va à la boîte de sélection qui permet à l'utilisateur de choisir son état. Je l'ai résumé pour ceux qui impriment cet article, mais vous pouvez récupérer le code complet à partir du téléchargement. Autres notes intéressantes est que nous définissons la Taille et longueur maximale du champ de code postal à 5. La dernière chose à noter est que nous avons attribué des identifiants et des noms à tous les éléments de formulaire..
Bon maintenant nous pouvons passer à la viande de ce tutoriel, le code JavaScript. Presque tous les appels que nous allons effectuer proviennent de l'API Google Maps que nous avons référencée précédemment. Google fournit une excellente documentation et des exemples de code sur son site Web, assurez-vous de vérifier. Je vais essayer de faire un lien vers les pages pertinentes que je les utilise.
La première chose est pendant que nous avons notre page HTML ouverte permet de booter la fonction d’initialisation en définissant en charge attribut. Remarque: cela pourrait être fait dans jQuery en utilisant le $ (document) .ready () une fonction.
Maintenant, nous allons passer à la js / appication.js fichier. La toute première chose à faire est de définir des variables. Certains évangélistes de code vont probablement me traquer pour avoir déclaré des variables globales, mais je crois que dans ce cas, ça devrait aller. Je vais vous donner le code puis expliquer comment nous allons utiliser chacun.
var gdir, fromAddress, toAddress;
La fonction initialize () que nous avons appelée précédemment servira à créer la carte sur la page et à placer un marqueur personnalisé de notre emplacement..
Accentsconagua
/ * ** * Fonction d'amorçage pour configurer la carte et appliquer * un marqueur de société personnalisé * / function initialize () if (GBrowserIsCompatible ()) // paramètres var companyMarkerImage = "./images/jayhawk.gif"; var companyLatLng = new GLatLng (38.957101, -95.251469); var companyMarkerSize = new GSize (55, 52); // width, height toAddress = "1450 Jayhawk Blvd # 223 Lawrence, KS 66045"; var defaultZoomLevel = 13; // paramètres de fin // éléments de configuration map = new GMap2 (document.getElementById ("map_canvas")); gdir = new GDirections (map, document.getElementById ("directions")); // gestionnaire d'erreur GEvent.addListener (gdir, "error", handleErrors); // set company mark var companyMarker = createMarker (companyLatLng, companyMarkerImage, companyMarkerSize); // set map center map.setCenter (companyLatLng, defaultZoomLevel); map.addOverlay (companyMarker); La première chose à faire est de vérifier si le navigateur est compatible avec Google Maps. Pour cela, Google fournit le GBrowserIsCompatible () dans son API. En substance, il retourne la valeur true si le navigateur est compatible et nous permet de passer au reste de notre fonction. J'ai décidé de résumer certaines valeurs en variables situées en haut de la fonction, afin de pouvoir les transférer facilement dans de nombreuses applications..
// paramètres var companyMarkerImage = "./images/jayhawk.gif"; var companyLatLng = new GLatLng (38.957101, -95.251469); var companyMarkerSize = new GSize (55, 52); // width, height toAddress = "1450 Jayhawk Blvd # 223 Lawrence, KS 66045"; var defaultZoomLevel = 13; // fin des paramètres
le companyMarkerImage est une chaîne de l'emplacement d'une petite image que nous placerons à notre emplacement sur la carte. Je pense que c'est une bonne idée d'avoir une icône personnalisée représentant votre entreprise, qui personnalisera l'affichage générique de Google Map. Suivant, sociétéLatLng contient un objet GLatLng correspondant à une latitude, un point de longitude dans le monde. Ne manquez pas d'acheter un GPS pour obtenir ces numéros, nous pouvons utiliser maps.google.com. Dans le champ de recherche, tapez votre adresse. Quand il trouvera l'emplacement, cliquez sur le bouton Lien bouton en haut à droite de la carte. Faites défiler la première zone de texte dans la fenêtre modale et recherchez & sll =… .
Vous pouvez copier et coller ces coordonnées dans les paramètres de notre constructeur GLatLng. C'est le point sur la carte où nous placerons notre image personnalisée. La variable suivante, companyMarkerSize, contient un objet GSize qui représente la largeur et la hauteur de votre image de marqueur personnalisée. Ensuite nous avons mis Adresser qui est l'adresse de l'entreprise. La variable finale, defaultZoomLevel, indique simplement à la carte ce que vous voulez que le niveau de zoom par défaut soit compris entre 1 et 18.
// éléments de configuration map = new GMap2 (document.getElementById ("map_canvas")); gdir = new GDirections (map, document.getElementById ("directions")); La ligne de code suivante crée un objet GMap2. Google décrit cela comme "la classe centrale de l'API". Cela charge les données de la carte et nous permet de manipuler ce qui est affiché dans la zone de carte. Il faut un argument pour qu'un objet DOM pointe sur l'élément contenant la carte, #map_canvas. Ensuite nous avons mis gdir pour contenir l'objet GDirections. C'est l'interface que nous utilisons pour interroger Google Maps sur les directions. Le constructeur prend deux arguments, un objet de la carte et un objet du DOM où nous voulons mettre les directions pas à pas. Je choisis de créer un div vide ci-dessous #adresses appelé #directions.
// gestionnaire d'erreur GEvent.addListener (gdir, "error", handleErrors);
Lors de l'utilisation de services Web, nous courons toujours le risque d'obtenir une erreur renvoyée. Nous pouvons rendre cela aussi simple que possible en utilisant la classe GEvent. Dans ce morceau de code, nous disons que si nous avons une erreur, les instructions pour exécuter une fonction de rappel personnalisée, poignéeErreurs dans notre cas. Nous appelons directement la fonction addListener () qui enregistre un rappel. Il faut 3 arguments pour un objet source, une chaîne faisant référence au type d'événement sur lequel vous voulez exécuter le rappel et un gestionnaire qui pointe vers une fonction que vous souhaitez exécuter. La fonction, poignéeErreurs, est quelque chose que nous examinerons plus tard.
// set company mark var companyMarker = createMarker (companyLatLng, companyMarkerImage, companyMarkerSize); // set map center map.setCenter (companyLatLng, defaultZoomLevel); map.addOverlay (companyMarker);
Les dernières lignes de initialiser() sont utilisés pour créer notre marqueur personnalisé, j'ai choisi un Jayhawk trouvé sur la page d'accueil de KU. createMarker est une fonction wrapper que j'ai écrite pour résumer le code nécessaire à la création d'un marqueur personnalisé. Il faut trois arguments: une référence à un objet GLatLng où nous voulons placer l'image sur le, une chaîne représentant le chemin d'accès à une image et une référence à un objet GSize qui représente la taille de l'image. Nous utilisons ensuite la méthode setCenter () de la classe GMap2 qui prend deux arguments: un objet GLatLng des coordonnées sur lequel se centrer et un entier pour le niveau de zoom. Notez que nous passons dans les variables que nous avons définies dans le bloc de paramètres en haut de la initialiser() une fonction. La dernière ligne de code utilise la méthode addOverlay (). C’est ce qui ajoute réellement l’image personnalisée à la carte.
le initialiser() La fonction fait beaucoup de travail lourd, mais elle peut certainement en être la cause. Après avoir écrit le createMarker () Ensuite, vous pourrez charger l’application et constater des progrès. Mais d'abord, récapitulons les initialiser() une fonction.
Nous allons ensuite créer une fonction wrapper qui simplifie la création d’un marqueur avec une image personnalisée. La raison pour laquelle j’ai choisi d’abstraire, c’est qu’il s’agit d’un processus complexe qui encombrerait notre initialiser() fonctionner encore plus. Un autre avantage supplémentaire est que nous pouvons ajouter plusieurs marqueurs très rapidement sans répéter beaucoup de code..
/ * ** * Fonction de wrapper pour créer / retourner un objet marqueur * avec une image personnalisée * / function createMarker (latlng, imageURL, imageSize) var marker = new GIcon (G_DEFAULT_ICON, imageURL); marker.iconSize = imageSize; retourne un nouveau GMarker (latlng, icon: marker);
Bien plus petit que notre première fonction, mais tout aussi important. D'abord nous déclarons une nouvelle variable, marqueur, et stocker un objet GIcon. Il peut prendre deux arguments copy qui est un objet GIcon dont il va copier les propriétés, et image qui est une chaîne représentant un chemin vers une image personnalisée. G_DEFAULT_ICON est une constante qui représente un marqueur par défaut, et l'imageURL provient du bloc de paramètres de initialiser(). Il suffit de définir une autre propriété, iconSize, de type GSize, qui représente la taille de notre image personnalisée et provient également du bloc de paramètres. La dernière ligne de code retourne un objet GMarker qui prend deux arguments plus tard, et icon. La première, latlng, est une référence à l’objet GLatLng que nous avons déclaré dans le bloc de paramètres. L'argument suivant concerne l'objet GIcon que nous venons de créer. C'est tout ce que nous devons faire pour que la partie carte de notre application fonctionne. Vous pouvez maintenant charger la page et constater à quel point il est facile d’obtenir une belle carte sur notre site Web..
C’est de loin la partie que je préfère de ce tutoriel, permettant aux utilisateurs de saisir une adresse et de recevoir une carte avec l’itinéraire en surbrillance et des instructions détaillées. Grâce à l'utilisation de cette API, nous pouvons condenser quelque chose nécessitant des milliers de lignes de code et une quantité incroyable de ressources de traitement en une poignée de code..
/ * ** * Recherche les itinéraires, superpose les itinéraires sur la carte * et imprime tour à tour les #directions. * / function overlayDirections () fromAddress = document.getElementById ("rue"). valeur + "" + document.getElementById ("ville"). valeur + "" + document.getElementById ("état"). options [document. getElementById ("state"). selectedIndex] .value + "" + document.getElementById ("zip"). value; gdir.load ("from:" + fromAddress + "to:" + toAddress); La première ligne que j’ai en fait s’étend sur cinq lignes pour plus de clarté. Essentiellement, cela saisit toutes les valeurs de la forme et place un espace entre chaque partie. Je pensais que c'était mieux que de demander à l'utilisateur de saisir l'adresse complète dans une seule zone de texte, car cela peut prêter à confusion.
La deuxième ligne utilise le gdir nous nous sommes installés initialiser(). Nous appelons la méthode load () et transmettons un seul argument de chaîne, qui correspond essentiellement à ce que nous transmettrions à maps.google.com via le champ de recherche. le de: et à: les mots clés permettent d'indiquer à Google quelle adresse doit être le point de départ et quelle doit être le point d'arrivée. C'est tout ce que nous devons faire pour les directions, oui j'ai été choqué aussi! Si vous visitez votre page à nouveau, vous pouvez voir cela en action.
Ensuite, nous allons déclarer le handleErrors () une fonction. J'ai saisi cela dans Google Sample Code sur leur site Web API. Je ne vais pas entrer dans les détails car c'est assez simple.
function handleErrors () if (gdir.getStatus (). code == G_GEO_UNKNOWN_ADDRESS) alert ("Aucun emplacement géographique correspondant n'a pu être trouvé pour l'une des adresses spécifiées. Cela peut être dû au fait que l'adresse est relativement nouvelle, ou il peut être incorrect. \ nCode d'erreur: "+ gdir.getStatus (). code); else if (gdir.getStatus (). code == G_GEO_SERVER_ERROR) alert ("Un géocodage ou une demande de direction n'a pas pu être traité avec succès, mais le motif exact de l'échec est inconnu. \ n Code d'erreur:" + gdir.getStatus ( ).code); else if (gdir.getStatus (). code == G_GEO_MISSING_QUERY) alert ("Le paramètre HTTP q était manquant ou n'avait aucune valeur. Pour les demandes de géocodeur, cela signifie qu'une adresse vide a été spécifiée en entrée. Pour les demandes de direction, cela signifie qu'aucune requête n'a été spécifiée dans l'entrée. \ n Code d'erreur: "+ gdir.getStatus (). code); else if (gdir.getStatus (). code == G_GEO_BAD_KEY) alert ("La clé donnée est non valide ou ne correspond pas au domaine pour lequel elle a été fournie. \ n Code d'erreur:" + gdir.getStatus (). code) ; else if (gdir.getStatus (). code == G_GEO_BAD_REQUEST) alert ("Une demande de directions n'a pas pu être analysée. \ n Code d'erreur:" + gdir.getStatus (). code); else alert ("Une erreur inconnue s'est produite."); Il a une longue instruction if… elseif… else qui vérifie la présence de nombreux types d'erreur et avertit l'utilisateur en cas d'occurrence. Vous pouvez le modifier si vous souhaitez rendre l'alerte moins technique..
En tant que bons développeurs Web, nous devons nous assurer que notre site Web fonctionne pour autant d'utilisateurs que possible, y compris ceux avec JavaScript désactivé. Dans cette situation, j'ai choisi de rediriger les personnes avec JS désactivé vers Google Maps avec la recherche effectuée afin qu'elles obtiennent toujours les indications. Ceci est fait en utilisant PHP pour évaluer le formulaire et rediriger vers Google Maps. En haut de votre page HTML, insérez ce code:
…
Nous avons d’abord un bloc de paramètres qui n’a qu’une variable à définir, $ TO. Ceci est similaire à ce que nous avons fait en JavaScript pour Adresser, mais nous avons aussi besoin de la même chaîne en PHP. Nous avons ensuite une instruction if à vérifier pour les données POSTed, ce qui signifie que notre formulaire a été soumis. Maintenant, nous prenons les valeurs de formulaire et les plaçons dans une chaîne avec des espaces et les stockons dans une variable, $ FROM. Ensuite, nous stockons la valeur de langue dans $ LOC, plus sur cela plus tard. le $ url variable tiendra la chaîne représentant l'URL de requête à Google. Notez que nous encodons nos valeurs dans l’URL afin qu’elles voyagent en toute sécurité sur la redirection. La dernière ligne de code utilise les en-têtes PHP pour rediriger l'utilisateur vers Google.
En tant qu'entreprise, vous souhaitez toucher le plus grand nombre de personnes possible et prendre en charge plusieurs langues. Dans Google Maps, la prise en charge d’autres langues ne nous coûte rien..
Commencez par ouvrir votre page HTML et insérez le code suivant entre vos balises de formulaire..
… …
Bien sûr, si vous souhaitez supprimer une langue, supprimez simplement la balise option correspondante, vous pouvez également modifier la valeur par défaut en déplaçant l'attribut sélectionné..
Déménager js / application.js, nous n'avons besoin que de deux changements. À partir du overlayDirections () fonction après la création de la chaîne de l'adresse ajoutez ceci pour récupérer la valeur sélectionnée dans la zone de sélection de la langue et l'enregistrer dans notre variable de langue.
… Var language = document.getElementById ("langue"). Options [document.getElementById ("langue"). SelectedIndex] .value;… Ensuite, ajoutez un argument à la gdir.load () fonction, cela prend un ensemble d'options. Dans notre cas, il suffit de déclarer lieu de sorte qu'il connaisse la langue et les unités appropriées pour les instructions pas à pas.
… Gdir.load ("from:" + fromAddress + "à:" + toAddress, "locale": langue);… Remarque: Nous avons déjà inclus cela dans la redirection PHP et si vous souhaitez le désactiver, il suffit de le définir de manière statique. $ LOC.
… $ LOC = 'en'…
C’est tout ce dont nous avons besoin pour cette fonctionnalité étonnante, et j’espère que vous en apprendrez un peu plus sur Google Maps. En tant que développeurs, je vous mets au défi de continuer à trouver des moyens intéressants d’intégrer des cartes dans vos applications. Chaque fois qu'un modèle est sensible à l'emplacement, vous devez vous demander si votre projet peut être utilisé pour la représentation visuelle sur une carte. Merci d'avoir lu; comme toujours, je suis ici pour aider dans les commentaires ou sur Twitter (@noahhendrix).
