1
votes

Comment ajouter plusieurs marqueurs dans Gmap3?

J'essaye d'ajouter plusieurs marqueurs dans gmap3. mais ça ne peut pas marcher. Si quelqu'un a une idée comment ajouter plusieurs emplacements dans l'API gmap3.

var contactmap = {

         lat: 24.091328,
         lng: 38.037067
      };

      $('#tm-map')
         .gmap3({
            zoom: 13,
            center: contactmap,
            scrollwheel: false,
            mapTypeId: "shadeOfGrey",
            mapTypeControlOptions: {
               mapTypeIds: [google.maps.MapTypeId.ROADMAP, "shadeOfGrey"]
            }
         })

 .marker({
            position: contactmap,
            icon: 'assets/img/map-marker.gif'
         })

Ce code n'affiche qu'un seul marqueur. Alors, comment puis-je ajouter plusieurs marqueurs dans la carte?.

php javascript jquery html

3 commentaires

Copie possible de API Google Maps JS v3 - Exemple de marqueur multiple simple < / a>

Désolé ça ne marche pas. ce n'est pas une api google map ok c'est une api gmap3.net

gmap3.net est l'API Google Maps .... ils prétendent même "la syntaxe Google Maps".

4 Réponses :

0
votes

créez un tableau de marqueurs puis poussez chaque nouvel objet marqueur dans ce tableau et enfin passez le tableau dans votre marker () suivez cette réponse github https://github.com/jbdemonte/gmap3/issues/123 pour tout problème futur, consultez leur page github.

    // this is how you create array

    var multiadress = [{latLng:[1,2],content:"abcd"},{latLng:[3,4],content:"pqr"},{latLng:[6,7],content:"kbc"}] 
    var markers = [];
    $.each(multiadress, function(key, val){

                var latLng = val.latLng

                markers.push({
                    position: latLng,
                    content: val.content
                }); 
            });




    var contactmap = {

             lat: 24.091328,
             lng: 38.037067
          };

          $('#tm-map')
             .gmap3({
                zoom: 13,
                center: contactmap,
                scrollwheel: false,
                mapTypeId: "shadeOfGrey",
                mapTypeControlOptions: {
                   mapTypeIds: [google.maps.MapTypeId.ROADMAP, "shadeOfGrey"]
                }
             })

     .marker(markers)

acceptez la réponse si cela vous aide.

1 commentaires

désolé ne fonctionne pas me dire une chose où je peux ajouter plusieurs tableaux de lat et lang?

2
votes

J'ai finalement trouvé la bonne solution avec moi-même alors merci de me soutenir.

var locations = [
  ['Yanbu Saudi Arabia', 24.091328, 38.037067, 1],
  ['Yanbu Saudi Arabia', 24.005421, 38.197395, 2]
];

var map = new google.maps.Map(document.getElementById('tm-map'), {
  zoom: 10,
  center: new google.maps.LatLng(24.005421, 38.197395),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;
var markers = [];

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  markers.push(marker);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

console.log(markers[0]);

1 commentaires

Mh ... il n'y a pas de gmap3 dans votre solution ... mais dans votre question.

0
votes

Vous pouvez transmettre une markerList:

var markers = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 }
    ];

    function markerSetup(markers){

      var mapOptions = {
                    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                    zoom: 10,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var icon = {
                    url: "../Content/Images/Car.png", // url
                    scaledSize: new google.maps.Size(50, 60), // scaled size
                    origin: new google.maps.Point(0, 0), // origin
                    anchor: new google.maps.Point(0, 0) // anchor
                };

                // alert(markers[0].lat)
                var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);


                var trafficLayer = new google.maps.TrafficLayer();
                trafficLayer.setMap(map);
                // map.setMap(trafficLayer);

                var infoWindow = new google.maps.InfoWindow();
                var lat_lng = new Array();
                var latlngbounds = new google.maps.LatLngBounds();
                for (i = 0; i < markers.length; i++) {
                    var data = markers[i]
                    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                    lat_lng.push(myLatlng);
                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        icon: icon,
                        map: map,
                        title: data.title
                    });
                    latlngbounds.extend(marker.position);
                    (function (marker, data) {
                        google.maps.event.addListener(marker, "click", function (e) {
                            infoWindow.setContent(data.description);
                            infoWindow.open(map, marker);
                        });
                    })(marker, data);
                }
                map.setCenter(latlngbounds.getCenter());
                map.fitBounds(latlngbounds);
                map.setZoom(12)

            });
    }

C'est du code réalisable. J'espère que cela vous aidera.

0 commentaires

0
votes

Je le fais comme ceci:

$('#tm-map')
     .gmap3({
        zoom: 13,
        center: contactmap,
        scrollwheel: false,
        mapTypeId: "shadeOfGrey",
        mapTypeControlOptions: {
           mapTypeIds: [google.maps.MapTypeId.ROADMAP, "shadeOfGrey"]
        }
     })
     .marker(
       {position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'},
       {position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'},
       {position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'},
       {position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'}
     )

0 commentaires