Installé une map (google) dans wordpress

Bonjour,

j'aimerais de l'aide car j'ai fait beaucoup de site
pour chercher comment installé sur carte (un plan) sur une page wordpress

Merci de votre aide

34 réponses

Résumé de la discussion

Le fil explore comment insérer une carte Google Maps dans une page WordPress via l’édition du code source et l’utilisation de l’API JavaScript. Plusieurs réponses indiquent d’insérer le code directement dans l’éditeur en mode source, en créant un conteneur div map_canvas et en chargeant l’API Google Maps. Les échanges précisent aussi comment ajuster les coordonnées LatLng, le niveau de zoom et l’ajout d’un marqueur, et recommandent de consulter la documentation JavaScript Maps pour les bases. En cas de difficulté, certains suggèrent de vérifier si le problème vient du code ou de l’affichage général de la page, notamment lors de l’apparition d’une page blanche.

Bobot (l’IA à votre service)
  1. Salut.

    Si tu veux l'insérer dans un article ou une page, il suffit de te mettre en mode code source dans l'éditeur (où tu écris le contenu).

    Voilà un exemple :
    <div id="map_canvas" style="width:640px; height:480px;"></div>
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    var tourEiffel = new google.maps.LatLng(48.85829 , 2.29503);
    var options = {
    	zoom: 18,
    	center: tourEiffel,
    	mapTypeId: google.maps.MapTypeId.HYBRID
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), options);
    </script>
    3
    1. Tout est là :
      http://code.google.com/intl/fr/apis/maps/documentation/javascript/basics.html
      2
      1. Tout ce que tu as à changer, c'est les coordonnées ainsi que le niveau de zoom si nécessaire :
        <div id="map_canvas" style="width:640px; height:480px;"></div>
        
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
        var nomDuPoint = new google.maps.LatLng(48.85829 , 2.29503);
        var options = {
        	zoom: 18,
        	center: nomDuPoint,
        	mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), options);
        </script>


        Pour avoir les coordonnées, rends-toi sur maps.google.fr, clique sur "Nouveau !" (tout en haut à droite) et active l'option "Info-bulle LatLng"
        2
        1. « donc si je modifie la page article seul sa va me la mettre a tout nouveaux article »Si tu crées un article ou une page pour mettre la carte, elle ne sera que dans cet article ou cette page.
          1
          1. Merci mais on trouve ou les information

            pour avoir cette map sur wordpress

            ou connaissez vous une extension qui facilite le travail

            Merci
            0
            1. Je me cite :
              « Si tu veux l'insérer dans un article ou une page, il suffit de te mettre en mode code source dans l'éditeur (où tu écris le contenu). »
              0
              1. 0
                1. Le code que je t'ai donné peut directement être mis dans le contenu.
                  Si tu veux que la carte s'affiche, il faut mettre le second code (le premier n'affichera que l'adresse).
                  Mais il vaut mieux utiliser l'API Javascript ; les iframe sont obsolètes.
                  0
                  1. merci mais comment faire pour le javascript pour savoir quel code mettre

                    car je doit mettre un plan et les extension fait pour sa ne marche pas
                    donc je cherche comment faire

                    tu ma donné le code c'est très sympa , mais c'est quoi que je doit changer dans ton code
                    est ou trouver car quand ton clic sur liens il donne que l'iframe

                    merci
                    0
                    1. merci

                      c'est compliqué, vous avez pas un moyen plus simple
                      extension ou autre chose pour integré un plan a une page ou article

                      merci
                      0
                      1. Merci

                        quand je clic sur l'éditeur (dans apparence) sa me met les fichier donc fichier css que je peut modifier
                        mais aussi le thème, page d'accueil

                        Moi la carte je veux quel soit qu'a 1 seul page donc si je modifie la page article seul

                        sa va me la mettre a tout nouveaux article

                        merci
                        0
                        1. Je suis nouveaux comme tu peu le constaté dans le monde wordpress

                          quand je fait l'éditeur sa me met plusieurs page (modèle de page) le fichier CSS

                          donc c'est pour sa que je demander

                          je vais essayer mais je garanti pas que je v y arrivé

                          merci
                          0
                          1. Je te parle de l'éditeur de contenu, là où tu écris tes articles.
                            0
                            1. Daccord mais j'ai essayer hier est il c'est rien passé

                              en changer la longitude et latitude est rien ni dans le visuel
                              est ni dans la page actualisé de mon site publié

                              merci
                              0
                              1. C'est que tu as fait une erreur ...
                                Soit les coordonnées sont invalides, soit tu as changer quelque-chose d'autre qu'il ne fallait pas.
                                Sans ton code, je ne saurais pas trouver l'erreur.
                                0
                                1. Voici le code que j'ai repris
                                  en le personalisant avec la longitude et latitude

                                  <div id="map_canvas" style="width:640px; height:480px;"></div>

                                  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
                                  <script type="text/javascript">
                                  var nomDuPoint = new google.maps.LatLng(49.257798 , -1261019);
                                  var options = {
                                  zoom: 18,
                                  center: nomDuPoint,
                                  mapTypeId: google.maps.MapTypeId.HYBRID
                                  };
                                  var map = new google.maps.Map(document.getElementById("map_canvas"), options);
                                  </script>

                                  Merci de m'aider
                                  0
                                  1. Le niveau de zoom maximal pour ce point est 17, hors, ici, il est à 18.
                                    Et je pense que tu as oublié un point dans la longitude, ça affiche un endroit au Kazakhstan ; Avec -1.261019, c'est en France.
                                    0
                                    1. vous croyez que avec sa 49.25477,-1.26100 sa marchera

                                      cordialement
                                      0
                                      1. Merci beaucoup cela marche

                                        j'aurai une derniere question sur le plan il y a aucun pointeur (punaise, etc)
                                        donc j'ai le plan et je vous remercie pour sa

                                        mais n'arrive pas a mettre la punaise.

                                        cordialment
                                        0
                                        1. <div id="map_canvas" style="width:640px; height:480px;"></div> 
                                          
                                          <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
                                          <script type="text/javascript">
                                          var nomDuPoint = new google.maps.LatLng(49.257798 , -1.261019);
                                          
                                          var options = {
                                          	zoom: 18,
                                          	center: nomDuPoint,
                                          	mapTypeId: google.maps.MapTypeId.HYBRID
                                          };
                                          
                                          var map = new google.maps.Map(document.getElementById("map_canvas"), options);
                                          var marker = new google.maps.Marker({
                                          	map: map,
                                          	position: nomDuPoint
                                          });
                                          </script>
                                          0
                                          • 1
                                          • 2