Searchbox in Google map API - integrated with infobox database link - php

Question

I am a newby at this and this question may be very simple to alot of you, but please help.
I am trying to intergrate a searchbox within a very simple google map script.
1- I successfully copied the file from here: From Info Windows to a Database: Saving User-Added Form Data
configured and it works very well!!
Now I am trying to add the searchbox functionality into the existing code.
Basically, I would like to integrate this: Place Search Box
into the previous code.
This would allow me to be able to search for places(Cities) before adding specific location to my DB.
Thanks Guys!

Answer 1

You can set things like this:
implement search place.
get important data (name, address, type) auto populate the info window with this data.
edit/save data in DB.
Codes:
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
Then add the custom info window from your link / tweak some values in the form, getting the result of the search place.
var html = "<table>" +
"<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
"<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
"<tr><td>Type:</td> <td><select id='type'>" +
"<option value='bar' SELECTED>bar</option>" +
"<option value='restaurant'>restaurant</option>" +
"</select> </td></tr>" +
"<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
infowindow = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(map, "click", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
});
}
Here is the list of item response from the places details.