API Google Maps Javascript возвращает статическое изображение - PullRequest
2 голосов
/ 23 февраля 2012

Я загружаю googlemap через AJAX и по какой-то причине он возвращает статическое изображение карты (по центру правильно), но я не могу панорамировать, масштабировать или любые другие элементы управления, которые немного бесполезны. Вот javascript и HTML, которые я ввожу через appendChild ()

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" language="JavaScript"></script>
<script type="text/javascript" language="JavaScript">

    var map;

    var map_icon_green = new google.maps.MarkerImage("http://www.mysite.com/images/site/map/green_pointer.png",
        new google.maps.Size(12,20),
        new google.maps.Point(0,0));

    var map_icon_blue = new google.maps.MarkerImage("http://www.mysite.com/images/site/map/blue_pointer.png",
        new google.maps.Size(12,20),
        new google.maps.Point(0,0));

    var map_icon_yellow = new google.maps.MarkerImage("http://www.mysite.com/images/site/map/yellow_pointer.png",
        new google.maps.Size(12,20),
        new google.maps.Point(0,0));

    var map_icon_red = new google.maps.MarkerImage("http://www.mysite.com/images/site/map/red_pointer.png",
        new google.maps.Size(12,20),
        new google.maps.Point(0,0));

    var map_icon_shadow = new google.maps.MarkerImage("http://www.mysite.com/images/site/map/shadow.png",
        new google.maps.Size(28,20),
        new google.maps.Point(-6,0));

    var map_crosshair = new google.maps.MarkerImage("http://www.mysite.com/images/site/cross-hair.gif",
        new google.maps.Size(17,17),
        new google.maps.Point(0,0));




    alert('here');
    var google_place_add_interval = 0;
    function google_place_add(map) {
        if(map.getCenter()!=null) {
            cMarker = new google.maps.Marker({
                map: map,
                icon: map_crosshair
            });
            var center = map.getCenter();

            cMarker.setPosition(map.getCenter());
            document.getElementById("gallery_map_points_1845187_long").value=center.lng();
            document.getElementById("gallery_map_points_1845187_lat").value=center.lat();

             google.maps.event.addListener(map, 'center_changed', function() { 
                var center = map.getCenter(); 
                cMarker.setPosition(center); 
                document.getElementById("gallery_map_points_1845187_long").value=center.lng();
                document.getElementById("gallery_map_points_1845187_lat").value=center.lat();
            }); 
            window.clearInterval(google_place_add_interval);
        }
    }function gallery_map_upload_1845187() {
        var myOptions = {
            zoom: 9,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel:false
        }



        map = new google.maps.Map(document.getElementById('gallery_map_loader_1845187'),myOptions);

         map.setCenter(new google.maps.LatLng(53.42,-1.242));


        map.disableDoubleClickZoom = false;


            //var customUI = map.getDefaultUI();
            //customUI.controls.scalecontrol = false;
            //map.setUI(customUI);

        function TextualLocationFinder() {

            // Creates a one DIV for each of the buttons and places them in a container
            // DIV which is returned as our control element. We add the control to
            // to the map container and return the element for the map class to
            // position properly.

            var container = document.createElement("div");


            var search_text = document.createElement("input");
            search_text.type='text';
            search_text.id='map_location_search_input';



            var search_button = document.createElement("input");
            search_button.type='button';
            search_button.value = 'Search';

            container.style.marginLeft = '5px';

            google.maps.event.addDomListener(search_button, 'click', function() {
                var geocoder = new google.maps.Geocoder();
                        geocoder.geocode( { 'address': document.getElementById('map_location_search_input').value,'region': "UK"}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {  
                            map.setCenter(results[0].geometry.location);
                            map.setZoom(13);

                        } else {
                            alert(document.getElementById('map_location_search_input').value + " not found");
                        }
                    });
                });



                container.appendChild(search_text);
                container.appendChild(search_button);

                return container;   

            }
            alert('load');
            map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(TextualLocationFinder());


            //map.addControl(new TextualLocationFinder());

            map.streetViewControl = false;      
            google_place_add_interval = setInterval("google_place_add(map)", 500 );
}


function map_create_marker(point,html,icon) {
    var marker =    new google.maps.Marker({
        position: point,
        map: map,
        icon: icon
    });

    if(html!="") {
        marker['number'] = 1;
        var infowindow = new google.maps.InfoWindow({
                content: html
        });
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
        });
    }

    return marker;
}
var map_set_center = 0;
function map_load_resize() {
    if(map_set_center==0) {
         map.setCenter(new google.maps.LatLng(53.42,-1.242));
    }
    map_set_center = 1;
}

</script>
<table><tr><td class="field_name field_padding_min" valign="top">Include Map Location:</td><td><input onclick="gallery_photo_create_map(this,'1845187');" id="map_location_1845187" name="map_location" type="checkbox" value="1" />
            <span class="form_hint">Check this to add your photo to a map.</span> <span class="small_text red_highlight"><strong>The location you enter will be viewable by others</strong></span>
            <input type="hidden" name="gallery_map_points_lat" id="gallery_map_points_1845187_lat" value=""/>
            <input type="hidden" name="gallery_map_points_long" id="gallery_map_points_1845187_long" value=""/>
            </td></tr>
            <tr><td colspan="2"><div id="gallery_map_loader_1845187" ></div></td></tr>
            </table>

Для справки: эта функция вызывается при нажатии флажка:

function gallery_photo_create_map(checkbox,loader) {
    if(!loader){
        loader = '';
    }
    if(checkbox.checked==true) {
        document.getElementById('gallery_map_loader'+loader).style.height = '200px';
        ShowHide('gallery_map_loader'+loader,'visible');
        if(gallery_photo_create_map_check==0) {
            //gallery_map_upload();
            func_name = 'gallery_map_upload'+loader;
            window[func_name]();
        }

        gallery_photo_create_map_check= 1;

    }
    else  {
        document.getElementById('gallery_map_loader'+loader).style.height = '0px';
        ShowHide('gallery_map_loader'+loader,'hidden');
    }
}

Ответы [ 3 ]

4 голосов
/ 23 февраля 2012

Вы, похоже, используете код для Google Maps API V3 и V2. Это нежизнеспособно.

Пример: вы ссылаетесь на new GLatLng в вашей функции map_load_resize. Вам нужно изменить v2 на ссылки на их эквивалентные ссылки на V3. Например, new GLatLng должно быть new google.maps.LatLng.

3 голосов
/ 01 марта 2012

Ваше событие при проверке клика неверно, попробуйте gallery_photo_create_map(this,'_1845187');

Функция ShowHide здесь отсутствует, поэтому я отметил ее и установил глобальную var gallery_photo_create_map_check = 0

это сработало для меня. enter image description here

2 голосов
/ 29 февраля 2012

После небольшого взлома вашего кода я получил его на работу.

Во-первых, вам нужно установить точный размер для используемого вами div, и вам нужно вызвать событие onload внутри элемента body.

Взгляните сюда: Ошибка карты Google: a равно нулю

Вы, вероятно, не можете увеличить, потому что в вашем коде есть следующие строки:

map.disableDoubleClickZoom = false;
scrollwheel:false

Это отключит самые распространенные способы масштабирования. Это делает увеличение с помощью ползунка слева.

Если это не решит вашу проблему, пожалуйста, будьте любезны разместить ваш код где-нибудь, чтобы мы могли увидеть, что проблема реплицирована. Попытка устранить неполадки в коде так, как вы просите, не привлечет многих людей к рассмотрению проблемы.

...