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="" language="JavaScript"></script>
<script type="text/javascript" language="JavaScript">
var map;
var map_icon_green = new google.maps.MarkerImage(".png",
new google.maps.Size(12,20),
new google.maps.Point(0,0));
var map_icon_blue = new google.maps.MarkerImage(".png",
new google.maps.Size(12,20),
new google.maps.Point(0,0));
var map_icon_yellow = new google.maps.MarkerImage(".png",
new google.maps.Size(12,20),
new google.maps.Point(0,0));
var map_icon_red = new google.maps.MarkerImage(".png",
new google.maps.Size(12,20),
new google.maps.Point(0,0));
var map_icon_shadow = new google.maps.MarkerImage(".png",
new google.maps.Size(28,20),
new google.maps.Point(-6,0));
var map_crosshair = new google.maps.MarkerImage(".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');
}
}
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./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./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./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./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./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./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./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');
}
}
- Can you post a link to your running code so we can see the full context? – Mano Marks Commented Feb 23, 2012 at 18:58
- i've added some extra code to exploain it better. – David Commented Feb 24, 2012 at 14:03
- A link to live code would be really beneficial to help troubleshoot this issue. – andresf Commented Feb 24, 2012 at 17:58
- The problem is, we can't see what's happening with your page. It's possible there's some CSS problem, some DOM problem, there's really nothing obvious here yet. – Mano Marks Commented Feb 24, 2012 at 18:01
3 Answers
Reset to default 4 +100You 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.
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.
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 mon 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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744535173a4579383.html
评论列表（0条）