Assigning a Google Maps container element using a Jquery selector

Selecting an HTML container element to assign a Google map to using the default Jquery selector will not work. This is because the Google map initialisation is expecting a DOM elememt and the default Jquery selector syntax returns a JQuery object instead.

This, for example, will not work:

1
2
 
map = new google.maps.Map($('#map-container'), mapOptions);

All we need to do is add “[0]” to the selector and it will return the DOM element instead – like so:

1
2
 
map = new google.maps.Map($('#map-container')[0], mapOptions);

Strip duplicate values from a comma separated string using Javascript

This function will remove duplicate values from a comma separated string, returning only unique values in the original order.

I encountered a problem when developing a map application using the Google Maps API. When carrying out a reverse geocode call passing a lat/long string to retrieve a physical address, the API function would return the address but sometimes it would also contain duplicate values in the address if Google couldn’t get a specific house number or street name. For example: “Boston, Boston, MA, United States”.

To solve this problem the following Javascript function was created which accepts a string value, does some splitting and trimming of the string and returns only the unique values, with the commas still in place.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function stripDuplicateValues(inValue) 
        {
            var items = inValue.split(",");
            var arrlen = items.length -1;
            var i = 0;
            var outValue = "";
            var prevItem;
                while (i <= arrlen) 
                {
                    if (outValue.length > 0) 
                    {
                        if (prevItem != items[i].trim())
                        {
                            var str = items[i].trim();
                            outValue = outValue.replace(prevItem + ",", "");
                            outValue += ", " + str;
                        }
                    }
                    else 
                    {
                        outValue = items[i].trim();
                    }
                    prevItem = items[i].trim();
                    i++;
                }
            return outValue;
        }

Using the original example, the following would be returned: “Boston, MA, United States”.

Retrieve querystring values using Javascript

This small javascript function is a way of grabbing querystring values from a url.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function getQueryStrings() 
{
     var assoc = {};
     var decode = function (s) { return decodeURIComponent(s.replace(/\+/g, " ")); };
     var queryString = location.search.substring(1);
     var keyValues = queryString.split('&');
 
     for (var i in keyValues) 
     {
          var key = keyValues[i].split('=');
 
          if (key.length > 1) 
          {
               assoc[decode(key[0])] = decode(key[1]);
          }
     }
 
     return assoc;
}

You can then assign these values to variables, inside an initialisation function for example, and use them as you see fit, like so:

1
2
3
4
5
6
function init()
{
     var qs = getQueryStrings();
     var name = qs["name"];
     var address = qs["address"];
}