How to get the total marker (Marker) on google maps?

Asked

Viewed 269 times

0

I’m using Places search box. Here is the code:

function initAutocomplete() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -33.8688, lng: 151.2195},
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  // Create the search box and link it to the UI element.
  var input = document.getElementById('pac-input');
  var searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  // Bias the SearchBox results towards current map's viewport.
  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });

  var markers = [];
  // Listen for the event fired when the user selects a prediction and retrieve
  // more details for that place.
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }

    // Clear out the old markers.
    markers.forEach(function(marker) {
      marker.setMap(null);
    });
    markers = [];

    // For each place, get the icon, name and location.
    var bounds = new google.maps.LatLngBounds();
    places.forEach(function(place) {
      var icon = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      // Create a marker for each place.
      markers.push(new google.maps.Marker({
        map: map,
        icon: icon,
        title: place.name,
        position: place.geometry.location
      }));

                    //Obter lat long do marcador
                    var marker = new google.maps.Marker({
                        map: map,
                        title: place.name,
                        position: place.geometry.location
                    });
                    lat = marker.getPosition().lat();
                    long = marker.getPosition().lng();
                    markers.push(marker);

      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });
    map.fitBounds(bounds);
  });
}

When user enter wrong name unintentionally, can show multiple markers on google maps.

inserir a descrição da imagem aqui

If the marker is greater than 1, show warning and clear google maps to search again.

Some solution ?

javascript google-maps

  • Your markers are in the Array markers, so you just check the size of this Array with the length, thus: if (markers.length > 1) { //.... do something }.

  • Yes, each 1 marker, it create 2 in the array. If it finds 3 markers, it gets 6 in the array. That’s not weird ?

  • 1

    Within your places.forEach, note that you are creating two Marker objects, that is, every iteration on foreach, create two objects in the Array. I don’t know why you need it so, because if it’s just to get the lat/lng from the marker, it’s not necessary. Therefore, this way is duplicating your final Array.

  • The problem was on the line markers.push(marker);, I need to catch lat and long from the marker.

  • Now it’s easy as you said, check Array markers.

  • Fine then, I’ll put it as an answer. Just mark it as correct, please.

  • @Douglasgarrido, long time

Show 2 more comments

1 answer

1


As I had commented, you have already corrected the need to create two Marker objects in the Array.

After that, you can check the number of markers in the variable markers using the property length, being like this:

if (markers.length > 1) {
    //.... faça algo aqui
}

Browser other questions tagged javascript google-maps

You are not signed in. Login or sign up in order to post.