in Google maps javascript click function is not working

Question

Hi Everybody,

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:

<script type="text/javascript">
$(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 />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + response[i].tapaName;
                        }
                        // create the marker
                        var marker = createMarker(point,label,html);
                        map.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

Answer 1

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;

Answer 2

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