Share
Comme Richard Tape a commencé à le montrer dans ses articles 1 et 2 sur Devenir une superstar ExpressionEngine, EE est un CMS flexible et facile à personnaliser. Maintenant que tout le monde comprend un peu le fonctionnement de l'EE, j'ai pensé saisir cette occasion pour montrer un exemple relativement réaliste de création d'une carte Google dynamique optimisée par EE.
Pour cet exemple, supposons que notre société a différents emplacements aux États-Unis et que nous sommes chargés de créer une carte Google Map indiquant tous les emplacements et facile à gérer. Regardez la démo pour voir ce que nous essayons d'accomplir.
Tout d’abord, rappelez-vous qu’un blog Web n’est rien d’autre qu'un conteneur de données. En fait, dans EE 2.0, ils changent le terme weblog en canal. Nous allons donc créer un blog appelé Emplacements et un groupe de champs personnalisé appelé Emplacements. Ce n’est certainement pas une exigence de leur donner le même nom, mais cela facilite la compréhension de la relation..
En fait, j’aime tout d’abord créer le groupe de champs, nous allons donc le faire en sélectionnant Admin> Administration du blog> Blogs personnalisés. Puis cliquez sur le gros bouton vert qui dit Créer un nouveau groupe de champs de weblog.
Entrer Emplacements comme nom du groupe de champs et cliquez sur soumettre.
Une fois que vous avez cliqué sur Soumettre, vous verrez que EE vous dit que vous ne pouvez pas l'utiliser avant de l'avoir attribué à un blog Web. Mais nous l'attribuerons à un blog lorsque nous créerons le blog..
Maintenant que notre groupe de terrain est créé, nous devons réfléchir aux champs que nous voulons y inclure. Voici les champs que je pense convenir, ainsi que leurs propriétés en EE:
Maintenant que nous avons cartographié nos champs, nous devons les créer en EE. Alors tout d'abord, cliquez sur Ajouter / Modifier des champs personnalisés dans l'enregistrement Emplacements. Ensuite, cliquez sur le gros bouton vert qui dit Créer un nouveau champ personnalisé.
Maintenant, voici où nous créons les champs dans EE que nous avons définis précédemment. Commençons par le Longitude champ:
Une fois toutes les propriétés appropriées sélectionnées, cliquez sur Soumettre. Maintenant, le champ de longitude est créé.
Maintenant que vous avez vu comment créer un champ, je vais juste aller de l'avant et créer le reste.
Maintenant que notre groupe de champs a été défini, nous devons créer notre blog et lui attribuer le groupe de champs personnalisé Emplacements. D'abord, cliquez sur le Administration du blog miette de pain. Puis cliquez sur Gestion du blog. Enfin, cliquez sur le gros bouton vert qui dit Créer un nouveau blog.
Entrer Emplacements comme nom complet du blog et Emplacements comme nom abrégé. Sélectionner Oui pour Modifier les préférences de groupe, et une nouvelle section apparaîtra. C'est ici que nous sélectionnons Emplacements en tant que groupe de terrain.
Une fois tous les paramètres sélectionnés, cliquez sur Soumettre pour créer le blog Web Emplacements..
Maintenant que notre Emplacements weblog est créé, nous pouvons commencer à entrer les emplacements. Survolez l'onglet Publier et cliquez sur Emplacements.
Les champs Titre, Adresse et Description sont assez explicites, mais les champs Titre de l'URL, Longitude, Latitude et Photo peuvent nécessiter une petite explication..
Le champ Titre de l'URL est automatiquement renseigné lorsque vous entrez le titre. Le titre de l'URL remplace les espaces par des traits de soulignement et rend le texte en minuscule. Pour cette situation, nous n'allons pas l'utiliser. Il y a un moyen de le cacher, mais je ne vais pas passer par là tout de suite.
Je suis sûr que tout le monde sait ce que sont la longitude et la latitude, mais la question est de savoir comment la déterminer à partir d’une adresse. En utilisant un site tiers tel que Map Builder. Ce site vous permet de saisir une adresse et renvoie la longitude et la latitude..
Si nous avions une photo de l'emplacement, nous pouvons l'inclure lors du clic sur le point du tracé. Télécharger des images au format EE peut être un peu déroutant, alors parcourons-le.
D'abord, cliquez sur le Téléverser un fichier lien qui se trouve sous le bouton "soumettre". Une fenêtre pop-up va apparaître.
Recherchez votre fichier sur votre ordinateur, puis cliquez sur Soumettre..
Vous pouvez redimensionner la photo après l'avoir téléchargée en cliquant sur le bouton Redimensionner l'image, mais j'ai redimensionné mon image avant de la mettre en ligne afin que je ne fasse pas la démonstration de cette partie. Nous voulons sélectionner URL seulement pour le type de fichier et Photo pour l'emplacement de l'image.
Une fois nos options sélectionnées, cliquez sur Placer une image et fermer la fenêtre. Cela va maintenant peupler votre Photo champ avec l'emplacement de votre image.
Si un utilisateur télécharge une photo de l'emplacement, nous souhaitons qu'il entre la hauteur et la largeur de l'image. Si ce n'est pas le cas, l'image va sortir de la bulle d'informations en raison de la façon dont Google Maps calcule la taille de la bulle. Il est assez simple d’ajouter la largeur et la hauteur pour résoudre ce problème, nous avons donc ajouté que dans.
Si nous voulons entrer une brève description à afficher dans la bulle lorsque l'utilisateur clique sur le point de tracé, c'est ici que vous voudriez le saisir. Ce champ prend en charge le formatage HTML par défaut.
Maintenant que nous avons saisi toutes nos données, nous pouvons soumettre le formulaire et l'emplacement sera publié..
Ensuite, il suffit de répéter ce processus pour les entrées supplémentaires.
Tout d’abord, nous devons créer un nouveau groupe de modèles pour notre carte d’emplacement en cliquant sur le bouton Modèles languette. Ensuite, cliquez sur le gros bouton vert qui dit Créer un nouveau groupe de modèles.
Puis entrez Emplacements dans le champ Nom du groupe de modèles, puis cliquez sur Soumettre. Notre groupe de modèles est maintenant créé.
Pendant que nous sommes ici, créons un autre groupe de modèles appelé des scripts.
Ensuite, sélectionnez le groupe de modèles d’emplacement dans la colonne de gauche, puis cliquez sur indice. Nous pouvons maintenant commencer à construire notre modèle. Vous serez présenté avec ce qui est juste une boîte vide, c'est ici que vous allez ajouter tout votre code.
Il ne nous reste plus qu'à entrer notre code et cliquer sur mettre à jour, et notre modèle est mis à jour.
Pour utiliser l'API Google Maps, vous devez vous inscrire pour obtenir une clé API pour votre site. Une fois que vous vous êtes inscrit, vous recevrez la clé API, que vous utiliserez pour inclure JavaScript dans la page. Commençons par une simple page et intégrons notre code Google Maps:
Emplacements
Remarque: ABQIAAAAGbpRl2XCyCtoHtEtVLA9mhT9xvUTfY2sa86RDF1pWLQtRVPGPxQD1aEiFi1xtt39RqVCDd8ib1hGw est la valeur de la clé Google Maps API pour mon site. Vous devrez le mettre à jour avec votre propre clé..
Une fois que ce code a été entré dans textarea, cliquez simplement sur mettre à jour pour enregistrer le modèle. Ensuite, si vous cliquez sur le gros bouton vert qui dit Voir le modèle rendu, nous verrons à quoi ressemblera la page.
Ensuite, nous devons ajouter un div qui contiendra réellement la carte.
Emplacements JavaScript doit être activé pour afficher cette carte..
Remarque: je viens d'ajouter le message indiquant que JavaScript est nécessaire pour les utilisateurs pour lesquels JavaScript n'est pas activé, mais vous pouvez certainement afficher la liste des emplacements au lieu de ce message..
Nous devons définir la hauteur et la largeur de la div qui contiendra la carte. Pour cet exemple, je vais simplement utiliser du code CSS sur la page..
Emplacements JavaScript doit être activé pour afficher cette carte..
C’est tout le code HTML dont nous avons besoin pour que notre carte s’affiche. Une fois le code saisi, cliquez sur Mise à jour et terminé, et nous sommes ramenés à la section principale des modèles. Ensuite, nous allons coder notre JavaScript pour ajouter les points à la carte.
Sélectionnez les scripts dans la colonne de gauche et cliquez sur Nouveau modèle. Entrer carte comme nom de modèle et sélectionnez JavaScript dans le menu déroulant Type de modèle, puis cliquez sur Soumettre.
Notre nouveau modèle nommé carte a maintenant été créé. Alors cliquez sur carte, et ne modifions pas le modèle.
La bonne chose à propos de EE est que nous pouvons entrer du code EE dans les modèles JS et CSS et qu’il traitera ce code. Pour ce faire, nous devons ajouter une variable de configuration masquée à notre fichier config.php situé dans le dossier système. Alors ouvrez votre fichier config.php et entrez les informations suivantes: $ conf ['protect_javascript'] = 'n';. Puis téléchargez-le et les tags EE seront traités en code JS.
Remarque: je vais utiliser du vieux code JavaScript classique pour cet exemple, mais vous pouvez facilement modifier du code pour utiliser le cadre de votre choix..
Premièrement, nous allons commencer à créer une fonction qui ajoutera les points de tracé à la carte:
Accentsconagua
fonction populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (new GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); La première ligne spécifie d’utiliser l’élément avec un id de carte pour créer la carte. La ligne suivante définit le centre de la carte sur la latitude et la longitude spécifiées, puis définit le niveau de zoom. Ce ne sont que des valeurs arbitraires pour cet exemple, vous devrez donc probablement vous ajuster. La dernière ligne configure les contrôles sur la carte, à savoir le zoom, le déplacement, le type de carte, etc..
Nous voulons maintenant accéder aux données que nous avons entrées dans EE en utilisant la balise exp: weblog: entries:
fonction populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (new GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: entrées weblog = "locations" disable = "categories | catégories_fields | membre_data | pagination | rétroliens" if count == 1 var points = nouvelle matrice (total_results); / if / exp: weblog: entrées Donc, ce code dit "interroger" le emplacements blog, et désactiver les paramètres supplémentaires que nous n'utiliserons pas. C'est une bonne habitude à prendre car cela peut améliorer les performances.
Nous utiliserons certaines variables EE que je devrai expliquer: count et total_results. compter est exactement ce que cela ressemble: il indique simplement le numéro de l'enregistrement actuel que nous sommes sur. total_résultats indique le nombre total d'enregistrements qui seront retournés.
Donc, si nombre est égal à 1, ceci la première fois dans la boucle, nous initialisons donc notre tableau qui aura une taille du nombre total d'enregistrements retournés.
Ensuite, nous voulons réellement récupérer les données et les sortir dans la boucle. Remarque: je vais ajouter des sauts de ligne à ce code uniquement pour des raisons de lisibilité, mais en production, les sauts de ligne doivent être supprimés..
fonction populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (new GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: entrées weblog = "locations" disable = "categories | catégories_fields | membre_data | pagination | rétroliens" if count == 1 var points = nouvelle matrice (total_results); / if points [count] = [locations_latitude, locations_longitude, ' Titre
if locations_photo && locations_photo_width && locations_photo_height 
/si locations_address
si description_emplacement description_emplacement / if ']; / exp: weblog: entrées Cela peut sembler beaucoup, alors passons en revue morceau par morceau.
points [count] = [locations_latitude, locations_longitude,
Ici, nous ajoutons un tableau à notre tableau de points. Dans ce tableau, nous allons ajouter la latitude, la longitude et les informations à afficher dans la bulle d'informations. Remarquez comment locations_latitude et emplacements_longitude correspondre avec les valeurs que nous avons ajoutées pour les noms de champs dans notre groupe de champs personnalisé.
''];Titre
Dans cet extrait, nous ajoutons simplement une div et le titre qui a été entré dans EE.
if locations_photo && locations_photo_width && locations_photo_height
Dans cette pièce, nous vérifions si une valeur a été entrée dans les champs photo, largeur photo et hauteur photo. S'il y en avait une, nous ajoutons la photo à notre bulle d'informations..
locations_address
si description_emplacement description_emplacement / if
Enfin, nous ajoutons l'adresse à la bulle d'informations, et si une description a été entrée, nous l'ajoutons aussi. Voici cette ligne entière sans aucun saut de ligne:
points [count] = [locations_latitude, locations_longitude, ''];Titre
if locations_photo && locations_photo_width && locations_photo_heightlocations_address
si description_emplacement description_emplacement / if
Pour terminer la fonction, il suffit de parcourir le tableau et d’ajouter les points de tracé et les écouteurs d’événements à la carte:
/si fonction populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (new GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: entrées weblog = "locations" disable = "categories | catégories_fields | membre_data | pagination | rétroliens" if count == 1 var points = nouvelle matrice (total_results); / if points [count] = [locations_latitude, locations_longitude, 'Titre
if locations_photo && locations_photo_width && locations_photo_height/silocations_address
si description_emplacement description_emplacement / if']; / exp: weblog: entrées pour (var i = 1; i < points.length; i++) var point = new GLatLng(points[i][0],points[i][1]); var windowInfo = points[i][2]; var marker = createMarker(point,windowInfo); map.addOverlay(marker); Nous créons donc notre point et passons en latitude et en longitude. Ensuite, nous créons une variable contenant toutes les informations pour la bulle d’information. Ensuite, nous appelons une fonction personnalisée que je définirai dans une minute et en passant le texte de la bulle d’information et de point. Enfin, nous ajoutons le marqueur à la carte.
Voici notre fonction personnalisée qui crée le marqueur:
fonction createMarker (point, overlayText) var marker = new GMarker (point); GEvent.addListener (marqueur, "clic", fonction () marqueur.openInfoWindowHtml (overlayText);); marqueur de retour;
Nous créons donc un marqueur basé sur notre point sur la carte, puis ajoutons un écouteur d'événement qui ouvrira la bulle d'information avec le texte approprié lorsque vous cliquez dessus..
Donc c'est à peu près tout. Cependant, je vais ajouter une fonction supplémentaire qui indiquera à la fonction JS de s'exécuter une fois le dom chargé:
fonction addLoadEvent (func) var oldonload = window.onload; if (type de window.onload! = 'fonction') window.onload = func; else window.onload = function () if (oldonload) oldonload (); func (); addLoadEvent (populateMap);
J'ai d'abord lu à propos de cette fonction de Simon Willison. Vous pouvez à nouveau remplacer ceci par du code pour la bibliothèque JS que vous utilisez..
Voici le JS complet pour ce modèle:
fonction populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (new GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: entrées weblog = "locations" disable = "categories | catégories_fields | membre_data | pagination | rétroliens" if count == 1 var points = nouvelle matrice (total_results); / if points [count] = [locations_latitude, locations_longitude, 'Titre
if locations_photo && locations_photo_width && locations_photo_height/silocations_address
si description_emplacement description_emplacement / if']; / exp: weblog: entrées pour (var i = 1; i < points.length; i++) var point = new GLatLng(points[i][0],points[i][1]); var windowInfo = points[i][2]; var marker = createMarker(point,windowInfo); map.addOverlay(marker); function createMarker(point, overlayText) var marker = new GMarker(point); GEvent.addListener(marker, "click", function() marker.openInfoWindowHtml(overlayText);); return marker; function addLoadEvent(func) var oldonload = window.onload; if (typeof window.onload != 'function') window.onload = func; else window.onload = function() if (oldonload) oldonload(); func(); addLoadEvent(populateMap); Une fois tout ce code ajouté, cliquez sur Mise à jour et terminé être renvoyé à la page principale des modèles. Ensuite, nous devons revenir à notre groupe de modèles d'emplacements et modifier le modèle d'index..
Nous devons inclure le modèle JS que nous venons de créer dans l'en-tête du document:
J'utilise la variable de chemin pour créer un lien vers le modèle JS.
Alors maintenant, lorsque nous revenons en arrière et voyons notre modèle d'emplacements dans le navigateur, vous pouvez voir une erreur JS. Si une description d'emplacement a été entrée, cela peut ajouter de nouvelles lignes au code, ce qui rompra la chaîne dans le JS. Donc, la solution est de supprimer en quelque sorte ces nouvelles lignes.
Heureusement, il existe un plugin pour EE appelé Find and Replace qui nous permettra de remplacer tout \ n avec rien.
Alors naviguez dans Admin> Utilitaires> Gestionnaire de plugins et trouvez le plugin dans la colonne de droite. Lorsque vous le trouvez, cliquez sur installer, et c'est tout.
Maintenant, nous pouvons utiliser le plugin dans notre code. Alors revenez en arrière et éditez le modèle de carte dans notre groupe de modèles de scripts, et remplacez ceci:
si description_emplacement description_emplacement / if
Avec ça:
iflets_description exp: replace find = "\ n" multiple = "yes" regex = "yes" locations_description / exp: replace / if
Cette fonction consiste essentiellement à remplacer toutes les nouvelles lignes par rien. Bien sûr, nous voulons supprimer tous les sauts de ligne du code, voici donc le JS complet mis à jour:
fonction populateMap () var map = new GMap2 (document.getElementById ("map")); map.setCenter (new GLatLng (32.02670629333614, -95.009765625), 4); map.setUIToDefault (); exp: weblog: entrées weblog = "locations" disable = "categories | catégories_fields | membre_data | pagination | rétroliens" if count == 1 var points = nouvelle matrice (total_results); / if points [count] = [locations_latitude, locations_longitude, 'Titre
if locations_photo && locations_photo_width && locations_photo_height/silocations_address
iflets_description exp: replace find = "\ n" multiple = "yes" regex = "yes" locations_description / exp: replace / if']; / exp: weblog: entrées pour (var i = 1; i < points.length; i++) var point = new GLatLng(points[i][0],points[i][1]); var windowInfo = points[i][2]; var marker = createMarker(point,windowInfo); map.addOverlay(marker); function createMarker(point, overlayText) var marker = new GMarker(point); GEvent.addListener(marker, "click", function() marker.openInfoWindowHtml(overlayText);); return marker; function addLoadEvent(func) var oldonload = window.onload; if (typeof window.onload != 'function') window.onload = func; else window.onload = function() if (oldonload) oldonload(); func(); addLoadEvent(populateMap); C'est tout! Nous pouvons maintenant afficher notre modèle dans le navigateur et voir notre carte Google optimisée pour l'efficacité énergétique. Vous pouvez aussi voir ma démo.
