如何从GoogleDeveloper定制StoreLocator插件的侧面板

Question

我试图使用商店定位器插件从谷歌开发者：http://storelocator.googlecode.com/git/index.html?utm_campaign=sl

我想将搜索定位器重新定位到页面的上方，就像它在谷歌地图上一样，这就是我最终的位置： 1。我创建了两个面板，并为它们分配了相同的视图。3.使用css隐藏面板上的Storelist。4.隐藏侧板5上的搜索定位器。然后，当搜索上面板上的搜索定位器时，我不会在侧面板上获得更新的商店列表和功能。

请帮我弥补我所缺少的。

以下是我尝试使用的js代码：

google.maps.event.addDomListener（窗口'load'，函数（）{var map=new google.maps.map（document.getElementById（'map-canvas'），{center:new google.maps.LatLng（-28135），缩放：5，

mapTypeId: google.maps.MapTypeId.ROADMAP   });

//var panelDiv=document.getElementById（'面板'）； var panelDiv = $('.面板'）； var搜索面板 = $('#搜索面板'）；

var数据=新MedicareDataSource；

VAR视图=新存储定位器。视图（地图，数据，{地理位置：假，特征：data.get特征（）}）；

/*var search_panel=newstorelocator.panel（searchPanel，{view:view，directions:false}）*/

VARside_panel=新存储定位器。面板（panelDiv，{view： view， locationSearch： true}）；

/*$（search_panel）. live（'view_changed'，函数（）{警报（'工作'）；

});*/

}）；

Answer 1

在storelocator.css上。这就是我现在用来移动页面顶部搜索框的方法：

.storelocator-panel .location-search {

    top:45px;
    padding: 5px;
    position: absolute;
    width: 400px;
    margin-left:-210px;
    left:50%;

}

Answer 2

问题在于风格

<style type="text/css">
  body { font-family: sans-serif; }
  #map-canvas, #panel { height: 500px; }  //HERE
  #panel { width: 300px; float: left; margin-right: 10px; }//HERE
  #panel .feature-filter label { width: 130px; } //HERE
  p.attribution, p.attribution a { color: #666; }
</style>

您将需要更改此项以满足您的要求。如果您需要，这里是一个很好的教程