2012-10-12 43 views
5

Tôi đang rối tung với API Google Maps và tôi dường như không thể tìm ra cách thêm cửa sổ bật lên trong bản đồ đi kèm với thông tin sau khi ai đó nhấp vào bản đồ tùy chỉnh biểu tượng tôi đã thêm. Mã tôi đang sử dụng bên dưới và ví dụ là trên littlemarketbrasserie.comGoogle Maps API Custom Pop-Up

Mọi trợ giúp sẽ được đánh giá cao.

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

Trả lời

6

Nếu bạn đang nói về infowindow sau đó bạn có thể sử dụng bên trong initialize chức năng của bạn

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.

Ngoài ra nếu bạn muốn thêm kiểu tùy chỉnh infowindow thì bạn có thể xem thisthis example bằng hộp thoại jQuery.