Often online merchants are actually multi-channel purveyors, selling both from their ecommerce-enabled website and a brick-and-mortar storefront. As a web developer, it is important to serve both channels, which often means that you'll need to develop a store finding application for your client's site.
Over the past several weeks, I have been describing the step-by-step process of developing a custom, store-finding application using Google's Maps JavaScript API.
In Part 1, I wrote the basic HTML and CSS; created a MySQL database with geocoded store data; and used PHP to query the database for the nearest locations to a given point. Part 2 demonstrated how to convert the query results into XML that could be sent to the client. Part 3 featured the JavaScript necessary to capture a user-submitted address; initialize the Google Maps API; and geocode that address so that it could be sent to my PHP script as a longitude and latitude. Part 4 walked through the process of making an Ajax call to the server. And Part 5 explained how to loop through the results and show the store locations in distance order.
In this tutorial, I will point out a frustrating mistake that cost me a lot of time and a headache and add custom store markers to the map results. I also want to remind you that as the subject of my demonstration, I am using Dutch Bros. locations in my home state of Idaho. Dutch Bros. is a regional chain of drive-through coffee houses that also sells merchandise online.
My Mistake
As I was developing the code for these tutorials, I came across a very frustrating problem. My Google map, just would not display.
I scoured my code, but for the life of me, I could not figure out what was wrong.
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}
});
Eventually, I changed "ROADMAP" to "roadmap," and like magic, my map worked.
My problem seems to have come from blending syntax from version 2 and version 3 of the Google Maps API. I call your attention to my frustrating mistake to remind you that a lot of web development is spent debugging, so if something fails don't give up, just keep trying.
Now back to creating the app.
Step No. 14: Add Map Markers
At present my store finder will display all of the Idaho Dutch Bros. in order from the nearest to farthest from the address the user submits. The application will also show a map that is centered on the location of the very closest Dutch Bros. But at present, there is no marker indicating the store's exact position on the map.
To add a marker, I first create a marker PNG graphic in Adobe Photoshop. For my example, this is basically a scaled down version of the Dutch Bros. cup image that I am using on the application home page.
By default, the Google Maps API will align the bottom center of the marker graphic exactly over the store location on the map. So I want the bottom of the cup graphic to be in the center of the PNG image.
Next, I write a JavaScript function to add the marker to my Google map.
function makeMarker(latitude,longitude){
var markerPos = new google.maps.LatLng(latitude, longitude);
var marker = new google.maps.Marker({
map : map,
position : markerPos,
icon : 'http://localhost/Test-scripts/dutch_bros/dutchbros-marker.png'
});
}
Notice that the function accepts a latitude and longitude parameter.
function makeMarker(latitude,longitude){
Ultimately, these latitude and longitude parameters will represent the geolocation of each Dutch Bros. store.
Next, I specify the position of the marker using the geolocation parameters.
var markerPos = new google.maps.LatLng(latitude, longitude);
The final step is to use the Google Maps API to actually create the markers.
var marker = new google.maps.Marker({
map : map,
position : markerPos,
icon : 'http://localhost/Test-scripts/dutch_bros/dutchbros-marker.png'
});
The option map specifies the specific Google map that I will be adding markers to. You will remember from Part 5, that I used the variable name map when I created the map that is displaying in my store finder application.
The position option calls my markerPos variable and passes the latitude and longitude for the current store to the API.
The icon option specifies the path to the marker graphic I described above.
But, of course, I have not yet called this function, which I need to do from inside of the for loop that I created in Step 11 back in Part 4. Because I place it inside of the loop, each Dutch Bros. store will get a marker.
makeMarker(latitude,longitude);
Now the entire loop looks like this.
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>';
parentDiv.appendChild(storeInfo);
makeMarker(latitude,longitude);
}
And the entire nearStepFour() function reads like this.
function nearStepFour(data){
var googleMap = document.createElement('div');
googleMap.id = 'Google-Map';
var parentDiv = document.getElementById('content');
parentDiv.appendChild(googleMap);
var xml = parseXml(data);
var eachStore = xml.documentElement.getElementsByTagName('store');
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}
});
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>';
parentDiv.appendChild(storeInfo);
makeMarker(latitude,longitude);
}
}
Running the application now will display the map with the marker front and center.
If the user zooms out, other Dutch Bros. locations show up on the map.
Summing Up
In this tutorial, I described a frustrating problem I had as I developed this store finder, encouraged you not to give up, and demonstrated how to add custom marker icons via the Google Maps API.
In the next part of this series, I will add driving directions for the nearest store.
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
