Способ открыть Google Map V3 InfoBox от клика на боковой панели - PullRequest
Новая
       4

Способ открыть Google Map V3 InfoBox от клика на боковой панели

3 голосов
/ 24 октября 2011

Я использую плагин Info box в google map v3

Я хочу повторить ту же функцию, что и здесь

http://coolhunting.com/local/#/metroarea/chicago/jack-spade/

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

Я добавил функцию onclick для щелчка по элементу на боковой панели, но не уверен, что мне делать в этой функции

Вот код, который у меня есть 

    <!DOCTYPE html>
       <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
      <style type="text/css">
        html { height: 100% }
          body { height: 100%; margin: 0; padding: 0 }
        #map_canvas { height: 50% }
        </style>
         <script type="text/javascript" src="http://maps.googleapis.com/maps/api    /js?sensor=true"></script>
<script src="js/infobox.js" type="text/javascript"></script>

<script type="text/javascript">
 function initialize() {
    var latlng = new google.maps.LatLng(66.672962361614566, 12.56587028503418);

    var myMapOptions = {
         zoom:5
        ,center: latlng
        ,mapTypeId: google.maps.MapTypeId.ROADMAP
        ,streetViewControl: false
    };
    var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
// namn
var name=[];
name.push('Test 1');
name.push('Test 2');

// positioner
var position=[];
position.push(new google.maps.LatLng(66.667093265894245,12.581255435943604));
position.push(new google.maps.LatLng(62.66453963191134, 12.584795951843262));

// infoboxes
var infobox = [];
infobox.push("<div>Hello 1</div>");
infobox.push("<div>Hello 2</div>");

var markers=new Array();


for (i = 0; i < position.length; i += 1) {
// Call function
createMarkers(position[i], infobox[i], name[i]);


}

function createMarkers(position,content,name) {

    var marker = new google.maps.Marker({
        map: theMap,
        draggable: false,
        position: position,
        visible: true,
        title: name
    });
markers.push(marker);
    var boxText = document.createElement("div");
    boxText.style.cssText = "background: #ffffff; width: 300px; height: 70px; padding: 5px;";
    boxText.innerHTML = content;

    var myOptions = {
         content: boxText
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-37, -120)
        ,zIndex: null
        ,boxStyle: { 
            background: "url('tipbox.gif') no-repeat"
            ,opacity: 1
            ,width: "300px"
         }
        ,closeBoxMargin: "5px 5px 5px 5px"
        ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
        ,infoBoxClearance: new google.maps.Size(1, 1)
        ,isHidden: false
        ,pane: "floatPane"
        ,enableEventPropagation: false
    };

    google.maps.event.addListener(marker, "click", function (e) {
        ib.open(theMap, this);
    });

    var ib = new InfoBox(myOptions);
 //ib.open(theMap, marker);

    }

}
function show_marker(){

}
</script>

</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div><div><a onclick="show_marker()" href="javascript:void(0)">show marker</a></div>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 20 апреля 2012

(может быть слишком поздно, но если кто-то ищет это в поисках)

Посмотрите на ответ на этот вопрос, который в точности совпадает с тем, что я искал, и теперь я нашел ответ Открыть инфобокс по нажатию кнопки «ВНЕШНЯЯ» карта (карта Google v3)

0 голосов
/ 24 октября 2011

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

  1. Создайте свою карту.
  2. Создайте боковую панель.
  3. Добавьте маркеры на карту, добавляя элементы на боковую панель.Сделайте элементы на боковой панели интерактивными, чтобы при нажатии на них у вас было что-то вроде этого:

(Это с моего собственного сайта.) 

var marker =new google.maps.Marker({
    position: new google.maps.LatLng(searchResult.Latitude,searchResult.Longitude),
    map: googleMap,
    Title: searchResult.CompanyName
});
$('sideBarElement').addEvent('click', function() {
    infoWindow.setContent("Some content for your info window.");
    infoWindow.open(googleMap,marker);
});

Когда вы.open() и infoWindow, карта автоматически перемещается для ее отображения.

...