Enter city name in a Search box and open map of that city on another page

Question

Enter city name in a Search box and open map of that city on another page

Navigation

#1 by (0 votes)

0

Well, I am a beginner in the area and would like help from the most experienced. I'm starting a project that aims to use Google Maps to present a location based on a search box query by the user. I have a table called clients in Mysql and would like guidance. At first the idea will look something like this:

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

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

InthecasehowcanIdoitsinceIhaveatablecalled"Clients" in Mysql and a JavaScript API code of Google Maps that was generated?

Thank you in advance for your attention. Thanks:)

google-maps google-maps-api-3

asked by anonymous 14.12.2016 / 16:21

1 answer

Error "Object reference not set to an instance of an object." Capture return from a WebService

score 0 · Answer 1

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

The Local 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 on an external page.

https://www.google.com.br/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.br/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>