Question

I am trying to use the Store Locator plugin from google developer:
http://storelocator.googlecode.com/git/index.html?utm_campaign=sl&utm_source=youtube

I wanted to relocate the search locator to the up of the page-like it is on the google map and this is where I ended up:
1.I created two panels up and side
2. and assigned the same view for both of them.
3. Hide the storelist on the up panel using css.
4. Hiding the search locator on side panel
5. Then while searching on the search locator on the up panel I don get the updated store list and features on the side panel.

Please help me in what I am missing.

Following is the js code I am trying to use:

google.maps.event.addDomListener(window, ‘load’, function() { var
map = new google.maps.Map(document.getElementById(‘map-canvas’), {
center: new google.maps.LatLng(-28, 135),
zoom: 5,

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

//var panelDiv = document.getElementById(‘panel’); var panelDiv =
$(‘.panel’); var searchPanel = $(‘#searchPanel’);

var data = new MedicareDataSource;

var view = new storeLocator.View(map, data, {
geolocation: false,
features: data.getFeatures() });

/*var search_panel = new storeLocator.Panel(searchPanel, {
view: view,
directions: false });
*/

var side_panel = new storeLocator.Panel(panelDiv, {
view: view,
locationSearch: true });

/*$(search_panel).live(‘view_changed’, function(){
alert(‘Working’);

});*/

});

Answer 1

On the storelocator.css. this is what I am using now to move the search box on top of the page:

.storelocator-panel .location-search {

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

}