Finding a merchant's nearest physical location can be an important feature for an ecommerce site. This is especially true if the merchant wants to offer in-store pick up as a delivery option.
This article is Part 5 of a tutorial series demonstrating how to create a basic store finding feature. Part 1, Part 2, Part 3, and Part 4 we published previously.
Picking up where I left off in Part 4, I am going to begin developing the code that will display a list of nearby locations. For my example application, I will be locating Dutch Bros. drive-through coffee shops in my home state, Idaho.
Step No. 12: Display the Results
I have been working on a for loop inside of a function named nearStepfour(), which receives the XML containing a list of Dutch Bros. locations as data. This list is arranged so that the Dutch Bros. nearest the user's address is first.
The function parses the XML and loops through each location, creating individual unordered lists for each Dutch Bros.
function nearStepFour(data){
var xml = parseXml(data);
var eachStore = xml.documentElement.getElementsByTagName('store');
for(var i = 0; i < eachStore.length; i++){
var store = eachStore[i].getAttribute('store_name');
var street = eachStore[i].getAttribute('street');
var city = eachStore[i].getAttribute('city');
var state = eachStore[i].getAttribute('state');
var zip = eachStore[i].getAttribute('zip');
var latitude = eachStore[i].getAttribute('latitude');
var longitude = eachStore[i].getAttribute('longitude');
var distance = eachStore[i].getAttribute('distance');
var storeInfo = document.createElement('div');
storeInfo.id = 'store-info' + [i];
storeInfo.innerHTML = '<ul><li>' + store + '</li><li>' + street + '</li><li>' + city + ', ' + state + ' ' + zip + '</li></ul>';
}
}
At the end of Part 4, I had just added the lines:
var storeInfo = document.createElement('div');
storeInfo.id = 'store-info' + [i];
storeInfo.innerHTML = '<ul><li>' + store + '</li><li>' + street + '</li><li>' + city + ', ' + state + ' ' + zip + '</li></ul>';
These lines stop just short of displaying the query results. So I add more lines of code to the for loop, displaying the results as a new child element attached to the end of the "content" div, which wraps the central portion of the page.
var parentDiv = document.getElementById('content');
parentDiv.appendChild(storeInfo);
With these lines added, the application should now return results, so it is time to test my code. Up until now, I could test some small portion of the application, but I couldn't really determine if my PHP and JavaScript were working together.
I head to the application frontend.
Type in the address of the city hall building in Caldwell, Idaho.
Click the "Go Dutch" button.
The application displayed the desired results. What's more, from my knowledge of the local area, I know that the list has been properly arranged. The Nampa-Caldwell Dutch Bros. is, in fact, the closest location to Caldwell's city hall.
Step No. 13: Display the Map
Returning a list of locations is great. But I want to be able to show those locations on a Google-powered map.
To create the map, I amend nearStepFour(), adding the following code just after I created the variable eachStore.
map = new google.maps.Map(document.getElementById('Google-Map'); {
center: new google.maps.LatLng(parseFloat(eachStore[0].getAttribute('latitude')), parseFloat(eachStore[0].getAttribute('longitude'))),
zoom: 13,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
This bit of JavaScript relies on the Google Maps JavaScript API to create a new map inside of an element with the id of "Google-Map."
map = new google.maps.Map(document.getElementById('Google-Map'); {
Next, the code sets four API options. The first of these centers the map on the Dutch Bros. location nearest the address the user submitted.
center: new google.maps.LatLng(parseFloat(eachStore[0].getAttribute('latitude')), parseFloat(eachStore[0].getAttribute('longitude'))),
The zoom option, controls the amount of detail the user sees when the map loads. I suggest experimenting with this option to get the result you like best. The map type does exactly what you would expect, and the _ mapTypeControlOptions_ options allows me to use a drop down menu so that the map controls take up less space on page.
zoom: 13,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
I'm five tutorials and 13 steps into the application building process, so I won't expect you to notice this, but strictly speaking there is not element on my page with an id of "Google-Maps." As such, running the location finder now would fail.
Rather, I need to use JavaScript to append the page to the "content" div.
var googleMap = document.createElement('div');
googleMap.id = 'Google-Map';
var parentDiv = document.getElementById('content');
parentDiv.appendChild(googleMap);
Notice that I have moved the variable parentDiv, up from lower in the function to here. It will now help me append the "Google-Map" div and the store results.
Summing Up
In this tutorial, I wrote the code to (1) display my store results and (2) establish the Google map. In the next section, I have some more testing to do and then I will add custom markers for the Dutch Bros. locations. Also, there may be an unforeseen challenge ahead in my next post.
Related Articles
- Develop a Store Finder with the Google Maps API, Part 1
- Develop a Store Finder with the Google Maps API, Part 2
- Develop a Store Finder with the Google Maps API, Part 3
