aggiungere fumetto cliccando sul marker delle mappe di google

[allin81]

ciao a tutti
vorrei poter aprire un fumetto quando clicco sulla mappa di google presente sul mio sito.

Come potrei adattare qualcosa al mio codice?

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 
function load(){
 
var point = new google.maps.LatLng(<?=$indirizzo?>);

    var myMapOptions = {
    scrollwheel: false,
    navigationControl: true,
    mapTypeControl: true,
    scaleControl: true,
    draggable: true,
    zoom: 13,
    center: point,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

var map = new google.maps.Map(document.getElementById("map"),myMapOptions);

var image = new google.maps.MarkerImage(
  'gif/marker-viola.png',
  new google.maps.Size(50,50),
  new google.maps.Point(0,0),
  new google.maps.Point(25,50)
);

var shadow = new google.maps.MarkerImage(
  'gif/shadow.png',
  new google.maps.Size(79,50),
  new google.maps.Point(0,0),
  new google.maps.Point(25,50)
);

var shape = {
  coord: [29,1,32,2,34,3,35,4,36,5,37,6,38,7,39,8,39,9,40,10,41,11,41,12,41,13,42,14,42,15,42,16,42,17,42,18,42,19,42,20,42,21,41,22,41,23,41,24,40,25,40,26,39,27,39,28,38,29,38,30,37,31,37,32,36,33,35,34,35,35,34,36,33,37,33,38,32,39,31,40,30,41,30,42,29,43,28,44,27,45,27,46,26,47,25,48,24,48,23,47,23,46,22,45,21,44,20,43,19,42,18,41,18,40,17,39,16,38,15,37,15,36,14,35,13,34,13,33,12,32,11,31,11,30,10,29,10,28,9,27,9,26,8,25,8,24,8,23,7,22,7,21,7,20,7,19,7,18,7,17,7,16,7,15,8,14,8,13,8,12,9,11,9,10,10,9,10,8,11,7,12,6,13,5,14,4,16,3,17,2,20,1,29,1],
  type: 'poly'
};

var marker = new google.maps.Marker({
  icon: image,
  shadow: shadow,
  shape: shape,
  map: map,
  position: point
});

 
}
 
</script>

Grazie

[cavicchiandrea]

https://developers.google.com/maps/d...owindow-simple

[allin81]

grazie andrea, non era difficile alla fine leggendo l'esempio ufficiale.

Ho solo un problemino:
Nella mappa visualizzo l'hotel che l'utente sta vedendo ed anche gli altri hotels della zona con un marker diverso.
Quando clicco sui marker si apre il fumetto senza problemi, l'unico problemino e' che quando clicco su un marker non si chiude il fumetto dell'altro marker aperto in precedenza.
Quindi se clicco su 10 marker mi troverò con 10 fumetti aperti.
Come potrei chiuderli in automatico?
Questo e' il codice che uso attualmente

  <script src="http://maps.google.com/maps/api/js"></script>
        <script>
            window.onload = function() {
                initialize();
            };
        
            function initialize() {
                var myLatlng = new google.maps.LatLng(<?=$indirizzo?>);

                var myOptions = {
                    scrollwheel: false,
                    navigationControl: true,
                    mapTypeControl: true,
                    scaleControl: true,
                    draggable: true,
                    zoom: 13,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                
                var map = new google.maps.Map(document.getElementById("map"), myOptions);
                
var image = new google.maps.MarkerImage(
  'gif/marker-viola.png',
  new google.maps.Size(50,50),
  new google.maps.Point(0,0),
  new google.maps.Point(25,50)
);

var image2 = new google.maps.MarkerImage(
  'gif/marker-blu.png',
  new google.maps.Size(50,50),
  new google.maps.Point(0,0),
  new google.maps.Point(25,50)
);


var shadow = new google.maps.MarkerImage(
  'gif/shadow.png',
  new google.maps.Size(79,50),
  new google.maps.Point(0,0),
  new google.maps.Point(25,50)
);

var shape = {
  coord: [29,1,32,2,34,3,35,4,36,5,37,6,38,7,39,8,39,9,40,10,41,11,41,12,41,13,42,14,42,15,42,16,42,17,42,18,42,19,42,20,42,21,41,22,41,23,41,24,40,25,40,26,39,27,39,28,38,29,38,30,37,31,37,32,36,33,35,34,35,35,34,36,33,37,33,38,32,39,31,40,30,41,30,42,29,43,28,44,27,45,27,46,26,47,25,48,24,48,23,47,23,46,22,45,21,44,20,43,19,42,18,41,18,40,17,39,16,38,15,37,15,36,14,35,13,34,13,33,12,32,11,31,11,30,10,29,10,28,9,27,9,26,8,25,8,24,8,23,7,22,7,21,7,20,7,19,7,18,7,17,7,16,7,15,8,14,8,13,8,12,9,11,9,10,10,9,10,8,11,7,12,6,13,5,14,4,16,3,17,2,20,1,29,1],
  type: 'poly'
};
                 
                var infowindow = new google.maps.InfoWindow({
                    content: "<div class=\"row\"><div class=\"col-md-4\"><img src=\"immagini_hotel/<?=$cartella?>/piccole/<?=$foto?>\" class=\"img-rounded\"></div><div class=\"col-md-3\" style=\"background-color: #cccccc\">seconda</div><div class=\"col-md-2\" style=\"background-color: #ergd3e\">terza</div><div class=\"col-md-3\" style=\"background-color: #000000\">quarta</div></div>"
                });
                 
                
                var marker = new google.maps.Marker({
                    icon: image,
                    position: myLatlng,
                    map: map,
                    title: "titolo"
                });

                
<?php
//faccio la query per estrarre gli altri markers da mostrare nella mappa
$query_altri_marker = "select id, cartella, indirizzo from albergo where in_vendita= \"1\" and cartella !=\"$cartella\"";
$risultato_altri_marker = @mysql_query($query_altri_marker) or die("Impossibile eseguire l'interrogazione altri marker"); 
$righe_altri_marker = mysql_num_rows($risultato_altri_marker);
while ($riga_altri_marker = mysql_fetch_array($risultato_altri_marker)) {
$id_hotel_mappa = $riga_altri_marker['id'];
$indirizzo_altri_marker = $riga_altri_marker['indirizzo'];
$cartella_altro_hotel = $riga_altri_marker['cartella'];

        $visualizza_markers="                
        var latlng_newmarker = new google.maps.LatLng($indirizzo_altri_marker);
                var marker_$id_hotel_mappa = new google.maps.Marker(
                {
                position: latlng_newmarker,
                map: map,
                icon: image2,
                flat: true
                }
                );
                
                var infowindow_$id_hotel_mappa = new google.maps.InfoWindow({
                    content: \"$riga_altri_marker[cartella]\"
                });
                
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
                });
                
                google.maps.event.addListener(marker_$id_hotel_mappa, 'click', function() {
                    infowindow_$id_hotel_mappa.open(map,marker_$id_hotel_mappa);
                });
                
        ";

echo"$visualizza_markers";
}
?>
                
                
                
                
                
            }
        </script>