WAMS Geolocation of Containers

This page shows an example how to place custom markers on a Google Map via the Google Maps API. It covers two aspects: collecting latitude and longitude from given addresses and place markers based on the geo information in a second step. We could also retrieve the location of the addresses on demand, but as the addresses do not change often, we reduce the load by collecting the data first. More details can be found on my blog.

Background Information

I recently moved and naturally there was a lot of clothes which I do not need (read: do not fit in) any more. Throwing them away would be a waste and luckily, there is a social business called WAMS which (besides a lot of other nice projects) supports reuse and recycling. WAMS provides and maintains containers for collecting clothes on many locations in Tirol. Unfortunately, there is not yet a map available to find them easily. I took this as an opportunity for a little side project in Javascript. I am not affiliated with WAMS, but of course the code and data is open sourced here.

Retrieve geolocation information

The Google API allows to retrieve latitude and longitude data from any given address. If the address was found in Google's database, the Server returns a GeocoderResult object containing the geometry information about the found object. This GeocoderGeometry contains the latitude and longitude data of the address. The first step retrieves the data from Google's API by using the Geocoder class. To do so, the following JSON structure is iterated and the addresses are being fed to the Geocoding service. 
            {
                "containerStandorte": [
                    {
                        "id": "1",
                        "name": "Pfarre Allerheiligen",
                        "address": "St.-Georgs-Weg 15, 6020, Innsbruck, Austria",
                        "latitude":"",
                        "longitude"":
                    },
                    {
                        "id": "2",
                        "name": "Endhaltestelle 3er Linie Amras",
                        "address": "Philippine-Welser-Straße 49, 6020, Innsbruck, Austria",
                        "latitude": "",
                        "longitude": ""
            }
The missing latitude and longitude values are retrieved and the JSON gets updated. The final result looks like this: 
            {
                "containerStandorte": [
                    {
                        "id": "1",
                        "name": "Pfarre Allerheiligen",
                        "address": "St.-Georgs-Weg 15, 6020, Innsbruck, Austria",
                        "latitude": 47.2680316,
                        "longitude": 11.355563999999958
                    },
                    {
                        "id": "2",
                        "name": "Endhaltestelle 3er Linie Amras",
                        "address": "Philippine-Welser-Straße 49, 6020, Innsbruck, Austria",
                        "latitude": 47.2589929,
                        "longitude": 11.42600379999999
                    }
                    ...
            }
Now that we have the data ready, we can proceed with the second step.

Placing the Markers

In the second step, we iterate over the JSON data set and provide the data to the Google Maps API. A custom image, the WAMS logo, now replaces Google's standard marker and shows where the containers can be found. The example below only contains a few container locations, as I do not yet have all the data available.

Map with Custom Markers