Question

我在谷歌地图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>

Answer 1

这并不难，因为当您向地图添加信息窗口时，地图会滚动显示信息窗口。

制作地图。
制作侧边栏。
向地图添加标记，同时向侧边栏添加元素。使侧边栏中的元素可单击，这样当您单击它们时，您可以使用以下内容：

（这是我自己的网站。）

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时，地图会自动平移以显示它。

Answer 2

（可能为时已晚，但如果有人在Google上搜索）

查看这个问题的答案，这与我正在寻找的内容完全相同，现在我找到了答案Open infobox on button clicked "OUTSIDE" map ( google map v3 )

通过单击侧栏中的方式打开Google Map V3 InfoBox

2 个答案:

通过单击侧栏中的方式打开Goog​​le Map V3 InfoBox

2 个答案:

通过单击侧栏中的方式打开Google Map V3 InfoBox