Caricare dei markers in mappa di google

di il
1 risposte

Caricare dei markers in mappa di google

Ciao a tutti,
sto assemblando vari script di google maps per ottenere una mappa che si geolocalizzi nella posizione del browser al suo caricamento, che abbia la ricerca con autocompletamento e riposizionamento per chi ha la geolocalizzazione disattivata e che carichi dei markers .
Le tre cose separatamente le sono riuscite a fare partendo anche da questo tutorail proprio di google
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
Sono anche riuscito a mettere la geolocalizzazione, ma non riesco poi ad aggiungere dei markers che vado a prendere tramite ajax.
Anche questa cosa l'ho fatta ma in un'altra pagina dove creo solo i markers dopo aver fato la geolocalizzazione.
Quando ho cercato di mettere il tutto sull'esempio di google non mi va, ovvero non ho errore, ho anche messo degli alert per vedere se tutto man mano viene richiamato ma quello che non fa è aggiungere i markers.
Io credo che sostanzialmente o richiamo nel posto sbagliato la mia funzione per creare i markers o questi vengono a loro volta poi cancellati

Di seguito vi posto tutto il mi codice

di base definisco latAttuale e lonAttuale che poi passo alla mia funzione ajax per richiamare dei markres nelle vicinanze

la funzione initMap mi crea tutta la mappa con sopra l'input per fare la localizzazione a mano
all'intero di initMap richiamo la geolocaizzazione per centrare la mappa
dopo di che vado a richiamare caricaDati che mi crea i markers

come detto sia con degli alert sia con Fiddler ho visto che la funzione dei markers caricaDati va, ma poi non si aggiungono alla mappa
Potete darmi qualche suggerimento .
Grazie



        var markers = [];
        var map;
        var latAttuale = 45.4654219; //0;
        var lonAttuale = 9.18592430000001; // 0;


      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -33.8688, lng: 151.2195},
          zoom: 13
        });
        var input = /** @type {!HTMLInputElement} */(
            document.getElementById('pac-input'));

        var types = document.getElementById('type-selector');
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

        var autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo('bounds', map);



        

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

        var infoWindow = new google.maps.InfoWindow({ map: map });


	//////////////////
	/// qui faccio la geolocalizzazione del browser
	/////////////////

          // Try HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };


                latAttuale = position.coords.latitude;
                lonAttuale = position.coords.longitude;

              // alert("posizione attuale " +position.coords.longitude + ' --- ' + position.coords.latitude);
               infoWindow.setPosition(pos);
               
               
               //////////////////
               ///qui richiamo la funzione per caricare i markers
               //////////////////////
               
               caricaDati();
               
               
               
                infoWindow.setContent('Tu sei qui.');
                map.setCenter(pos);

               

            }, function () {
                handleLocationError(true, infoWindow, map.getCenter());
            });
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }




        var marker = new google.maps.Marker({
          map: map,
          anchorPoint: new google.maps.Point(0, -29)
        });

      


        autocomplete.addListener('place_changed', function() {
          infowindow.close();
          marker.setVisible(false);
          var place = autocomplete.getPlace();
          if (!place.geometry) {
            // User entered the name of a Place that was not suggested and
            // pressed the Enter key, or the Place Details request failed.
            window.alert("No details available for input: '" + place.name + "'");
            return;
          }

          // If the place has a geometry, then present it on a map.
          if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
          } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);  // Why 17? Because it looks good.
          }
          marker.setIcon(/** @type {google.maps.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(35, 35)
          }));
          marker.setPosition(place.geometry.location);
          marker.setVisible(true);

          var address = '';
          if (place.address_components) {
            address = [
              (place.address_components[0] && place.address_components[0].short_name || ''),
              (place.address_components[1] && place.address_components[1].short_name || ''),
              (place.address_components[2] && place.address_components[2].short_name || '')
            ].join(' ');
          }

          infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
          infowindow.open(map, marker);


        
         
        });

        // Sets a listener on a radio button to change the filter type on Places
        // Autocomplete.
        function setupClickListener(id, types) {
          var radioButton = document.getElementById(id);
          radioButton.addEventListener('click', function() {
            autocomplete.setTypes(types);
          });
        }

        setupClickListener('changetype-all', []);
        setupClickListener('changetype-address', ['address']);
        setupClickListener('changetype-establishment', ['establishment']);
        setupClickListener('changetype-geocode', ['geocode']);


      // 

      }



      function handleLocationError(browserHasGeolocation, infoWindow, pos) {
          infoWindow.setPosition(pos);
          infoWindow.setContent(browserHasGeolocation ?
                                'Error: The Geolocation service failed.' :
                                'Error: Your browser doesn\'t support geolocation.');
      }



      function caricaDati() {
          //richiamo le coordinate sul server passando la posizione attuale
        //  alert("carico" + latAttuale + ' ' + lonAttuale)
          $.ajax({

              //chiamata di tipo POST
              type: "POST",
              //indirizzo composto dal nome della pagina piu il nome del metodo
              url: "/DatiMappa.asmx/GetPuntiPerCoordinateArrayDinamic",
              //tipo dati json
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              //passo i parametri post 
              data: "{'posizione':{'Lat':" + latAttuale + ",'Lon':" + lonAttuale + "}}",
              cache: false,
              success: function (result) { impostaMarkers(result.d); alert(result.d); },
              failure: function (error) { alert(error.d); }
          });
      }
      function impostaMarkers(coordinate) {

//alert(coordinate);

          //cancello i vecchi markers
          for (var i = 0; i < markers.length; i++) {
              markers[i].setMap(null);
          }
          markers = [];
          //itero tutte le coordinate ricevute
          var latLon;
          var image1 = 'images/map_pointers_ombra.png';
          $.each(coordinate, function (index, item) {

              //creo il marker a partire dalla coordinata restituita
              latLon = new google.maps.LatLng(item.Lat, item.Lon);
              var marker = new google.maps.Marker({
                  position: latLon,
                  type: 'info',
                  map: map,
                  title: item.Titolo,
                  icon: image1
              });

             

              markers.push(marker);
              google.maps.event.addListener(marker, "click", function (e) {
                  infoWindow.setContent(item.Titolo);
                  infoWindow.open(map, marker);
              });
              //solo per test: sposto la posizione all'ultima coordinata ricevuta
              lat = item.Lat;
              lon = item.Lon;
          });
      }





    </script>

1 Risposte

  • Re: Caricare dei markers in mappa di google

    Ciao! Il problema dovrebbe essere dovuto al fatto che all'interno delle funzione "initMap" hai la seguente istruzione:
    
     var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -33.8688, lng: 151.2195},
            zoom: 13
        });
    
    In particolare, quel var dice che la variabile "map" è locale alla funzione, per cui una volta uscito da essa, la variabile viene distrutta. Se, come immagino, vuoi usare la versione "globale" di quella variabile allora ti basta semplicemente eliminare il var.
Devi accedere o registrarti per scrivere nel forum
1 risposte