2017-10-20 37 views
-1

Je veux cliquer sur un marqueur de carte et il montre les informations ci-dessous la carte dans un div. J'ai ce code ci-dessous. Toujours montrer la même div, comment faire pour chaque marqueur ?. ................................................. .................................................. ............................Comment afficher des informations à partir d'un marqueur google dans une div?

.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <meta name="description" content="Custom Google map, with multiple markers, the clicking markers show the outside map div" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="css/styles.css" /> 
    </head> 
    <body > 
    <div id="map-canvas"></div> 
<div id="test"> 

    <h1>test</h1> 
<img src="https://www.google.org/assets/static/images/logo_googledotorg-171e7482e5523603fc0eed236dd772d8.svg" width="128" height="128" alt="Mountain View"> 

</div> 
    <!--scripts loaded here--> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCMJVE1N5mUEQaJFulw7omVluNrXqzOipk&callback=initMap" 
    type="text/javascript"></script>  
    <script src="js/scripts.js"></script> 
    </body> 
</html> 

.js

var map; 
var brooklyn = new google.maps.LatLng(-33.9, 151.2); 

var MY_MAPTYPE_ID = 'custom_style'; 

function initialize() { 

    var featureOpts = [ 
    { 
     stylers: [ 
     { hue: '#890000' }, 
     { visibility: 'simplified' }, 
     { gamma: 0.5 }, 
     { weight: 0.5 } 
     ] 
    }, 
    { 
     elementType: 'labels', 
     stylers: [ 
     { visibility: 'off' } 
     ] 
    }, 
    { 
     featureType: 'water', 
     stylers: [ 
     { color: '#890000' } 
     ] 
    } 
    ]; 

    var mapOptions = { 
    zoom: 12, 
    center: brooklyn, 
    mapTypeControlOptions: { 
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID] 
    }, 
    mapTypeId: MY_MAPTYPE_ID 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

    var styledMapOptions = { 
    name: 'Custom Style' 
    }; 

    var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions); 

    map.mapTypes.set(MY_MAPTYPE_ID, customMapType); 

    setMarkers(map, beaches); 

} 

    var gmarkers = []; 

var beaches = [ 
    ['Bondi Beach', -33.890542, 151.274856, 4], 
    ['Coogee Beach', -33.923036, 151.259052, 5], 
    ['Cronulla Beach', -34.028249, 151.157507, 3], 
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
    ['Maroubra Beach', -33.950198, 151.259302, 1] 
]; 

function setMarkers(map, locations) { 
    for (var i = 0; i < locations.length; i++) { 
    var beach = locations[i]; 
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     title: beach[0], 
     zIndex: beach[3] 
    }); 
    gmarkers.push(marker); 
     google.maps.event.addListener(marker, "click", function() { 
      $('#test').css('display', 'block'); 
        $(".dropdown").removeClass("is-expanded"); 
        var target = $('#test'); 
        $('html,body').animate({ 
          scrollTop: target.offset().top 
         }, 1000); 
        return false; 
     }); 
    } 
} 


google.maps.event.addDomListener(window, 'load', initialize); 

.css

html, body, #map-canvas { 
     height: 90%; 
     margin: 0px; 
     padding: 0px 
     } 
#test{ 
    display:none; 
} 
+0

Il semble que votre code a des erreurs dues à l'API Google en cours de chargement après votre le code fait. Pourriez-vous les corriger afin que nous ayons un exemple minimal, complet et vérifiable? https://stackoverflow.com/help/mcve –

+0

Désolé, je vais mettre le code complet. – FranciscoM

Répondre

0

Modifier le contenu de la div avec certaines données du marqueur, fo r exemple le titre:

google.maps.event.addListener(marker, "click", function() { 
    $('#test').text(this.getTitle()) 
    $('#test').css('display', 'block'); 
    $(".dropdown").removeClass("is-expanded"); 
    var target = $('#test'); 
    $('html,body').animate({ 
    scrollTop: target.offset().top 
    }, 1000); 
    return false; 
}); 

proof of concept fiddle

extrait de code:

var map; 
 
var brooklyn = new google.maps.LatLng(-33.9, 151.2); 
 

 
var MY_MAPTYPE_ID = 'custom_style'; 
 

 
function initialize() { 
 

 
    var featureOpts = [{ 
 
    stylers: [{ 
 
     hue: '#890000' 
 
    }, { 
 
     visibility: 'simplified' 
 
    }, { 
 
     gamma: 0.5 
 
    }, { 
 
     weight: 0.5 
 
    }] 
 
    }, { 
 
    elementType: 'labels', 
 
    stylers: [{ 
 
     visibility: 'off' 
 
    }] 
 
    }, { 
 
    featureType: 'water', 
 
    stylers: [{ 
 
     color: '#890000' 
 
    }] 
 
    }]; 
 

 
    var mapOptions = { 
 
    zoom: 12, 
 
    center: brooklyn, 
 
    mapTypeControlOptions: { 
 
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID] 
 
    }, 
 
    mapTypeId: MY_MAPTYPE_ID 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
 
    mapOptions); 
 

 
    var styledMapOptions = { 
 
    name: 'Custom Style' 
 
    }; 
 

 
    var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions); 
 

 
    map.mapTypes.set(MY_MAPTYPE_ID, customMapType); 
 

 
    setMarkers(map, beaches); 
 

 
} 
 

 
var gmarkers = []; 
 

 
var beaches = [ 
 
    ['Bondi Beach', -33.890542, 151.274856, 4], 
 
    ['Coogee Beach', -33.923036, 151.259052, 5], 
 
    ['Cronulla Beach', -34.028249, 151.157507, 3], 
 
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
 
    ['Maroubra Beach', -33.950198, 151.259302, 1] 
 
]; 
 

 
function setMarkers(map, locations) { 
 
    for (var i = 0; i < locations.length; i++) { 
 
    var beach = locations[i]; 
 
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
 
    var marker = new google.maps.Marker({ 
 
     position: myLatLng, 
 
     map: map, 
 
     title: beach[0], 
 
     zIndex: beach[3] 
 
    }); 
 
    gmarkers.push(marker); 
 
    google.maps.event.addListener(marker, "click", function() { 
 
     $('#test').text(this.getTitle()) 
 
     $('#test').css('display', 'block'); 
 
     $(".dropdown").removeClass("is-expanded"); 
 
     var target = $('#test'); 
 
     $('html,body').animate({ 
 
     scrollTop: target.offset().top 
 
     }, 1000); 
 
     return false; 
 
    }); 
 
    } 
 
} 
 

 

 
google.maps.event.addDomListener(window, 'load', initialize);
html, 
 
body, 
 
#map-canvas { 
 
    height: 80%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 

 
#test { 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div> 
 
<div id="test"> 
 
    <h1>test</h1> 
 
</div>