Google maps api v2 |Поиск магазина / Локатор

Question

У меня есть веб-страница под названием «Локатор магазина», в которой используются карты Google api v2.Когда вы находитесь на этой странице, все работает очень хорошо, но я хотел бы добавить форму для ввода на боковой панели, которая позволила бы пользователям на других страницах сайта иметь возможность вводить адрес, а затем перенаправлять на страницу «Поиск магазина»., с отображением их карты / результатов.

Итак, мой вопрос таков: как я могу изменить приведенный ниже код, чтобы иметь возможность отправлять данные формы / местоположения в API карты с любой страницы моего сайта иполучить результаты на странице локатора моего магазина?

Любая помощь с благодарностью, так как это сводит меня с ума!S. (код ниже; я опустил часть ключа API, материал загрузки тела и обработку xml / php)

код карты

var map;
var geocoder;

var iconN = new GIcon(); 
iconN.image = 'images/marker.png';
iconN.iconSize = new GSize(33, 12);
iconN.iconAnchor = new GPoint(28, 43);
iconN.infoWindowAnchor = new GPoint(65, 12);

function load() {
  if (GBrowserIsCompatible()) {
    geocoder = new GClientGeocoder();
    map = new GMap2(document.getElementById('map'));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(53.2415, -1.6809), 4);
  }
}
function searchLocations() {     
    var address = document.getElementById('addressInput').value;
    geocoder.getLatLng(address, function(latlng) {
    if (!latlng) {
        alert(address + ' not found');
    } else {
    searchLocationsNear(latlng);         
    }
    }); 
}
function searchLocationsNear(center) {
    var radius = document.getElementById('radiusSelect').value;
    var searchUrl = 'xml/phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
    GDownloadUrl(searchUrl, function(data) {
        var xml = GXml.parse(data);
        var markers = xml.documentElement.getElementsByTagName('marker');
        map.clearOverlays();
        var results = document.getElementById('results');
        results.innerHTML = '';
        if (markers.length == 0) {
            results.innerHTML = '<div>No results found.</div>';
            map.setCenter(new GLatLng(53.2415, -1.6809), 4);
        return;
    }

    var bounds = new GLatLngBounds();
    for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute('name');
        var address = markers[i].getAttribute('address');
        var distance = parseFloat(markers[i].getAttribute('distance'));
        var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                                parseFloat(markers[i].getAttribute('lng')));
        var phone = markers[i].getAttribute('phone');
        var website = markers[i].getAttribute('website');
        var logo = markers[i].getAttribute('logo');

        var marker = createMarker(point, name, address, phone, website, logo);
        map.addOverlay(marker);
        var sidebarEntry = createSidebarEntry(marker, name, address, distance, phone, website, logo);
        results.appendChild(sidebarEntry);
        bounds.extend(point);
    }
    map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
    });
}

function createMarker(point, name, address, phone) {
  var marker = new GMarker(point, iconN);
  var html = '<strong>' + name + '</strong> <br/>' + address + '<br />Tel: ' + phone;
  GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}

function createSidebarEntry(marker, name, address, distance, phone, website, logo) {
    var div = document.createElement('div');
    var html = '<img src="images/stockist-logos/' + logo + '" height="102" alt="' + name + '" class="right" /> <h3>' + name + '</h3> <small>Distance: <strong>' + distance.toFixed(1) + ' miles</strong></small><br/><p>' + address + '</p><p>Tel: ' + phone + '</p>';    
    div.innerHTML = html;      
    GEvent.addDomListener(div, 'click', function() {
        GEvent.trigger(marker, 'click');
    });
    GEvent.addDomListener(div, 'mouseover', function() {
        div.style.backgroundColor = '#fff';
    });
    GEvent.addDomListener(div, 'mouseout', function() {
        div.style.backgroundColor = '#f7f7f7';
    });
    return div;   
}

Форма / HTML-код

<form action="#" id="stockists" onsubmit="searchLocations()">
<label>Location: </label><input type="text" id="addressInput" />
<label>Distance (miles): </label>
<select id="radiusSelect">
<option value="25" selected>25 </option>
<option value="100">100 </option>                        
<option value="200">200 </option>
</select>
<input type="submit" value="Search" />     
</form>

Answer 1

разместите форму на стороне вашего основного контента, разместите форму / перейдите на страницу обработки

<form action="posting_page.php" method="get" id="stockists">
<label>Location: </label><input type="text" id="addressInput" />
<label>Distance (miles): </label>
<select id="radiusSelect">
<option value="25" selected>25 </option>
<option value="100">100 </option>                        
<option value="200">200 </option>
</select>
<input type="submit" value="Search" />
</form>

затем используйте php или javascript, чтобы получить значения строки запроса / формы

function searchLocations() {     
    var address = <GETFROMPHP>;
    geocoder.getLatLng(address, function(latlng) {
    if (!latlng) {
        alert(address + ' not found');
    } else {
    searchLocationsNear(<GETFROMPHP>);         
    }
    }); 
}

php не является моим основным языком разработки, поэтому вам нужно посмотреть, как получить значения строки запроса / формы. Вы также можете установить в полях ввода на странице обработки значения из записи / получения, чтобы вам не пришлось менять свой сценарий. Дайте мне знать, если вам нужна дополнительная помощь