Несколько маркеров с информационными ящиками Google Maps API V3

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

Код:

var myCenter = new google.maps.LatLng(30.43, -84.285);//Tallahasse
var myHouse = new google.maps.LatLng(30.438329, -84.29116599999998);//MyHouse
//Initilalize map to center on Tallahassee
function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:14,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new Array();
var ib = new Array();

for(var i = 0; i < 2; i++){ // START LOOP -----------------------------
//Marker(This creates the marker, nothing further is needed)
marker[i] = new google.maps.Marker({
  position:myHouse, //Marker Position
  map: map, //Which map this marker is on, defaults to current
  title: 'More Info', // This displays text when the cursor hovers over the marker
  draggable: false,
  icon: 'images/sm1beermug.png'
  });

  var boxText = document.createElement("div");
  boxText.style.cssText = "border: 3px solid #2d2d2d;"; 
  boxText.innerHTML = "<strong><font size=\"3\" color = #222222> Taylor's House </font></strong>";

  //font attribute not supported in HTML5, progress to using css in later revisions
  var myOptions = {
           content: boxText,
          disableAutoPan: false,
          maxWidth: 0,
          pixelOffset: new google.maps.Size(-251, 0),//X axis should be half the size of box width
          zIndex: null,
          boxStyle: { 
            background: "url('tipbox.gif') no-repeat",
            opacity: .94,
            width: "502px"
           },
          closeBoxMargin: "2px 2px 2px 2px",
          closeBoxURL: "images/close.png",
          infoBoxClearance: new google.maps.Size(10, 10),
          isHidden: false,
          pane: "floatPane",
          enableEventPropagation: false
  };

        ib[i] = new InfoBox(myOptions);
        ib[i].open(map, marker[i]);
        ib[i].hide();

        google.maps.event.addListener(marker[i], 'click', function() {
            if(ib[i].getVisible()){
               ib[i].close();
               ib[i].open(map, marker[i]);
               ib[i].hide();
            }
            else{
              ib[i].show();
            }
        });

        myHouse = new google.maps.LatLng(30.41329, -84.29316599999998);
  }//END LOOP ------------------------------      

}

google.maps.event.addDomListener(window, 'load', initialize);

google-maps javascript google-maps-api-3 infobox
person Tabrock    schedule 12.01.2014    source источник
comment
удалив ib[i].hide(); сразу после открытия я могу подтвердить, что ящики загружаются, просто не переключаются.   -  person Tabrock    schedule 13.01.2014
comment
возможный дубликат Как сделать так, чтобы одно информационное окно было открыто одновременно в Google Map V3?   -  person Dr.Molle    schedule 13.01.2014

Ответы (3)


arrow_upward
1
arrow_downward

Моя реализация...
* Инициализировать переменные

var map; // Google map instance
var mapMarkers = Array();
var mapInfoWindows = Array();

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

function addMarker(marker, infoWindow) {
    // Update markers and infowindows
    mapMarkers.push(marker);
    mapInfoWindows.push(infoWindow);

    marker.setMap(map);
    google.maps.event.addListener(marker, 'click', function () {
        // Open the window before closing to remove flicker
        infoWindow.open(map, marker);
        for (i in mapInfoWindows) {
            if (mapInfoWindows[i] !== infoWindow) {
                mapInfoWindows[i].close();
            }
        }
    });
}

Мое приложение требовало, чтобы я удалил все маркеры для обновления карты.

function removeMarkers() {
    for (i in mapInfoWindows) {
        mapInfoWindows[i].close();
    }
    for (m in mapMarkers) {
        google.maps.event.clearInstanceListeners(mapMarkers[m]);
        mapMarkers[m].setMap(null);
    }
    mapInfoWindows.length = 0;
    mapMarkers.length = 0;
}
person Zach Johnson    schedule 14.02.2014

arrow_upward
0
arrow_downward

попробуй этот код...

google.maps.event.addListener(marker[i], 'click', function() {
        if(ib[i].getVisible()){
           ib[i].setVisible(false);     // hide() and show() are deprecated.
        }
        else{
          ib[i].setVisible(true);       // hide() and show() are deprecated.
        }
    });
person Premshankar Tiwari    schedule 13.01.2014

arrow_upward
0
arrow_downward

Используйте тот же информационный блок и просто меняйте содержимое при каждом нажатии:

var markers = [];
var map = new google.maps.Map(document.getElementById(divId), mapOptions); 
var infoBox = new InfoBox(getInfoBoxOptions());

    $.each(data, function (i, obj)
    {
        var pos = new google.maps.LatLng(obj.Lat, obj.Lng);
        var marker = _getMarker(map, obj.Name, pos);
        marker.text = '<div> Different content for each marker </div>';
        markers.push(marker);

        google.maps.event.addListener(marker, 'click', function ()
        {
            infoBox.setContent(this.text);
            infoBox.open(map, this);
            map.panTo(this.getPosition());
        });
    });
person Russell Munro    schedule 15.05.2014