Google Map dans une boite modale simple ou JQuery UI

Introduction

mapSuite à un projet sur lequel je suis, nous avions au départ un simple lien vers une carte map pour le plan d'accès, cependant cela ouvre un nouvel onglet qui permet d'avoir plus de détail de ce plan, mais l'idée était d'ouvrir ce plan d'accès dans une boite modale avec JQuery UI ou non.

 

Donc, voici le fruit de mes recherches et essais sur l'ouverture dans une boite modale, quelle soit stylisée avec JQuery UI ou avec SimpleModal.

 

Nous allons donc voir avec 3 façons différentes pour afficher un plan Google Map dans une boite modale.

 

1er exemple

Rendez-vous sur cette page (http://www.ericmmartin.com/projects/simplemodal/) et télécharger le fichier js minifié de préférence.
Dans votre page incluer la libraire JQuery et le fichier js téléchargé.
Ensuite insérer la fonction JavaScript.

             /*Google Map*/
            jQuery(document).ready(function () {
                jQuery('.map').click(function (e) {
                    jQuery.modal('<iframe src="'+this.href+'&output=embed"></iframe>', {
                        overlayClose:true
                    });
                        return false;
                });
            });
              

Ensuite le code CSS relatif à cette boite modale

            /*Google Map*/
            #simplemodal-overlay {
              background-color:#000;
            }
            
            #simplemodal-container {
              height:400px;
              width:600px;
              background-color:#fff;
              border:3px solid #ccc;
            }
            
            #simplemodal-container iframe{
                height:400px;
                width:600px;
            }
		  

Ensuite ajouter la class (map) à votre lien, ce lien se récupére sur Google Map, en cliquant sur la roue dentelée, qui vous propose soit un lien classique (c'est celui la qu'il faut) ou une intégration dans une iframe, d'ailleurs nous verrons plustard nous en aurons besoin.

2éme exemple

Dans cet exemple, nous allons utiliser la boite modale de JQuery UI. Ce qui implique d'inclure les fichiers nécessaires pour son fonctionnement et son affichage.
Dans votre page insérer ces fichiers via CDN

<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Ensuite insérons la fonction JavaScript.

//visionner un plan map
var map;
    var coords = new Object();
    var markersArray = [];
    coords.lat = 44.856051;
    coords.lng = -93.242539;
    
    $(document).ready(function() 
    {
        
        $( "#map_container" ).dialog({
            autoOpen:false,
            width: 555,
            height: 400,
            resizeStop: function(event, ui) {google.maps.event.trigger(map, 'resize')  },
            open: function(event, ui) {google.maps.event.trigger(map, 'resize'); }      
        });  

        $( "#showMap" ).click(function() {           
            $( "#map_container" ).dialog( "open" );
            map.setCenter(new google.maps.LatLng(coords.lat, coords.lng), 10);
            return false;
        });    
        $(  "input:submit,input:button, a, button", "#controls" ).button();
        initialize();
        plotPoint(coords.lat,coords.lng,'NOM DE VOTRE SITE','<span class="gBubble"><b>NOM DE VOTRE SITE</b><br>DESCRIPTION</span>');
    });

    function plotPoint(srcLat,srcLon,title,popUpContent,markerIcon)
    {
            var myLatlng = new google.maps.LatLng(srcLat, srcLon);            
            var marker = new google.maps.Marker({
                  position: myLatlng, 
                  map: map, 
                  title:title,
                  icon: markerIcon
              });
              markersArray.push(marker);
            var infowindow = new google.maps.InfoWindow({
                content: popUpContent
            });
              google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(map,marker);
            });                                          
    }
    function initialize() 
    {      
    
        var latlng = new google.maps.LatLng(coords.lat, coords.lng);
        var myOptions = {
          zoom: 10,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
       map = new google.maps.Map(document.getElementById("map_canvas"),  myOptions);                         
    }        
          

Pour que ce code soit adapté à votre situation, modifier la ligne 5 et 6 en ajoutant les lattitudes et longitudes, vous trouverez ces informations sur Google Map, puis modifier la ligne 26 correspondant à la description de votre lieu.

Code Html

Dans la partie, body, insérer ce code, qui permet l'ouverture de la boite modale via le bouton dans le bloc div.


			<div id="map_container" title="Plan d'acc&egrave;s">
			<div id="map_canvas" style="width:100%;height:100%;"></div>
			</div>
		 
			<div id="controls">
			<input type="button" name="showMap" value="Plan d'acc&egrave;s" id="showMap	" />
			</div>
          

3éme exemple

Dans cet exemple, nous allons utiliser la fonction JavaScript classique, mais amélioré de l'ouverture d'une boite modale avec JQuery.
Comme dans l'exemple n° 2 incluer l'appel via CDN des fichiers (librairie, css, et jquery ui). Les thèmes sont modifiables.
Puis insérons notre fonction JavaScript.

        $(document).ready(function () {
			$('.map').on('click', function (e) {
                e.preventDefault();
                //var page = $(this).attr("href");
				var page = "ICI LE CODE PROVENANT DE L'IFRAME DE GOOGLE MAP";
                var pagetitle = $(this).attr("href");
				var width = $(this).attr("data-width");
				var height = $(this).attr("data-height");
                var $dialog = $('<div></div>')
				.html('<iframe width='+width+' height='+height+' src='+page+' frameborder="0" allowfullscreen output=embed></iframe>').dialog({
                    autoOpen: false,
                    modal: true,
                    width: "auto",
                    height: "auto",
                    show: "slide",
					hide: "fade",
					resizable: false,
                    title: pagetitle,
					
					buttons: {
						  "Fermer": function() {
							  $( this ).dialog( "close" );
						  }
					}
                });
                $dialog.dialog('open');
            });
        });
          

Sachant que le sélecteur est (.map) on pourrait mettre un id (#map) plus rapide qu'une classe.
Ensuite, souvenez vous, lorsque l'on récupére le code source de l'iframe produit par Google Map, il suffit de prendre ce qu'il y a dans la source et de le coller dans la variable (page).

Code Html

Maintenant, dans la partie body, insérer ce code
<a href="Google Map" class="map link" data-width="400" data-height="400">Plan</a>
Définissez ensuite la taille que vous souhaitez, ici nous avons 400px sur 400px.
Ainsi, la boite modale s'adaptera à la hauteur et à la largeur défini dans le lien.

Conclusion

Voilà trois façon, d'afficher un plan Google Map dans une boite modale.

 

Téléchargement

Google Map Modal V1


Ce script permet d'afficher un plan Google Map dans une simple boite modale en utilisant simplement la librairie JQuery et un fichier js.
* Téléchargé ( 4  fois).

Google Map Modal V2


Ce script permet d'afficher un plan Google Map dans une boite modale JQuery UI, il suffit d'ajouter votre lien plan d'accès dans la variable page et de définir la largeur et la hauteur de la boite modale Information du fichier
* Téléchargé ( 3  fois).

Google Map Modal V3


Ce script permet d'afficher un plan Google Map dans une boite modale JQuery UI, il suffit d'ajouter la longitude et la l’attitude du lieu et de remplir la description dans la fonction plotPoint Information du fichier
* Téléchargé ( 4  fois).

 

Bon dev