Динамически заполненная боковая панель Google Maps

Question

Я использовал код из этого примера V3 , чтобы настроить панель ссылок, которая динамически заполняется при выборе фильтров разных категорий, но в настоящий момент у меня есть две проблемы.Во-первых, я поместил начальную функцию makeSidebar в событие простоя карты, но боковая панель создается только при перемещении карты, а не при загрузке страницы.Во-вторых, я не могу заставить окно инфо-маркера открываться при нажатии соответствующей ссылки на боковой панели.Мой код ниже:

var map;
var infowindow;
var image = [];
var gmarkers = [];
var place;
var side_bar_html = "";

  image['attraction'] = 'http://google-maps-icons.googlecode.com/files/beach.png'; 
  image['food'] = 'http://google-maps-icons.googlecode.com/files/restaurant.png';
  image['hotel'] = 'http://google-maps-icons.googlecode.com/files/hotel.png';
  image['city'] = 'http://google-maps-icons.googlecode.com/files/smallcity.png';

function mapInit(){

    var placeLat = jQuery("#placelat").val();
    var placeLng = jQuery("#placelng").val();
    var centerCoord = new google.maps.LatLng(placeLat, placeLng); 

    var mapOptions = {
        zoom: 15,
        center: centerCoord,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map"), mapOptions);

    google.maps.event.addListener(map, 'idle', function() {
      var bounds = map.getBounds();
      var ne = bounds.getNorthEast();
      var sw = bounds.getSouthWest();
      var yMaxLat = ne.lat();
      var xMaxLng = ne.lng();
      var yMinLat = sw.lat();
      var xMinLng = sw.lng();
      //alert("bounds changed");
      updateMap(yMaxLat, xMaxLng, yMinLat, xMinLng);
      show("attraction");
      show("food");
      show("hotel");
      show("city");
      makeSidebar();
    });

    function updateMap(yMaxLat, xMaxLng, yMinLat, xMinLng) {
    jQuery.getJSON("/places", { "yMaxLat": yMaxLat, "xMaxLng": xMaxLng, "yMinLat": yMinLat, "xMinLng": xMinLng }, function(json) {
      if (json.length > 0) {
        for (i=0; i<json.length; i++) {
          var place = json[i];
          var category = json[i].tag;
          var name = json[i].name;
          addLocation(place,category,name);
          //makeSidebar();
        }
      }
    });
   }

    function addLocation(place,category,name) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(place.geom.y, place.geom.x),
        map: map,
        title: place.name,
        icon: image[place.tag]
      });
      //var iwNode = document.getElementById("infowindow");

      marker.mycategory = category;
      marker.myname = name;
      gmarkers.push(marker);

      google.maps.event.addListener(marker, 'click', function() {
        if (infowindow) infowindow.close();
        infowindow = new google.maps.InfoWindow({
          content: "<div id='infowindow'><div id='infowindow_name'><p>"+ place.name +"</p></div><div id='infowindow_contents'><p>" + place.tag +"</p><a href='/places/"+place.id+"' id='place_link'>Show more!</a></div></div>"
        });
        infowindow.open(map, marker);
        google.maps.event.addListener(map, 'click', function() {
          infowindow.close();
        });
      });
    }

    function show(category) {
      for (var i=0; i<gmarkers.length; i++) {
        if (gmarkers[i].mycategory == category) {
          gmarkers[i].setVisible(true);
        }
      }
      document.getElementById(category+"box").checked = true;
    }

    function hide(category) {
      for (var i=0; i<gmarkers.length; i++) {
        if (gmarkers[i].mycategory == category) {
          gmarkers[i].setVisible(false);
        }
      }
      document.getElementById(category+"box").checked = false;
      infowindow.close();
    }

    function boxclick(box,category) {
      if (box.checked) {
        show(category);
      } else {
        hide(category);
      }
      makeSidebar();
    }

    jQuery('#attractionbox').click(function() {
      boxclick(this, 'attraction');
    });

    jQuery('#foodbox').click(function() {
      boxclick(this, 'food');
    });

    jQuery('#hotelbox').click(function() {
      boxclick(this, 'hotel');
    });

    jQuery('#citybox').click(function() {
      boxclick(this, 'city');
    });

    function myclick(i) {
      google.maps.event.trigger(gmarkers[i],"click");
    }

    function makeSidebar() {
      //var html = "";
      for (var i=0; i<gmarkers.length; i++) {
        if (gmarkers[i].getVisible()) {
          side_bar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
         }
       }
       document.getElementById("side_bar").innerHTML = side_bar_html;
    }
}

jQuery(document).ready(function(){
  mapInit();
  //makeSidebar();
});

Любая помощь будет высоко ценится - что я могу сделать, чтобы загрузить боковую панель при загрузке страницы и чтобы работало событие щелчка по ссылке?Спасибо!

Answer 1

Причина, по которой ваши ссылки не работают, заключается в том, что вы определяете свои функции my_click и makeSidebar внутри своей функции mapInit, и поэтому они недоступны вне области действия mapInit. Просто переместите их за пределы mapInit и все должно работать.

Что касается события загрузки ... то, что вы ищете, это addDomListener метод google.maps.event . Просто используйте

google.maps.event.addDomListener(window, 'load', name_of_your_inital_function);
// e. g. google.maps.event.addDomListener(window, 'load', mapInit);

Наконец; не лучше ... не делай этого:

var image = [];
image['attraction'] = 'data'; 
image['food'] = 'more data';

Массивы не предназначены для использования в качестве хэшей в Javascript. Вместо этого используйте объекты для словарей / хэшей - это то, что вы на самом деле делаете (объект Array «подклассы»), и другим будет проще использовать ваш код (и избавит вас от головной боли в дальнейшем).

var image = {};
image['attraction'] = 'data'; 
image['food'] = 'more data';