2012-10-12 101 views
5

Estoy jugando con la API de Google Maps y parece que no puedo encontrar la manera de agregar una ventana emergente dentro del mapa que aparece con la información después de que alguien hace clic en el mapa personalizado icono que he agregado. El código que estoy usando está debajo y un ejemplo está en littlemarketbrasserie.comGoogle Maps API Ventana emergente personalizada

Cualquier ayuda sería muy apreciada.

<script type="text/javascript"> 
     function initialize() { 
     var mapOptions = { 
      zoom: 15, 
      panControl: false, 
      mapTypeControl: false, 
      center: new google.maps.LatLng(41.89924, -87.62756), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById('map_canvas'), 
             mapOptions); 

     var image = 'img/lm-logo-maps1.png'; 
     var myLatLng = new google.maps.LatLng(41.89924, -87.62756); 
     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      animation: google.maps.Animation.DROP, 
      icon: image, 
     }); 

     var styles = [ 
        { 
        stylers: [ 
         { hue: "#ff9f67" }, 
         { saturation: -20 }, 
         { gamma: 1.50 } 
        ] 
        },{ 
        featureType: "road", 
        elementType: "geometry", 
        stylers: [ 
         { lightness: 100 }, 
         { visibility: "simplified" } 
        ] 
        },{ 
        featureType: "road", 
        elementType: "labels.text.stroke", 
        stylers: [ 
         { visibility: "off" } 
        ] 
        }, 

        { 
        featureType: "water", 
        elementType: "geometry.fill", 
        stylers: [ 
         { visibility: "on" }, 
         { color: "#ffa066" }, 
         { lightness: 80 } 
        ] 
        } 
       ]; 

       map.setOptions({styles: styles}); 
     } 
    </script> 

Respuesta

6

Si usted está hablando de infowindow entonces se puede utilizar dentro de su función initialize

var popup=new google.maps.InfoWindow({ 
    content: "Hello" 
}); 
google.maps.event.addListener(marker, 'click', function(e) { 
    // you can use event object as 'e' here 
    popup.open(map, this); 
}); 

DEMO.

Además, si desea agregar un estilo personalizado infowindow, puede echar un vistazo a this y this example usando el cuadro de diálogo jQuery.

Cuestiones relacionadas