Google Maps Javascript API is returning Static Image

Question

I am loading a googlemap via AJAX and for somereason, it's returning a static map image (centered correctly) but I can't pan,zoom or any other controls which is a bit useless. Here is the javascript and HTML I am entering via 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>

For reference, this is the function called on the checkbox click:

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');
    }
}

Answer 1

You seem to be using code for both Google Maps API V3 and V2. This is not viable.

Example: you reference new GLatLng in your map_load_resize function. You need to change the v2 to refereneces to their equivalent V3 references. So for example, new GLatLng should actually be new google.maps.LatLng .

Answer 2

Your event on check click is wrong try gallery_photo_create_map(this,'_1845187');

ShowHide function is not here so i marked it and set a global var gallery_photo_create_map_check = 0

it's worked for me.

Answer 3

After a little bit of hacking with your code I got it working.

Firstly you need to set an exact size for the div you are using, and you need to invoke the onload event within the body element.

Take a look here: Google map error: a is null

You probably can't zoom because you have the following lines in your code:

map.disableDoubleClickZoom = false;
scrollwheel:false

This will disable the most common ways of zooming. It does zoom by using the slider on the left.

If this doesn't fix your problem then please be so kind to host your code somewhere so we can see the problem replicated. Trying to troubleshoot code in the manner you are asking will not attract many people to look at the problem.