Google Maps using Jquery plugin

If you are using google map in your application say for example a store locator would be a common implementation, what you need is the following:

1. Google map key

2.query-1.3.2.min.js (download here)

3. And the Gmap plugin jquery.gmap-1.0.0.min.js (download here)

And you’re set.

Note: This tutorial assumes that you pass the Longitude and Latitude value from Query string, so it doesn’t matter whether you’re using .NET or PHP or any other language so long as you have it on your URL , I will provide code for Javascript to parse these query string.

Ok let’s start.

For instance on your querystring you have something like this : http://localhost:3703/Storelocation/?MCL=47.9535996666667&MCLo=-122.335327666667&DCLatA=47.8487&DCLongA=-122.2794&DCLatB=48.002495&DCLongB=-122.201067&DCLatC=48.009604&DCLongC=-122.525516

Inside your HTML you should have a DIV that will hold your map, you can put stylesheet as you wish.

<div id=”map” class=”style”></div>

and that’s it. Now for the Javascript

$(document).ready(function() {
            $("#map").gMap({
                controls: false,
                scrollwheel: false,
                markers: [{
                    latitude: 47.8487, longitude: -122.2794
                },
             { latitude: 48.002495, longitude: -122.201067 },
             { latitude: 48.009604, longitude: -122.525516}],
 
                icon:
            { image: "http://www.google.com/mapfiles/marker.png",
                iconsize: [19, 21],
                iconanchor: [4, 19],
                infowindowanchor: [8, 2]
            },
                // dead center if left out will default to world view
            latitude: markerLat,
            longitude: markerLon,
                zoom: 10
            });
        });

And here is the script to parse your querystring

var params = ParseQueryString();
        var markerLat = URLDecode(params["MCL"]);
        var markerLon = URLDecode(params["MCLo"]);
        var coor1lat = URLDecode(params["DCLatA"]);
        var coor1lon = URLDecode(params["DCLongA"]);
        var coor2lat = URLDecode(params["DCLatB"]);
        var coor2lon = URLDecode(params["DCLongB"]);
        var coor3lat = URLDecode(params["DCLatC"]);
        var coor3lon = URLDecode(params["DCLongC"]);

And I separated the function that implements the parsing

<script type="text/javascript">
        function URLDecode(psEncodeString) {
            // Create a regular expression to search all +s in the string
            var lsRegExp = /\+/g;
            // Return the decoded string
            return unescape(String(psEncodeString).replace(lsRegExp, " "));
        }
 
        function ParseQueryString() {
            var queryString = new Array();
            var urlSearch = location.search.substr(1);
            var parms = urlSearch.split("&");
            for (idx = 0; idx < parms.length; idx++) {
                var parm = parms[idx].split("=");
                queryString[parm[0]] = parm[1];
            }
            return queryString;
        }
    </script>

Well, there you have it folks!, it’s easy and very straightforward, if you have any questions or run into problems just leave a comment and I’ll help you out.

Big thanks Cedric Kastner for his Gmap Plugin.