Passing a google map search value to a location map

JavaScript
1

I am struggling with adding a search form to the map on all other pages. I used the tutorial in building a map using fusion tables as found here: http://derekeder.com/searchable_map_template/. I need to place a search field in the head of all pages.

Currently my form is as

<form action="<?php echo site_url();?>/find-a-school/" method="GET">
<input placeholder='Enter zip or city and state' type='text' />
</form>

The url passes this /#/?address=85027&radius=undefined

This is if I search by zip code.

The form I have does direct the user to the page but I need help in getting the same form thats on the main map page to work in the header as well. New to Javascript and Googles map API. Any help?

This is the code currently being used on the map page

  MapsLib.prototype.addrFromLatLng = function (latLngPoint) {
    var self = this;
    self.geocoder.geocode({
        'latLng': latLngPoint
    }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                $('#search_address').val(results[1].formatted_address);
                $('.hint').focus();
                self.doSearch();
            }
        } else {
            alert("Geocoder failed due to: " + status);
        }
    });
};
   MapsLib.prototype.doSearch = function () {
    var self = this;
    self.clearSearch();
    var address = $("#search_address").val();
    self.searchRadius = $("#search_radius").val();
    self.whereClause = self.locationColumn + " not equal to ''";

    //-----custom filters-----
    //-----end of custom filters-----

    self.getgeoCondition(address, function (geoCondition) {
        self.whereClause += geoCondition;
        self.submitSearch(self.whereClause, self.map);
    });

};
2

Are you wanting the page to populate the search field from the ?address=85027 part of the querystring?

3

Paul

Yes. I want to be able to search on the home page and have it pass through to the map page and display the results. I was looking at the url that displays in the map page when you do a search. Seems like I can just use that url in my query ? Not sure

4

Yes, you can, by using URLSearchParams. There’s a good article about it at Get Query String Parameters with JavaScript

Place an id on the form, and a name on the input field, which are the proper ways of accessing form fields:

<form id="findSchool" ...>
  <input name="address" ...>
</form>

Then you can get the address, and add it to the form:

var urlParams = new URLSearchParams(window.location.search);
var address = urlParams.get("address");
var form = document.querySelector("#findSchool");
form.elements.address = address;
5

Paul I will give it a try. Did you go to my project to see what I was trying to accomplish? gracie.cybermarkprojects.com is the dev link. I have this search form on the header of all pages.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.