Боковая панель API Карт Google

Question

Я добавляю маркеры и боковую панель следующим образом:

<script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {

      // this variable will collect the html which will eventually be placed in the side_bar
      var side_bar_html = "";

      // arrays to hold copies of the markers and html used by the side_bar
      // because the function closure trick doesnt work there
      var gmarkers = [];

      // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the side_bar
        gmarkers.push(marker);
        // add a line to the side_bar html
        side_bar_html += '<li><a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><\/li>';
         return marker;
      }

      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
        GEvent.trigger(gmarkers2[i], "click");
      }

      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng( 52.898962,-8.21228), 7);

      // add the points    
      var point = new GLatLng( 53.357826,-6.28418 );
      var marker = createMarker(point,"Ashgrove Interparts Ltd.","<strong>Ashgrove Interparts Ltd.</strong><br>Kill Avenue.<br>Dunlaoire.<br>Co Dublin.<br>Tel; 01-2805063.<br>Contact; Mr Dermot Kelly.<br>Dublin Area")
      map.addOverlay(marker);

      var point = new GLatLng( 53.285845,-6.158266 );
      var marker = createMarker(point,"Abbey Service Station.","<strong>Abbey Service Station.</strong><br>Abbey Road.<br>Monkstown.<br>Co. Dublin.<br>Tel; 01-2809626.<br>Contact; George/Kay.")
      map.addOverlay(marker);

      var point = new GLatLng( 53.340508,-6.228905 );
      var marker = createMarker(point,"A & D Motorfactors.","<strong>A & D Motorfactors.</strong><br>Cromwellsfort Rd,<br>Dublin 12.<br>Tel; 01-460-1808.<br>Contact; Aiden/Ed.")
      map.addOverlay(marker);

      var point2 = new GLatLng( 53.440508,-6.238905 );
      var marker2 = createMarker(point2,"test","<strong>A & D Motorfactors.</strong><br>Cromwellsfort Rd,<br>Dublin 12.<br>Tel; 01-460-1808.<br>Contact; Aiden/Ed.")
      map.addOverlay(marker);

      // put the assembled side_bar_html contents into the side_bar div
      document.getElementById("side_bar").innerHTML = side_bar_html;
    }
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
    //]]>
    </script>

Теперь есть вопрос. Как его расширить и сделать возможным добавлять разные маркеры в разные элементы?

Answer 1

Я предполагаю, что вы пытаетесь дифференцировать ваши наборы маркеров, но используйте ваш общий код обработчика myclick , чтобы показать соответствующее информационное окно для маркера.

Есть несколько способов сделать это. Похоже, вы хотели иметь отдельные массивы маркеров для каждого города, потому что вы указали массив gmarkers2 в вашем обработчике myclick . Это не сработает, потому что вы создаете маркеры, используя одну и ту же функцию-обработчик, и индекс не будет работать для обоих массивов.

Таким образом, вам либо нужна функция createMarker , которая добавляет новый маркер в соответствующий массив маркеров и указывает обработчик щелчков, который использует этот массив, либо вы можете использовать тот же массив маркеров и просто изменить createMarker для обновления отдельных переменных side_bar_html для сохранения URL ссылки.

Я собрал пример (основанный на вашем источнике), который использует второй подход . Пожалуйста, дайте мне знать, если это не то, что вы пытаетесь сделать.

N.B. В моем примере я вставил "боковую панель" под картой.