[Résolu] CGGoogleMaps2 que je veux remplacer...

[Résolu] CGGoogleMaps2 que je veux remplacer... - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : [Résolu] CGGoogleMaps2 que je veux remplacer... (/thread-3406.html)

[Résolu] CGGoogleMaps2 que je veux remplacer... - claudetom - 05/02/2015

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.11
#~ Url du site : innoverdrive.fr
#~ Hébergeur / Soft : OVH
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.12
#~ Installed Modules:
#~ CMSMailer: 5.2.2
#~ CMSPrinting: 1.0.5
#~ FileManager: 1.4.5
#~ MenuManager: 1.8.6
#~ MicroTiny: 1.2.8
#~ ModuleManager: 1.5.8
#~ News: 2.14.4
#~ Search: 1.7.11
#~ ThemeManager: 1.1.8
#~ TinyMCE: 2.9.13
#~ FormBuilder: 0.8.1.1
#~ Gallery: 2.0.1
#~ CGSimpleSmarty: 1.7.4
#~ CMSDumper: 1.3
#~ Captcha: 0.5.2
#~ BackupMySql: 0.3.4
#~ AceEditor: 1.0
#~ CGExtensions: 1.45
#~ CGContentUtils: 1.5
#~ CGSmartImage: 1.17.2
#~ CustomGS: 2.1
#~ ExaCSS: 1.3
#~ ECB: 1.6
#~ CMSForms: 1.11.2
#~ MCFramework: 0.0.6
#~ ListIt2: 1.4.1
#~ JQueryTools: 1.3.4
#~ MleCMS: 1.11.4
#~ TemplateExternalizer: 2.1.6
#~ Banners: 2.7
#~ Showtime: 3.4
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ max_upload_size: 64000000
#~ url_rewriting: mod_rewrite
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale: fr_FR.utf8
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.5.21
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 2048
#~ E_DEPRECATED: 8192
#~ memory_limit: 512M
#~ max_execution_time: 300
#~ output_buffering: 4096
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 64M
#~ upload_max_filesize: 64M
#~ session_save_path: /tmp (0700)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: fpm-fcgi
#~ Server Db Type: MySQL (mysql)
#~ Server Db Version: 5.1.73
#~ Server Db Grants: Impossible de trouver un privilège "GRANT ALL". Cela peut signifier que vous pourriez avoir des problèmes pour installer ou retirer des modules, ou encore l 'ajout et la suppression d'éléments, y compris les pages.
#~ Server Time Diff: Aucune différence de date du système de fichiers trouvées
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour,

J'ai un petit soucis pour mettre en place l'utilisation de ma carte Google maps (Api V3)

Avant de faire l'intégration dans CMS, j'ai fais mes tests dans une page html toute bête avec laquelle ça fonctionne à merveille.

Pourquoi passer par code au lieu de CGGoogleMaps2 !
Réponse : pour le rendu, les fonctionnalités et adaptation en 'Responsive'

Mon problème :

l'intégration via des modules global (plus propre) ne fonctionne pas la carte ne s'affiche pas sur ma page ?

Contenus des différents blocs :

Head :

Code :
[== HTML ==]

{cms_jquery}

<!-- Google Map -->

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

        <script type="text/javascript" src="{root_url}/uploads/Javascripts/GoogleMap.js"></script>

<!-- Google Map -->

Contenu du contentMaps :

Code :
[== HTML ==]

<!-- Pour le fonctionnement de la Carte ajouter aussi le HeadMap dans la page -->

<div id="carte" class="on-column" style="max-width: 1920px;width:100%;padding-left:0%;"> 

</div>

Et pour finir le Gabarit de page qui appel tous cela

Code :
[== HTML ==]

{global_content name='HeadMap'}

<body>

<!-- Contenu -->

{global_content name='CorpsMenuHtml'}

    <div id="main-content"> 

 <!-- overlay permet de mettre un filtre sur le fond -->

        <div class="content_blocks">

            <div class="content">

                <div class="section">

                    {global_content name='GetBitmapFromPic'}

                    <div class="two-third-column">

                        <h2>{title}</h2>

                        <div class="on-column back">

                            {global_content name='contactform'}

                            {content}

                        </div>

                    </div>

                </div>

            </div>

            <!-- Affichage de Google maps dans une Div id="carte" en relation avec le script placé dans le Head -->

            {global_content name='ContentMap'}

        </div>

    </div>

{global_content name='CorpsFooterHtml'}

</body>

</html>

Le code du javascript pour info...

Code :
[== Java ==]

// ***************************** Pour gestion de la carte Google Maps ***************************

        // Inclusion de l'API Google MAPS -->

        // Le paramètre "sensor" indique si cette application utilise détecteur pour déterminer la position de l'utilisateur -->

            /* 

             - D'après lecture de : https://developers.google.com/maps/documentation/javascript/reference?hl=fr

             - http://hsmoore.com/keep-google-map-v3-centered-when-browser-is-resized/

             - Coordonées de la société : 48.7858864,8.2479977 

            */

            function initialiser() {

                var latlng = new google.maps.LatLng(48.7858864, 8.2479977);

                //objet contenant des propriétés avec des identificateurs prédéfinis dans Google Maps permettant

                //de définir des options d'affichage de la carte

                var options = {

                    center: latlng,

                    zoom: 15,

                    scrollwheel: false,

                    mapTypeId: google.maps.MapTypeId.ROADMAP

                };

                //constructeur de la carte qui prend en paramètre le conteneur HTML

                //dans lequel la carte doit s'afficher et les options

                var carte = new google.maps.Map(document.getElementById("carte"), options);

                //création du marqueur

                var marqueur = new google.maps.Marker({

                    position: new google.maps.LatLng(48.7858864, 8.2479977),

                    map: carte

                });

                //Rendre le marqueur "déplaçable"

                marqueur.setDraggable(true);

                google.maps.event.addListener(marqueur, 'dragend', function(event) {

                //message d'alerte affichant la nouvelle position du marqueur

                alert("La nouvelle coordonnée du marqueur est : "+event.latLng);

                });

                // Evenement de redim.

                google.maps.event.addDomListener(window, "resize", function() {

                    var center = carte.getCenter();

                    google.maps.event.trigger(carte, "resize");

                    carte.setCenter(center);

                });

            };

                        //Execution au chargement.

            $(window).load(function(){initialiser();});

// ***************************** Pour gestion de la carte Google Maps ***************************

La simple page html qui ma servi de test avant intégration :

Code :
[== HTML ==]

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

    <head>

        <title>Google Maps Test</title>

        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        <!-- Elément Google Maps indiquant que la carte doit être affiché en plein écran et

        qu'elle ne peut pas être redimensionnée par l'utilisateur -->

        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

        <!-- Jquery pour l'utilisation des commandes -->

        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

        <!-- Inclusion de l'API Google MAPS -->

        <!-- Le paramètre "sensor" indique si cette application utilise détecteur pour déterminer la position de l'utilisateur -->

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

        <script type="text/javascript" src="GoogleMap.js"></script>

    </head>

    <body>

        <div id="carte" style="max-width:1920px; width:100%; height:40%"></div>

    </body>

</html>

Je trouve pas ou est le problème ?

Merci Smile

[Résolu] CGGoogleMaps2 que je veux remplacer... - jissey - 05/02/2015

Bonjour,
je n'ai pas regardé dans le détail les codes que tu nous fourni, mais quand la carte ne s'affiche pas c'est souvent un pb de jquery.
Soit tu assignes 2 fois la librairie, soit pas du tout...
Regarde dans le code source de ta page générée.

[Résolu] CGGoogleMaps2 que je veux remplacer... - claudetom - 05/02/2015

jissey a écrit :Bonjour,
je n'ai pas regardé dans le détail les codes que tu nous fourni, mais quand la carte ne s'affiche pas c'est souvent un pb de jquery.
Soit tu assignes 2 fois la librairie, soit pas du tout...
Regarde dans le code source de ta page générée.

Désolé oublié aussi de signaler que j'ai vérifié effectivement que j'ai pas x appels et donc utilise maintenant par défaut
{cms_jquery}

qui donne cela dans le source de la page :

Code :
[== HTML ==]

       <script type="text/javascript" src="http://www.innoverdrive.fr/lib/jquery/js/jquery-1.11.0.min.js"></script>

<script type="text/javascript" src="http://www.innoverdrive.fr/lib/jquery/js/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript" src="http://www.innoverdrive.fr/lib/jquery/js/jquery-ui-1.10.4.custom.min.js"></script>

<script type="text/javascript" src="http://www.innoverdrive.fr/lib/jquery/js/jquery.ui.nestedSortable-1.3.4.js"></script>

<script type="text/javascript" src="http://www.innoverdrive.fr/lib/jquery/js/jquery.json-2.3.min.js"></script>

plus mon appel vers du javascript perso et google:

Code :
[== HTML ==]

<!-- Google Map -->

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

        <script type="text/javascript" src="http://www.innoverdrive.fr/uploads/Javascripts/GoogleMap.js"></script>

<!-- Google Map -->

Qui sont tous bien chargés (mode debug de firefox..)

Merci pour cette remarque mais il semble y'avoir un autre soucis ?

d'autres suggestions Wink

[Résolu] CGGoogleMaps2 que je veux remplacer... - Jean le Chauve - 05/02/2015

Un lien vers ta page ?

[Résolu] CGGoogleMaps2 que je veux remplacer... - claudetom - 05/02/2015

Jean le Chauve a écrit :Un lien vers ta page ?

bonsoir,

Voici

Code :
[== HTML ==]

http://innoverdrive.fr/contact

[Résolu] CGGoogleMaps2 que je veux remplacer... - Jean le Chauve - 05/02/2015

Bonsoir,
Tu as un problème de css. Si tu ajoutes une height (400px) à ta div id="carte", la carte apparaît.
Je suppose que ton test sur ta page fixe html s'est fait sur un design minimal.

[Résolu] CGGoogleMaps2 que je veux remplacer... - claudetom - 05/02/2015

Jean le Chauve a écrit :Bonsoir,
Tu as un problème de css. Si tu ajoutes une height (400px) à ta div id="carte", la carte apparaît.
Je suppose que ton test sur ta page fixe html s'est fait sur un design minimal.

Oui effectivement, j'ai oublié le height que j'avais fixé à 40% sur la page minimaliste

Merci