2013-06-21 7 views
0

Хорошо, у меня есть динамическая сгенерированная карта google (с использованием плагина jquery ui map v3).
Какие данные карты должны отображаться, зависит от ввода/выбора пользователя.

открыть карту, как это:jquery ui map v3: программно открыть infowindow

map_lat = parseFloat(xxxxxxxxxx); 
    map_long = parseFloat(xxxxxxxxxxxx); 
    map_zoom = parseInt(xxxxxxxxxxxx); 

    myCenter = map_lat+","+map_long; 
    myCenter = myCenter.toString(); 

    $("#my_map").width(600).height(620); 

    $("#my_map").gmap({ 
     "center": myCenter, 
     "zoom": map_zoom, 
     "disableDefaultUI": false 
    }); 
    populateMap(*varius options here*); 

Функция для заполнения моя карта с маркерами и данных:

function populateMap(*varius options here*); 
{ 
    var htmlData = "", // will hold a list of links for user to interact. Each link must open appropriate marker info window 
     htmlDataShow = '' // will hold some html data along with the link list 
    ; 


    $("#my_map").gmap("clear", "markers"); 
    $("#point-view").hide(); 

    $.getJSON("path_to_json_file", function(data) 
    { 
     $.each(data.markers, function(i, marker) 
     { 
      htmlData += '<a href="javascript:void(0)" onClick=\'openGMarker("'+marker.id+'")\'>'+marker.title+'</a>&nbsp;&nbsp;'; 

      $("#my_map").gmap("addMarker", 
      { 
       "position": new google.maps.LatLng(marker.latitude, marker.longitude), 
       "bounds": true , 
       "icon": marker.icon, 
       "id":marker.id, 
      }).click(function() 
      { 
       $("#my_map").gmap("openInfoWindow", { "content": marker.content }, this); 
      }); 
     }); 



     htmlDataShow = '<h2 class="fut20 white lightStripTitleFull">Select a point to view on map</h2><div class="graystrip"><p>'+htmlData+'</p></div>'; 
     $("#point-view").empty().html(htmlDataShow).show(); 


    }); 
} 

выше функция будет генерировать на странице списка avaialble маркеров/ссылки для взаимодействия с пользователем (нажмите, чтобы отобразить информацию об инфоиндусте).

Для пользователя, чтобы иметь возможность взаимодействовать с ссылками я имею эту функцию:

function openGMarker(id) 
{ 
    $('#my_map').gmap('closeInfoWindow'); 
    var marker = $('#my_map').gmap('get', 'markers')[id]; 
    //console.log(marker); 
} 

Эта функция получит идентификатор ссылки/маркеров и откройте правильный InfoWindow. Мне удалось получить идентификационную часть, но до сих пор я не могу понять, как открыть инфоиндустрию.

Любая помощь приветствуется.

ответ

1

Предоставляя рабочий пример, я думаю, вы можете решить свою проблему.

Это JSFiddle, вы можете понять это лучше.

var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
}); 

var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    title: 'Food Waste and Organics workshop' 
}); 
infowindow.open(map, marker); 

Чтобы открыть infoWindow про грамматический, добавить щелчка слушателя,

google.maps.event.addListener(marker, 'click', function(event) { 
    infowindow.open(map, marker); 
}); 

Этого базовый образец, если это возможно сделать свою собственную скрипку и обеспечить связь.

Надеюсь, вы поняли мою точку зрения.

+0

Да, я нашел этот пример в другом посте, но я не могу заставить его работать над моим кодом. – andrew

+0

@andrew Сделать jsfiddle и предоставить ссылку. так что я могу проверить ваш код. Тем временем позвольте мне попытаться создать скрипку для вас. – Praveen

+3

В вашем примере не используется карта jQuery UI ... – xil3