Share
Ce que vous allez créerDans ce didacticiel, nous expliquerons le processus de création d'une carte Google personnalisée pour un client imaginaire. Notre carte comprendra trois caractéristiques principales:
Dans ce cas, notre client imaginaire sera "The Hobby Shoppe", fournisseur de jeux de société de qualité et d'autres accessoires de loisir autour de la ville de Melbourne, en Australie..
Nous allons lancer le processus en créant une carte de base centrée sur la ville de Melbourne. Après avoir ajouté nos repères de branche, nous affinerons la position centrale de la carte, mais pour le moment nous commencerons par trouver la bonne latitude et la bonne longitude pour afficher la ville dans son ensemble..
Pour ce faire, accédez à Google Maps et recherchez Melbourne, zoomez ensuite un peu afin de ne pas inclure les zones non peuplées. Lorsque vous ajustez la position de la carte, vous remarquerez que les changements d’URL reflètent votre nouvelle latitude, votre longitude et votre niveau de zoom. Lorsque la carte est positionnée où vous le souhaitez, copiez l’URL quelque part pour référence ultérieure, par exemple:
https://www.google.com/maps/place/Melbourne+VIC/@-37.804627…
Après le @ symbole dans l'URL, vous verrez des valeurs séparées par des virgules pour la latitude, la longitude et le niveau de zoom: -37.8046274,144.972156,12z
La première valeur -37.8046274 est la latitude, la deuxième valeur 144.972156 est la longitude, et le 12z valeur signifie que le niveau de zoom est réglé sur 12. Nous allons maintenant brancher ces valeurs dans une carte de base.
Créez un document HTML vierge et ajoutez le code suivant:
Avec ce balisage, nous avons créé un document HTML comprenant un div avec l'identifiant carte-toile qui tiendra notre carte. Nous avons également ajouté des CSS de base pour dimensionner et positionner le carte-toile div.
Enfin, nous avons chargé le script requis à partir de l'API Google Map avec:
et nous avons créé une fonction JavaScript pour définir les options de base de la carte et la charger dans notre div vide.
Remarque: voyez comment les valeurs que nous avons extraites de l'URL de Google Maps ont été utilisées dans centerPos et le niveau de zoom variables, qui sont à leur tour utilisées dans la mapOptions tableau. le centerPos variable utilise les valeurs de latitude et de longitude séparées par des virgules de -37.8046274,144.972156, et le le niveau de zoom variable utilise la valeur de 12.
Enregistrez votre fichier HTML et ouvrez-le dans n’importe quel navigateur. Votre carte de base devrait ressembler un peu à ceci:
L'étape suivante consiste à trouver la latitude et la longitude de chaque succursale du client afin de pouvoir créer des repères à ces emplacements. Pour ce faire, le moyen le plus simple consiste à rechercher chaque adresse de succursale via une recherche Google Maps, puis à saisir la latitude et la longitude à partir de là..
Retournez à nouveau dans Google Maps et lancez une recherche pour chaque succursale. En supposant que le client vous ait donné les adresses de chaque emplacement, vous pouvez simplement rechercher cette adresse et un marqueur apparaîtra sur la carte. Faites un clic droit sur ce marqueur et choisissez Qu'est ce qu'il y a ici? du menu contextuel.
Une petite fenêtre apparaîtra en haut à gauche de la carte, affichant les détails de cette balise, y compris la latitude et la longitude:
Notez la latitude et la longitude de chacune des succursales que vous souhaitez ajouter à votre carte. Dans le cas de "The Hobby Shoppe", nous avons sept succursales et nous ajouterons des marqueurs pour chacune d’elles en insérant le code suivant juste avant la fin de la carte. initialiser() fonction, après la map = new google.maps.Map… ligne:
var locations = [['First Shoppe', -37.808204, 144.855579], ['Second Shoppe', -37.675648, 145.026125], ['Troisième Shoppe', -37.816935, 144.966877], ['Fourth Shoppe', 37.818714, 145.0364.44 ], ["Fifth Shoppe", -37,793834, 144,987018], ["Sixième Shoppe", -37,737116, 144.998581], ["Seventh Shoppe", -37,765528, 144,922624]]; pour (i = 0; i < locations.length; i++) marker = new google.maps.Marker( position: new google.maps.LatLng(locations[i][1], locations[i][2]), title: locations[i][0], map: map );
Dans ce code, nous créons d’abord un tableau de succursales avec le nom, la latitude et la longitude de chacun. Nous parcourons ensuite ce tableau pour ajouter chaque emplacement en tant que marqueur à la carte, le titre devant être affiché en tant qu’info-bulle si le marqueur est survolé..
Votre carte devrait maintenant avoir des marqueurs ajoutés comme ceci:
Mais attendez, il y a quelque chose qui ne va pas avec cette image. Nous avons ajouté sept emplacements, mais seuls six marqueurs apparaissent. Pourquoi?
C’est tout simplement parce que notre septième marqueur n’est pas visible vu la latitude et la longitude initiales que nous avons définies pour la carte; nous devons donc préciser cette position centrale..
Maintenant que tous nos marqueurs sont en place, nous pouvons affiner la position de départ de la carte pour s’assurer qu’ils sont tous visibles au chargement. Pour ce faire, nous ajouterons un bouton sur lequel nous pourrons cliquer afin de nous donner de nouvelles coordonnées une fois que nous aurons trouvé la position de départ idéale pour la carte..
Ajoutez ce code de bouton à votre page, n’importe où dans le corps section:
Maintenant, vous pouvez déplacer votre carte, puis cliquez sur le nouveau Obtenir les coordonnées de la carte bouton quand vous trouvez le bon endroit.
La latitude, la longitude et le niveau de zoom de votre position seront écrits sur votre console. Assurez-vous donc que la console Chrome Dev Tools ou Firebug est ouverte..
Mettez à jour votre carte centre option avec les nouvelles latitude et longitude, ainsi que la Zoom option si cela a aussi changé:
var mapOptions = center: new google.maps.LatLng (-37.74723337588968,144.961341333252), zoom: 12;
Enregistrez et actualisez votre carte. Les sept marqueurs de carte doivent maintenant être visibles. Lorsque vous êtes satisfait de la position centrale raffinée, vous pouvez supprimer le Obtenir les coordonnées de la carte code du bouton.
Maintenant que tous les marqueurs sont en place et visibles pour les succursales, nous allons les convertir en une image personnalisée, qui correspond à la marque du client et au style de la carte. Toute image créée pour être utilisée comme marqueur de carte doit avoir un arrière-plan transparent, par exemple.
Placez votre marqueur personnalisé dans un dossier "images", par rapport au dossier dans lequel se trouve votre carte de base, puis ajoutez la variable suivante directement sous le symbole. Emplacements variable créée précédemment:
var image = 'images / shoppe_icon.png';
Ajoutez ensuite une option supplémentaire de icône: image au pour boucle que nous avons créée précédemment pour placer des marqueurs de carte. En passant cette variable dans les options de génération de marqueur de carte, vous indiquez que vous souhaitez que les icônes de marqueur soient remplacées par votre image personnalisée:
pour (i = 0; i < locations.length; i++) marker = new google.maps.Marker( position: new google.maps.LatLng(locations[i][1], locations[i][2]), title: locations[i][0], map: map, icon: image );
Examinez à nouveau votre carte et vous devriez maintenant voir des petites maisons dans chacune des sept succursales:
Nous allons maintenant ajouter le logo du client de manière à ce qu'il reste à la même taille et à la même position, quel que soit le point où la carte est zoomée ou tournée vers.
Les seuls éléments d'une carte Google qui ne bougent pas avec les panoramiques et les zooms sont les éléments de l'interface utilisateur de contrôle, généralement utilisés pour engager des vues de la rue ou changer de type de carte. Cependant, nous pouvons également utiliser l'API de contrôle personnalisé pour placer un logo à l'écran. Nous aurons également notre nouveau contrôle personnalisé réinitialiser le zoom et la position centrale de la carte lorsque vous cliquez dessus, ainsi que l'affichage du logo, il effectue une fonction utile de l'interface utilisateur.
Commencez par ajouter l'image du logo de votre client dans le même dossier "images" que celui où vous avez placé votre image de marqueur personnalisée. Ajoutez ensuite la fonction JavaScript suivante juste avant votre initialiser() une fonction:
Accentsconagua
fonction LogoControl (controlDiv, map) controlDiv.style.padding = '5px'; var controlUI = document.createElement ('div'); controlUI.style.backgroundImage = 'url (images / logo.png)'; controlUI.style.width = '600px'; controlUI.style.height = '116px'; controlUI.style.cursor = 'pointeur'; controlUI.title = 'Cliquez pour définir la carte sur Accueil'; controlDiv.appendChild (controlUI); google.maps.event.addDomListener (controlUI, 'click', function () map.setCenter (centerPos) map.setZoom (zoomLevel)); Lorsqu'elle est exécutée, cette fonction crée un élément d'interface utilisateur de contrôle de 600 x 116 pixels, en utilisant l'image du logo comme arrière-plan. Il créera également un écouteur qui réinitialisera le centre et le zoom de la carte si le logo est cliqué..
Puis, à la fin de votre initialiser() fonction, insérez le code suivant:
var logoControlDiv = document.createElement ('div'); var logoControl = new LogoControl (logoControlDiv, map); logoControlDiv.index = 1; map.controls [google.maps.ControlPosition.TOP_CENTER] .push (logoControlDiv);Quand le initialiser() la fonction s'exécute, elle appellera maintenant le LogoControl () fonction que nous venons de créer et d'ajouter sa sortie dans les contrôles de la carte.
Votre carte devrait maintenant ressembler à ceci:
Pour configurer les couleurs de votre carte, vous souhaiterez certainement utiliser l'Assistant Cartes stylisées de Google afin d'obtenir un retour visuel rapide de vos choix..
le Type d'entité Le menu de l’assistant vous donne une gamme de composants de carte disponibles pour le style. Ils sont organisés du plus général au plus spécifique. Au niveau le plus général, vous pouvez appliquer des choix de couleurs au Tout type d’entité, afin d’affecter tous les éléments de la carte de manière égale. À l’autre bout du spectre, vous pouvez explorer de manière aussi précise que Tous> Transit> Gare> Bus par exemple.
Avec un Type d'entité sélectionné, vous pouvez également effectuer une sélection à partir du Type d'élément menu pour déterminer si vous souhaitez que vos choix de couleurs influencent la géométrie de l’entité ou ses étiquettes (telles que les petites étiquettes de texte que vous voyez flottant autour de la carte). De plus, vous pouvez également sélectionner la couleur de remplissage ou de trait pour modifier.
En ce qui concerne le choix des couleurs, vous souhaitez travailler avec deux domaines principaux: la Couleur panneau et le Teinte panneau. le Couleur Ce panneau appliquera un hexcode de couleur de manière plate aux caractéristiques et aux éléments que vous avez sélectionnés, alors que le Teinte le panneau teintera votre sélection avec une gamme de luminosité et d'obscurité influencée par la couleur d'origine de chaque élément.
En règle générale, vous devriez commencer par appliquer un Teinte aux niveaux les plus généraux de votre carte afin que vous obteniez une certaine uniformité dans votre jeu de couleurs - vous pouvez comparer cela à une couche de peinture de base. De là, vous pouvez ensuite forer pour "peindre" sur le dessus avec plat Couleur paramètres pour des caractéristiques et des éléments plus spécifiques.
Commencez par rechercher "Melbourne" dans l'assistant, puis positionnez la carte d'aperçu pour vous montrer à peu près la même zone que celle que vous avez définie..
Sous le Type d'entité menu dans l'assistant sélectionnez Tout, et sous la Type d'élément sélection du menu Géométrie. Puis vérifiez la Teinte boîte et cliquez sur la barre de couleur jusqu'à ce que vous obteniez une valeur quelque part autour de # ffa200. Pour une raison quelconque, vous ne pouvez pas entrer directement une valeur dans ce champ, vous devez donc la rapprocher le plus possible en cliquant sur. Puis vérifiez la Inverser la légèreté case, activez le Saturation réglage et faites-le glisser vers 35, activer le Légèreté mettre et placer à 50, et activer le Gamma réglage et l'obtenir aussi près que possible de 1.3.
Ces paramètres auraient dû teinter toute la carte de la manière suivante:
Votre carte a un aspect un peu drôle à ce stade car nous souhaitons créer une carte colorée. Les paramètres de teinte ont donc été optimisés pour éviter les zones ternes. Les zones excessivement lumineuses seront remplacées par des couleurs plus atténuées lors des étapes suivantes..
Maintenant que votre premier style est appliqué, cliquez sur le bouton Ajouter bouton dans le coin en haut à droite de la Style de carte panneau (situé à droite de l’assistant de création de carte). En cliquant sur ce bouton, vous créez un deuxième style nommé "Style 1" sous lequel vous pouvez sélectionner différents éléments et appliquer de nouveaux styles..
Avec "Style 1" sélectionné dans le Style de carte panneau et Tout toujours sélectionné sous Type d'entité clique le Étiquettes option dans la deuxième liste des Type d'élément menu. Vérifier la Teinte boîte et encore mis à une valeur de # ffa200 Ainsi, vos étiquettes sont toutes teintées au lieu d'être bleu vif ou vert, comme vous le voyez dans l'image ci-dessus..
Clique le Ajouter bouton sur le Style de carte panneau pour créer un autre nouveau style, puis cliquez sur Eau dans la deuxième liste des Type d'entité menu. Sous le Type d'élément sélection du menu Géométrie. Vérifier la Couleur case et entrez un code couleur hexadécimal de # 8F9B98.
Vous devez maintenant savoir comment créer de nouveaux styles en sélectionnant Type d'entité et Type d'élément éléments de menu. Continuez et ajoutez le reste de ces styles un par un dans l'assistant de création de carte:
Une fois que vous avez ajouté tous ces styles, vous êtes prêt à exporter les paramètres créés par l'assistant et à les ajouter à votre carte. Sur le Style de carte panneau cliquez sur le Afficher JSON bouton en bas. Vous verrez une fenêtre blanche apparaître, affichant un tableau d'options JavaScript.
Copier tout le texte de cette fenêtre entre l'ouverture [ et fermeture ], c'est-à-dire tout sauf l'en-tête principal.
Au début de votre initialiser() function ajoute cette nouvelle ligne:
var styles =;
Placez votre curseur avant le ; puis collez le code que vous avez copié à partir de l'assistant de création de carte. Vous devriez vous retrouver avec:
var styles = ["elementType": "geometry", "stylers": ["hue": "# ffa200", "invert_lightness": true, "lightness": 50, "saturation": 35, "gamma": 1.31], "elementType": "labels", "stylers": ["hue": "# ffa200"], "featureType": "eau", " elementType ":" geometry "," stylers ": [" color ":" # 8F9B98 "], " elementType ":" labels.text.fill "," stylers ": [" color ":" # f8ead0 "], " elementType ":" labels.text.stroke "," stylers ": [" color ":" # 6a5035 "], " featureType ":" landscape.natural "," elementType ":" geometry "," stylers ": [" color ":" # 9c9743 "] ," featureType ":" landscape.man_made "," elementType ":" geometry "," stylers ": [" color ":" # 9f8053 "], " featureType ":" poi "," elementType ":" geometry "," stylers ": [" color ":" # ACA74C "], " featureType " : "road", "elementType": "geometry.fill", "stylers": ["color": "# d3b681"], "featureType": "road", "elementType": "geometry.stroke "," stylers ": [" color ":" # 644F34 "], " featureType ":" road.arterial "," elementType ":" geometry.fill "," stylers ": [" color ":" # c6a15e "], " featureType ":" road.local "," elementType " : "geometry.fill", "stylers": ["color": "# b09061"], "featureType": "transit.line", "elementType": "géométrie", "stylers": [ "color": "# 876b48"], "featureType": "transit.station", "elementType": "géométrie", "stylers": ["color": "# a58557"]];
Puis tout à la fin de la initialiser() fonction ajouter ces trois lignes:
var styledMap = new google.maps.StyledMapType (styles, name: "Styled Map"); map.mapTypes.set ('map_style', styledMap); map.setMapTypeId ('map_style');Ces lignes de code appliquent à votre carte toutes les données de jeu de couleurs que vous venez d'extraire de l'assistant de carte stylisée. Jetez un autre regard et il devrait maintenant apparaître avec toutes vos sélections de style en place:
Découvrez la démonstration en direct afin de voir la carte à sa taille appropriée et de jouer avec le zoom et le panoramique ici..
Pour terminer, vous souhaiterez peut-être également ajouter un effet de cadre autour de votre carte pour compléter le style. Remplacer l'existant # carte-toile … CSS dans votre fichier avec ceci:
# carte-toile hauteur: 90%; bordure: solide 5px # 33210f; -moz-box-shadow: 0 3px 3px 3px rgba (0,0,0,0,9), 0 0 0 3px # 000; -webkit-box-shadow: 0 3px 3px 3px rgba (0,0,0,0,9), 0 0 0 3px # 000; box-shadow: 0 3px 3px 3px rgba (0,0,0,0,9), 0 0 0 3px # 000;
Comme vous pouvez le constater, vous pouvez faire beaucoup de choses avec Google Maps au-delà de l'intégration de base. Dans ce didacticiel, nous n’avons encore abordé que quelques aspects de l’API de Google Maps. Pour en savoir plus sur toutes les autres fonctions offertes par l’API, consultez la documentation de Google Map..
Si vous souhaitez aller encore plus loin dans ce didacticiel, vous pouvez également essayer d'ajouter vos propres contrôles de zoom et de panoramique (documents de contrôle personnalisés) et de créer des fenêtres d'informations qui apparaissent lorsque vous cliquez sur les marqueurs. Ces fenêtres contextuelles pourraient contenir des informations telles que le numéro de téléphone et l'adresse municipale (info windows docs).
Essayez ces techniques la prochaine fois qu'un client vous demande d'inclure une carte Google Map sur son site. Vous pourriez juste obtenir un bonus!
