Как добавить несколько маркеров в Gmap3?

Question

Я пытаюсь добавить несколько маркеров в gmap3. но это не может работать. Если кто-нибудь есть идеи, как добавить несколько мест в gmap3 API.

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'
         })

Этот код просматривает только один маркер. Итак, как я могу добавить несколько маркеров на карте?

Answer 1

Итак, в конце концов я нашел Правильное решение для себя, спасибо, что поддержал меня.

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]);

Answer 2

Вы можете передать маркерList:

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)

            });
    }

Это работоспособный код. Надеюсь, это поможет вам.

Answer 3

создайте массив маркеров, а затем вставьте каждый новый маркерный объект в этот массив и, наконец, передайте массив в ваш marker(), следуйте этому ответу github https://github.com/jbdemonte/gmap3/issues/123, чтобы в случае любых будущих проблем обратиться к их странице 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) 

примите ответ, если он вам поможет.