Rimuovere il Marker di Google Maps

[Serpicothebest]

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:

<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>

[Vindav]

ciao,
elimina il codice seguente:

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

[Serpicothebest]

...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?

[Vindav]

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.

[Serpicothebest]

...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:

<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>

[lucavizzi]

Il listener che dovresti aggiungere è questo:

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });

[Serpicothebest]

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:

<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>

[cavicchiandrea]

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?

[Serpicothebest]

...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