Jquery - Search zip code or city name from web form to google map

Noquierona
April 9, 2024
59 views
1 vote
2 Answers

I have an HTML simple web form to find a specific store in Google Maps by just entering the zip code or the city name. The search form must be targeted to the map like this:

https://www.google.com/maps/search/storename+cityname

Because people know they are going to get results of only Storename, they only write in the input text the zip code or city name so the store name is hidden but parsed after clicking to submit.

I am trying to achieve it like this:

<form action="https://www.google.com/maps/search/storename+city" method="get">
<input type="text" name="city"><input type="submit">
</form>

Any idea how to achieve this ?

Lets say the store name is: Apple
People will only enter the city name for example Miami (in the text field) and the form will in some way redirect the user to https://www.google.com/maps/search/apple+miami

Answers

Based on your comment, this would be enough. I’m using jQuery, since it’s in the tags of your question.

const mapLink = "https://www.google.com/maps/search/Apple+Store+";
$(document).ready(function() {
    $("form").on("submit",function(e) {
    e.preventDefault();
    window.location.href = mapLink + $("input[name='city']").val();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form action="https://google.com/maps/search/foo+bar" method="GET">
  <input type="text" name="city" value="">
  <input type="submit">
</form>

Vanilla JS solution

const mapLink = "https://www.google.com/maps/search/Apple+Store+";
document.addEventListener("DOMContentLoaded",function(){
    const frm = document.querySelector("form");
    frm.addEventListener("submit",function(e) {
        const inp = document.querySelector("input[name='city']");
        e.preventDefault();
        window.location.href = mapLink + inp.value;
    });
});

<form action="https://google.com/maps/search/foo+bar" method="GET">
  <input type="text" name="city" value="">
  <input type="submit">
</form>

Some advice – I would add some sort of a unique identifier to the form (id, for example). This is so you would specifically target the form you want, instead of the first one to be found on your site (which is what document.querySelector does).

An alternative approach than the above would be to intercept the form submission and modify the form action before continuing the form submission process.

/* 
  within the context of the delegated event handler, 
  `this` refers to the actual form. Using dotted
  notation to refer to form elements by name
  makes it clean and easy to understand.
*/
document.forms.search.addEventListener('click', function(e) {
  if( e.target instanceof HTMLInputElement && e.target.type=='submit' ) {
    e.preventDefault();

    if( this.city.value != '' ) {
      this.action=`${this.action}/${this.store.value}+${this.city.value}`;
      this.target='_blank';
      this.submit();
    }
  }
})

<form name='search' action='https://www.google.com/maps/search'>
  <!-- If the "store" is constant, add as a hidden input -->
  <input type='hidden' name='store' value='Apple' />
  <input type='text' name='city' />
  <input type='submit' />
</form>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – Search zip code or city name from web form to google map

Answers