Liste des maps

Version imprimable

Liste des maps

bonjour,
jai des liens des villes je veux quand je clique sur un lien google map affiche les coordonnées
mon code ne marche pas correctement :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function detailMap(la, long, title) {
    var mapProp = {
        center: new google.maps.LatLng(la, long),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    $('#mapModal h4').html(title);
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(la, long),
    });
    marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', detailMap);

voici le code liste :

Code:

1
2
3
<span class="cursor-pointer" data-toggle="modal"  data-target="#mapModal" onclick="detailMap('${location_.latitude}', '${location_.longitude}', '${location_.adminArea}');">${location_.adminArea}</span>
.....
<span class="cursor-pointer" data-toggle="modal"  data-target="#mapModal" onclick="detailMap('${location_.latitude}', '${location_.longitude}', '${location_.adminArea}');">${location_.adminArea}</span>

C'est pas comme ça que ça marche, direction la doc :

Code:

1
2
3
4
        google.maps.event.addListener(mapEvent, 'click', function(event) {
// marker = new Marker...
            marker.setPosition(new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()));
        });

merci pour la réponse mais j'ai rien compris
au fait vous m'avez mal compris, je clique pas sur le map je clique sur des liens dans un tableau

le code fonctionne mais j'ai un probleme d'affichage le map s'affiche a moitié
jai rajouté ce code mais :

Code:

1
2
3
4
5
$(document).ready(function () {
                $("#mapModal").on("shown.bs.modal", function () {
                    initialise();
                });
            });

voici le code complet :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
            function initialize(la, long, title) {
                var mapProp = {
                    center: new google.maps.LatLng(la, long),
                    zoom: 16,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                $('#mapModal h4').html(title);
                var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(la, long),
                });
 
                marker.setMap(map);
            }
            //google.maps.event.addDomListener(window, 'load', detailMap);
            $(document).ready(function () {
                $("#mapModal").on("shown.bs.modal", function () {alert('ok');
                    initialise();
                });
            });
        </script>