How to change the zoom on a particular location in google maps api v3?

Asked

Viewed 691 times

0

I’m trying to get the map dee zoom into a certain markers location when they are created in Firebase.

I’ve already tried to use the

setZoom()
setCenter()

but what happens is this: inserir a descrição da imagem aqui

I’d like him to go over the correct location, for example: Has a markers of Barra Shopping, it goes straight to the shopping bar.

What I tried was this:

GM.js

function initMap() {
  var map;
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -1.000, lng: 62.000},
    mapTypeId: 'hybrid',
    zoom: 2,
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_CENTER
    },
    streetViewControl: false,
    rotateControl: false,
    fullscreenControl: false,
    styles: [
        {
          "featureType": "administrative",
          "elementType": "geometry",
          "stylers": [
            {
              "visibility": "off"
            }
          ]
        },
        {
          "featureType": "poi",
          "stylers": [
            {
              "visibility": "off"
            }
          ]
        },
        {
          "featureType": "road",
          "elementType": "labels.icon",
          "stylers": [
            {
              "visibility": "off"
            }
          ]
        },
        {
          "featureType": "transit",
          "stylers": [
            {
              "visibility": "off"
            }
          ]
        }
      ]
  });
  generateMarkerDBS();
  searchAllMarkers(map);

}

firebase.js

function searchAllMarkers(map){
    var locations = firebase.database().ref('/').child('aliansce');

    locations.on('value', function(keysSnapshot){

        // SE CONTER LOCAIS DA COMPANIA
        // IRÁ MOSTRAR OS MAKERS NO MAPA
        if(keysSnapshot.numChildren() > 0){
            locations.on('child_added', function(keysSnapshot){
                var markersCoordinatesNodes = firebase.database().ref('/aliansce/').child('' + keysSnapshot.key + '/marker/markerCoordinates/');
                markersCoordinatesNodes.on('value', function(coordinatesSnapshot){
                    if((coordinatesSnapshot.val().lat == null) && (coordinatesSnapshot.val().lng == null)){
                        alert("LAT ou LNG NULL's no DATABASE!!");
                    } else {
                        var markersDateNodes = firebase.database().ref('/aliansce/'+ keysSnapshot.key + '/marker/markerDateCreate/').child('dateDescription');
                        markersDateNodes.on('value', function(dateSnapshot){
                            var infowindow = [];
                            var arrMarkers = [];
                            var arrMarkers = new google.maps.Marker({
                                position: new google.maps.LatLng(coordinatesSnapshot.val().lat,coordinatesSnapshot.val().lng),
                                map: map,
                                title: keysSnapshot.key
                            });
                            map.setZoom(15);
                            map.panTo(arrMarkers.position);
                            arrMarkers.infowindow = new google.maps.InfoWindow({
                                position: new google.maps.LatLng(coordinatesSnapshot.val().lat,coordinatesSnapshot.val().lng),
                                content: 
                                '<div><strong>'+ keysSnapshot.key +'</strong><br></div>'+
                                '<div>'+ dateSnapshot.val() +'</div>',
                            });
                            arrMarkers.infowindow.open(map,arrMarkers);
                            arrMarkers.addListener('click', function(event,infowindow){
                                this.infowindow.open(map,arrMarkers);
                            });

                        });
                    }
                });
            });
        } else {
            alert("NÃO CONTÉM LOCAIS DA COMPANIA NO DATABASE");
        }
    });
}
  • in the code has no setCenter, I am not as tested but it is common for people to use the setCenter() without parameters, try something like this setCenter(new google.maps.LatLng(coordinatesSnapshot.val().lat,coordinatesSnapshot.val().lng))

  • @Neuberoliveira sorry I must have pasted the code when I gave Ctrl+z.. So I tried this and what happened was that wrong zoom. I think he’s not even pegand oo zoom values, because I left a center inside the map.

  • You are first giving setCenter and then Setzoom?

  • and where Voce called the setCenter? just to make clear the coordinates of your setCentermust be the same as the Mark that Voce wants to "focus on"

  • 1

    Guys already got it, thanks guys !

No answers

Browser other questions tagged

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