简体   繁体   中英

Auto adjustment of InfoWindow position on Google Maps

I've got Django template with Google Maps v3 with custom InfoWindows. On mouseover event JavaScript draws my InfoBox window and then auto adjust it position on map. Map moves to position where window displays without overlaps. How can I disable adjustment?

       var latlng = new google.maps.LatLng(47.517201, 7.03125);


        var map_options = {
            zoom: 2,
            center: latlng,
            scrollwheel: false,
            mapTypeControl: false,
            streetViewControl: false,
            overviewMapControl: false,
            zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.SMALL 
            },
            mapTypeId: google.maps.MapTypeId.TERRAIN,
        };

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

        google.maps.event.addListener(map, 'zoom_changed', function() {
            map.setOptions({scrollwheel: true});
        });

        var fm_infowindow = new Array();
        var am_infowindow = new Array();
        var pm_infowindow = new Array();

        {% for object in future_object_list %}
            var fm_latlng_{{ forloop.counter }} = new google.maps.LatLng({{object.abscissa}}, {{object.ordinate}});
            var futuremap_{{ forloop.counter }} = new google.maps.Marker({
                position: fm_latlng_{{ forloop.counter }},
                    map: map,
                    icon: '/media/images/dot-green.png',
            });

            fm_infowindow[{{ forloop.counter }}] = new InfoBox({
                content: "<div style='width: 150px; float: left;'><img src='{% thumbnail object.photo 150x98 crop %}' alt='{{ object.title }}' /></div><div style='width: 150px; float: left; padding-left: 5px; font-size: 11px;'><b>{{ object.title }}</b><br /><br />{{ object.country.name }}, <nobr>{{ object.date|date:"F Y" }}</nobr><br /><br />{{ object.info }}</div>",
                boxStyle: { 
                    background: "url('/media/images/black_arrow_big.png') no-repeat",
                            width: "310px",
                    height: "165px",
                    padding: "40px 30px 10px 30px",
                    margin: "0px 0px 0px -185px",
                        },
                closeBoxURL: '',
                alignBottom: true,
            });

            google.maps.event.addListener(futuremap_{{ forloop.counter }}, 'mouseover', function() {
                am_infowindow[1].close();
                fm_infowindow[{{ forloop.counter }}].open(map, futuremap_{{ forloop.counter }});
            });
            google.maps.event.addListener(futuremap_{{ forloop.counter }}, 'mouseout', function() {
                fm_infowindow[{{ forloop.counter }}].close(map, futuremap_{{ forloop.counter }});
            });

        {% endfor %}

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

I'm using that library and it has property "disableAutoPan" as InfoWindow.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM