Label this PHP script within the browser to make sure it’s creating valid XML. If you feel likely to problem with connecting up for the database, it might appear better to debug in the event you get rid of the line inside the file that sets the header for the text/xml content type, as have a tendency to causes your browser to parse XML and may ensure it is difficult to talk to your debugging messages.
Once the script is working correctly and you also append reasonable sample query parameters for the URL (e.g. ?lat=37&lng=-122&radius=25), you have to see XML output similar to this (phpsqlsearch_expectedoutput.xml):
Permitting the Map
When you’re getting correct XML output within your browser, , you are prepared to make the map with JavaScript. For individuals who’ve never created a v3 Google Map, please consider using a couple of from the fundamental good good examples inside the documentation to make sure you understand the basic principles of creating a guide.
12 Searching Near a Geocode
The PHP script takes latitude and longitude parameters to have the ability to perform search. Since most people who take advantage of the map knows their address while not their coordinates, you need to use the Geocoder class to exhibit their address in to a coordinate. Create a button round the page and switch it on for the searchLocations function proven below which just passes inside the address within the textbox for the asynchronous Geocoder.doGeocode function, will receive a LatLng responding, and sends it well for the searchLocationsNear function once the geocode was effective.
Loading the XML Results
When you be familiar with latitude and longitude in the user became a member of location, you need to pass that for the PHP script and process the XML that’s outputted. To load the XML file to the page, you are able to participate in the browser-provided XMLHttpRequest object. This object enables you retrieve data that resides on one domain since the requesting web site, which is the building blocks of “AJAX” programming. The JS API v2 provided a built-in GDownloadUrl function that wrapped this functionality, but because API v3 is built to be compact, it does not produce an equivalent wrapper function.
So, you’ll be able to define your individual function for loading the file, and think of it as downloadUrl(). The part takes two parameters:
url identifies the direction to the PHP script. It’s frequently easiest to own this reside in the identical directory since the HTML to actually can certainly reference it by filename.
callback signifies the part that’s referred to as when the XML is returned for the JavaScript.
The part declaration is proven below:
Note: Since XMLHttpRequest is asynchronous, the callback function won’t be referred to as moment you invoke downloadUrl. The bigger your XML file, the greater it could take. Don’t put any code after downloadUrl that is dependent around the markers existing already-put it inside the callback function rather.
Because the part is decided, you’ll be able to think of it as from your code, passing inside the title in the PHP file together with a callback function. Inside the callback function, are looking for all the “marker” elements inside the XML, and iterate through them. For each marker element you uncover, retrieve the title, address, distance, and lat/lng qualities and pass those to createMarker() to create the marker, also to createOption() to make a choice inside the results dropdown. You may even determine the right viewport for your returned results through the use of LatLngBounds.extend and Map.fitBounds.
Creating Markers & the Sidebar
Inside the createMarker() function proven below, you just create a marker within the given LatLng, and give a celebration listener for the marker to make sure that when clicked on on, an information window is displayed showing the title and address. Realize that since API v3 permits multiple infowindows being displayed in the spotlight simultaneously, you’ll be able to re-take advantage of the identical infowindow variable with the code to make certain that simply one infowindow ever shows.
Inside the createOption() function proven below, you develop an option element that shows the title and distance in parantheses. The requirement for the selection might be the index in the marker inside the global markers array. This can be value to start the infowindow inside the marker when the option is selected.
Putting It Altogether
This is a screenshot and code for your web site that ties everything together (phpsqlsearch_map.html). When the page loads, the responsibility function is called. This function produces the map as well as the results dropdown.
How to proceed From This Level
Now that you’ve a Dealer Locator for that website, consider stretching it with elevated features. Ideas:
User Location: The Android phone offers a Gears Geolocation module for determining the approximate location from the user, as well as the apple apple iphone sports ths W3C geolocation property. This can be information to carry out a default search for the customer after they first reach your page, and lower the amount of typing they need to do. Look at this example.
Advanced search: Let clients restrict searches by category or some attribute. See the Ace Hardware store locator for just about any great instance of this.
Fancy infowindows: You possibly can make your info home home windows more helpful with the help of quick links for your user to concentrate compared to that location or get driving directions to/from that location.
Zip code locator 