in Google maps javascript click function is not working
My very first question in here. I am building a google maps by getting the data from json object given from external php file, in there It gets me the list of restaurants (in this case 4 restaurants) and their info, and with this info I build the markers on the map and then show the list of restaurants, and when I click the name of restaurant it should show it in the map, from the marker, and this function is not working, here is the code:
$(document).ready(function(){
$.ajax({
type:"GET",
url:"proxy.php",
dataType:"json",
contentType:"text/json",
success:function(res){
$.post('getinfo.php', {data: res}, function(data){
response = jQuery.parseJSON(data);
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("google_map_div"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(0,0),0);
var side_bar_html = "";
var gmarkers = [];
var htmls = [];
var i = 0;
function createMarker(point,name,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
gmarkers[i] = marker;
htmls[i] = html;
side_bar_html += '<a href="javascript:openInsideMap(' + i + ')">' + name + '</a><br>';
return marker;
//
}
function openInsideMap(i){
alert("WORKING" + i);
gmarkers[i].openInfoWindowHtml(htmls[i]);
}
var bounds = new GLatLngBounds();
for(i=0; i<response.length;i++){
var j = i + 1;
// obtain the attribues of each marker
var lat = parseFloat(response[i].langt);
var lng = parseFloat(response[i].longt);
var point = new GLatLng(lat,lng);
var html = response[i].localName + ": " + response[i].localAddress;
if(response[i].tapaName == ''){
var label = j + ". " + response[i].localName + " - " + response[i].localAddress;
}else{
var label = j + ". " + response[i].localName + " - " + response[i].localAddress + "<br /> " + response[i].tapaName;
}
// create the marker
var marker = createMarker(point,label,html);
m开发者_开发百科ap.addOverlay(marker);
// ==== Each time a point is found, extent the bounds ato include it =====
bounds.extend(point);
}
document.getElementById("side_bar").innerHTML = side_bar_html;
map.setZoom(map.getBoundsZoomLevel(bounds));
map.setCenter(bounds.getCenter());
}
});
}
});
WHEN I BROWSE IT IN MOZILLA OR GCHROME, IT SAYS THAT function openInsideMap(i){ IS NOT DEFINED openInsideMap is not defined
THANK YOU VERY MUCH FOR YOUR HELP, AND THE LINK TO CHECK IT IS: http://www.gsi.dec.usc.es/santiagoetapas/testStage.php
openInsideMap
is only defined in the anonymous function that starts:
function(data){
response = jQuery.parseJSON(data);
You can fix this by using an event listener instead of a javascript URL. E.g., assuming document.getElementById("side_bar")
initially has no children:
function createMarker(point,name,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
gmarkers[i] = marker;
htmls[i] = html;
var newLink = document.createElement("a");
newLink.addEventListener("click",
(function(i)
{
return function()
{
openInsideMap(i);
};
})(i), false);
document.getElementById("side_bar").appendChild(newLink);
return marker;
//
}
Now openInsideMap
will be closed in. The anonymous function is necessary so you don't always get the latest i
.
And then remove:
document.getElementById("side_bar").innerHTML = side_bar_html;
Thank you very much Matthew, I tried what you have told me, but it didn't work, so I read a little about global and local variables in javascript, then I solved the problem by, first of all , taking out:
- $(document).ready
And then, I put the function openInsideMap(i); outside the ajax, and as well put the variables used in this function outside the ajax
var gmarkers = [];
var htmls = [];
And it is working great. You can check by link: www.gsi.dec.usc.es/santiagoetapas/testStage.php
精彩评论