Как использовать инфобокс вместо infwindow?

Question

Это работает нормально прямо сейчас. Информационное окно просто слишком большое и некрасивое. Я хочу реализовать инфобокс, так как он более настраиваемый. Может ли кто-нибудь подсказать мне, как использовать объект infobox для создания всплывающего окна с маркером?

var map,geocoder;
var bound = new google.maps.LatLngBounds();
function initializeMap() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(39.88445,-86.11084);
    var myOptions = {
    maxZoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
}
function codeAddress() {
    var infowindow = new google.maps.InfoWindow({}); 
    $('.eachLocation').each(function(index) {
        var counter=index+1;
        var addy = $(this).parent().find('span.LocAddHidden').text();
        geocoder.geocode( { 'address': addy}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) 
            {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map,               
                    title:addy,
                  });   
                //Adding a click event to the marker 
                google.maps.event.addListener(marker, 'click', function() { 
                    infowindow.setContent('<div id=\"infowindow\" style="width:235px; height:105px;>'
                                        +'Hello World'+'</div>'); 
                    infowindow.open(map, this); 
                 });
                bound.extend(marker.getPosition());
                map.fitBounds(bound);
            } 
        });//geocode END
        counter=counter+1;
    });
}

Answer 1

Вы должны прочитать этот пример, предоставленный Google: http://google -maps-utility-library-v3.googlecode.com / svn / trunk / infobox / docs / examples.html

Вы найдете основной исходный код здесь: view-source: http://google -maps-utility-library-v3.googlecode.com / svn / trunk / infobox / examples / infobox-basic.html

Вам нужно добавить этот плагин на свою страницу: http://google -maps-utility-library-v3.googlecode.com / svn / trunk / infobox / src / infobox.js

Затем вы можете запустить информационное окно вместо информационного окна, например, в вашем случае:

function codeAddress() {
    var infoboxOptions = {
             content: ''
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(0, 0)
            ,zIndex: null
            ,boxStyle: { 
              background:''
              ,opacity: 0.75
             }
            ,closeBoxMargin: "2px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1,1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
        };  
    var ib = new InfoBox(infoboxOptions); 
    $('.eachLocation').each(function(index) {
        var counter=index+1;
        var addy = $(this).parent().find('span.LocAddHidden').text();
        geocoder.geocode( { 'address': addy}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) 
            {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map,               
                    title:addy,
                    html:  'Your HTML/text...'
                  });   
                //Adding a click event to the marker 
                google.maps.event.addListener(marker, 'click', function() { 
                    ib.setContent(marker.html);
                    ib.open(map,this);  
                 });
                bound.extend(marker.getPosition());
                map.fitBounds(bound);
            } 
        });//geocode END
        counter=counter+1;
    });
}

В моем случае, чтобы получить хороший div с моим собственным css, я использую вмаркер:

html: $ (this) .html ()

, который получает содержимое каждого '.myClass' (.eachLocation в вашем случае)