Оболочка jQuery GMAP3 - в окне информации о клике - PullRequest
Новая
       36

Оболочка jQuery GMAP3 - в окне информации о клике

1 голос
/ 13 сентября 2011

Я впервые использую оболочку jQuery GMAP 3 в проекте. Все идет хорошо - но не могу найти пример того, как добавить инфопузырь к маркеру, но он появляется только при нажатии маркера ...

Используемая мной функция addMarker: 

function addMarker($this, i, lat, lng){
  $this.gmap3({
    action : 'addMarker',
    lat: lat,
    lng: lng,
    marker:{
      options:{
        icon:new google.maps.MarkerImage(\"../../a/img/find-a-ground/markers/marker.png\", new google.maps.Size(40, 40))
      }
   }
});

Может ли кто-нибудь привести пример того, как добавить информационное окно, которое отображается только при нажатии на маркер?

Спасибо, Стив

Ответы [ 2 ]

1 голос
/ 26 сентября 2011

Вы должны добавить прослушиватель событий к маркеру: 

function addMarker($this, i, lat, lng){
  $this.gmap3({
    action : 'addMarker',
    lat: lat,
    lng: lng,
    marker:{
      options:{
        icon:new google.maps.MarkerImage("../../a/img/find-a-ground/markers/marker.png", new google.maps.Size(40, 40))
      },
      events: {
        // add events here
        click: function(marker, event, data) { infoWindowOpen($this, marker, data) },
      },
      // also you can add marker-depending-data to fill info window content
      data: "hello! i am infowindow!"
    }
});

// global variable to store google InfoWindow object
// (I assume that you have only one info window)
var infoWindow = null;

function infoWindowOpen($this, marker, data) {
    if (infoWindow) {
        var map = $this.gmap3('get'); // returns google Map object
        infoWindow.open(map, marker);
    } else {
        // create info window above marker
        $this.gmap3({action: 'addInfoWindow', anchor: marker});
        // get google InfoWindow object 
        infoWindow = $this.gmap3({action:'get', name:'infoWindow'});
    }
    infoWindow.setContent(data);
}
1 голос
/ 20 сентября 2011

Может быть, это вам поможет. 

var toAddress = "1071 SW 101ST,Hollywood,FL,33025";
var infoWinMsg = "this is a sample address";

function setMarkerObject(toAddress, infoWinMsg) {
  $this.gmap3({
    action: 'addMarker',
    address: toAddress,
    marker: {
      options: {
        icon: new google.maps.MarkerImage("../../a/img/find-a-ground/markers/marker.png", new google.maps.Size(40, 40)),
        draggable: false
      },
      events: {
        mouseover: function (marker, event) {
          $(this).gmap3({
            action: 'addinfowindow',
            anchor: marker,
            options: {
              content: infoWinMsg
            }
          });
        },
        mouseout: function () {
          var infowindow = $(this).gmap3({
            action: 'get',
            name: 'infowindow'
          });
          if (infowindow) {
            infowindow.close();
          }
        }
      }
    },
    infowindow: {
      open: false,
      options: {
        content: infoWinMsg
      }
    },
    map: {
      center: true,
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      navigationControl: true,
      scrollwheel: true,
      streetViewControl: true
    }
  });
}
...