Insert city name in a search box and open map of that city on another page

Question

Well, I’m a beginner in the field and I would like a help from the most experienced. I am starting a project that aims to use Google Maps to present a site based on a search box query by the user. I have a table called clients in Mysql and would like to get an orientation. At first the idea will be more or less like this:

1. On the main page of the example site you will have in the center of the main page a Search box field. The user type the city in the field as in the example image below:

2. After the user has clicked the search button, a page opens with a Google Maps map referring to the city that the user entered in the search field and at the same time the page would contain customer data referring to that city searched. See an example image below:

In the case how can I do since I have a table called "Clients" in Mysql and a Google Maps Javascript API code that was generated?

Thank you for your attention. Thank you :)

Answer 1

You can use the Google LINK below without necessarily having an API.

The Location variable would be what you type in the field. I made the simple example below that loads the Google LINK with the location typed in a Link to open in an external page.

https://www.google.com/maps/place/' + local

var button = document.getElementById('search');
var linkMaps = document.getElementById('linkMap');


button.addEventListener("click", searchMaps);

function searchMaps() {
  var local = document.getElementById('local').value;
  linkMaps.setAttribute('href', 'https://www.google.com/maps/place/' + local);
}

<label>Digite a cidade:</label>
<input type="text" name="local" id="local">
<button id="search">Acessar</button>
<br>
<br>
<a href="#" id="linkMap" target="_blank"> Ver Maps </a>