Visualizzazione dei risultati da 1 a 9 su 9
  1. #1

    Rimuovere il Marker di Google Maps

    Salve a tutti, unendo alcuni script di Google Maps volevo ottenere una mappa con un Marker personalizzato (con una mia icona) e una finestra popup (InfoWindow) già aperta al caricamento della mappa. Sono riuscito a fare tutto, l'unico inconveniente è che non sono riuscito ad eliminare il classico marker di Google. Praticamente ci sono il marker di Google e la mia icona che si sovrappongono uno sopra l'altro. Ho fatto varie prove ma non riesco proprio a risolvere. Cortesemente mi date una mano?




    Di seguito ho scritto il codice della mappa e poi ho allegato uno screen per far capire meglio il risultato ottenuto.




    CODICE MAPPA:

    codice:
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    
    
    <script>
    function initialize() {
      var myLatlng = new google.maps.LatLng(41.9027835,12.4963655);
      var mapOptions = {
        zoom: 10,
        center: myLatlng
      };
    
    
    
    
      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      
      var image = 'images/marker-icon.png';
      var myLatLng = new google.maps.LatLng(41.9027835,12.4963655);
      var beachMarker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: image
      });
    
    
    
    
      var contentString = 'Testo testo testo';
    
    
    
    
      var infowindow = new google.maps.InfoWindow({
          content: contentString
      });
    
    
    
    
      var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'TESTO'
      });
        infowindow.open(map,marker);
    }
    
    
    
    
    google.maps.event.addDomListener(window, 'load', initialize);
    
    
    </script>
    Immagini allegate Immagini allegate

  2. #2
    Utente di HTML.it
    Registrato dal
    Dec 2010
    Messaggi
    3,660
    ciao,
    elimina il codice seguente:

    codice:
    var marker =new google.maps.Marker({
          position: myLatlng,
          map: map,
          title:'TESTO'
      });
    


    e modifica la riga seguente


    infowindow.open(map,marker);

    in


    infowindow.open(map,beachMarker);

  3. #3
    ...benissimo, ora è ok! Ho notato solo una cosa (rispetto allo script originale) una volta chiusa la finestra popup (InfoWindow) non è più possibile riaprirla, se clicco sul marker non si apre più...come potrei risolvere?

  4. #4
    Utente di HTML.it
    Registrato dal
    Dec 2010
    Messaggi
    3,660
    per poter fare in modo di aprire la infowindow quando vuoi devi applicare un listener al click del marker. Vedi la documentazione di google, di esempi cosi ce ne sono un sacco.

  5. #5
    ...già ho visto ma o sono script diversi oppure ho fatto già delle prove ma senza successo. A dire il vero lo script originale aveva già questa funzionalità, ma, da quando ho inserito quella del marker personalizzato, non riapre più la infowindow. Di seguito scrivo lo script originale (senza marker personalizzato), magari ho tralasciato io qualcosa nel modificarlo:


    codice:
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    
    
    <script>
    
    
    function initialize() {
      var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
      var mapOptions = {
        zoom: 4,
        center: myLatlng
      };
    
    
      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    
    
      var contentString = '<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
          '<div id="bodyContent">'+
          '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
          'sandstone rock formation in the southern part of the '+
          'Northern Territory, central Australia. It lies 335#km (208#mi) '+
          'south west of the nearest large town, Alice Springs; 450#km '+
          '(280#mi) by road. Kata Tjuta and Uluru are the two major '+
          'features of the Uluru - Kata Tjuta National Park. Uluru is '+
          'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
          'Aboriginal people of the area. It has many springs, waterholes, '+
          'rock caves and ancient paintings. Uluru is listed as a World '+
          'Heritage Site.</p>'+
          '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
          'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
          '(last visited June 22, 2009).</p>'+
          '</div>'+
          '</div>';
    
    
      var infowindow = new google.maps.InfoWindow({
          content: contentString
      });
    
    
      var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Uluru (Ayers Rock)'
      });
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
      });
        infowindow.open(map,marker);
        <!-- Ripetendo questa stringa al di fuori di "addListener" si ottiene l'apertura della popup (info window) automaticamente, cioè si apre appena caricata la mappa, senza dover cliccare sull'icona del marcatore... -->
    }
    
    
    google.maps.event.addDomListener(window, 'load', initialize);
    
    
    </script>

  6. #6
    Il listener che dovresti aggiungere è questo:
    codice:
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
      });

  7. #7
    Ciao lucavizzi ho provato come mi hai consigliato ma non funziona (ora la infowindow non si apre proprio, neanche al primo caricamento della mappa).

    Di seguito ti posto come ho provato, magari ho scritto male qualcosa:


    codice:
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    
    
    <script>
    
    
    function initialize() {
      var myLatlng = new google.maps.LatLng(41.9027835,12.4963655);
      var mapOptions = {
        zoom: 10,
        center: myLatlng
      };
    
    
      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      
      var image = 'images/marker-icon.png';
      var myLatLng = new google.maps.LatLng(41.9027835,12.4963655);
      var beachMarker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: image
      });
    
    
      var contentString = 'Testo testo testo';
    
    
      var infowindow = new google.maps.InfoWindow({
          content: contentString
      });
      
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
      });
      
      infowindow.open(map,beachMarker);
      
    }
    
    
    google.maps.event.addDomListener(window, 'load', initialize);
    
    
    </script>

  8. #8
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Non sia apre perché va in errore vuoi forzare un evento ad una variabile (marker) che non esiste
    Ed ora giochiamo a scopri l'errore!!!
    Se prima usavo la variabile marker e l'ho sostituita con beachMarcker nel addListener cosa dovrò mettere?
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  9. #9
    ...ahhh, capito. Corretto e provato, ora funziona!
    Grazie mille Andrea per la correzione e grazie anche a Vindav e lucavizzi per avermi messo sulla buona strada
    Ultima modifica di Serpicothebest; 17-07-2015 a 20:30

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.