Créer une carte interactive avec l'API Google Map & JAVASCRIPT

20 décembre 2017 HTML5, LABO & TESTS
CSS HTML5 Jquery code

Créer une carte interactif  avec l'API Google Map & JAVASCRIPT

Dans le but d'une demande de réalisation du carte interactive à partir de l'API Google Map, voici ce que j'ai pu réaliser, ainsi que le code explicatif avec les commentaires en couleur verte ci dessous. voir la demo

Les avantages : personnalisation du marker - utilisation du HTML dans les fenêtres de contenu

CSS UTLISES POUR CETTE CARTE

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

LIBRAIRIE JAVASCRIPT

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

ACCES A L'API GOOGLE

https://maps.googleapis.com/maps/api/js?key=[kEY api]&sensor=false&callback=initialize

CODE HTML

<div id="map_wrapper">
    <div id="map_canvas" class="mapping"></div>
    </div> 

CODE JAVASCRIPT

  <script type="text/javascript">jQuery(function($) {
    //Charger de manière asynchrone l'API de la carte
    var script = document.createElement('script');
    script.src = "https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXX&sensor=false&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
        mapTypeId: 'roadmap'
            
        };
                        
    // Affichage de la carte sur la Page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);
        
    // Les différents marqueurs mis grace à ce code
    var markers = [
        ['Trekking Croatie', 43.6676441,15.2751289],
        ['Trekking Chili-Bolivie', 16.455234,-64.7130761],
        ['Trekking au Viêtnam', 14.5157953,107.8445048],
      
    ];
                        
    // La liste des fenêtres avec leur contenu variable en HTML
    var infoWindowContent = [
        ['<div class="info_content" style="box-shadow: 8px 8px 12px #aaa;">' +
        '<h3><i class="fa fa-video-camera" aria-hidden="true"></i> Croatie - Iles en Dalmatie</h3>' +
        '<p><div class="embed-container"><iframe src="https://player.vimeo.com/video/180701394" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></p>' + '</div>'],
        ['<div class="info_content">' +
        '<h3><i class="fa fa-video-camera" aria-hidden="true"></i> Trekking Chili-Bolivie</h3>' +
        '<p><div class="embed-container"><iframe src="https://player.vimeo.com/video/170788369" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></p>' + '</div>'],    
         ['<div class="info_content">' +
        '<h3><i class="fa fa-video-camera" aria-hidden="true"></i> Trekking au Viêtnam</h3>' +
        '<p><div class="embed-container"><iframe src="https://player.vimeo.com/video/165291153" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></p>' + '</div>'],    
    
        
    ];
        
    // Afficher plusieurs marqueurs sur une carte
    var infoWindow = new google.maps.InfoWindow(), marker, i;
    
    
    //Faites une boucle à travers notre tableau de marqueurs et placez chacun sur la carte
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            // debut rajout Raphael pour afficher Icon personnalisé
            icon : "https://lecerfraphael.fr/data/images/trekking.png",
            // fin rajout Raphael
            position: position,
            map: map,
            title: markers[i][0]
        });
        
        // Autoriser chaque marqueur à avoir une fenêtre d'information   
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Centrer automatiquement la carte en ajustant tous les marqueurs sur l'écran
        map.fitBounds(bounds);
    }

    // Remplacez notre niveau de zoom de la carte une fois que notre fonction fitBounds fonctionne (Assurez-vous qu'elle ne s'exécute qu'une seule fois)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(2);
        google.maps.event.removeListener(boundsListener);
    });
    
}</script>

EXEMPLE D'INTEGRATION DE LA CARTE INTERACTIVE