|
Google maps panning example |
||||||||
I liked the look of it, but wanted to create it in JQuery as it required a lot of custom server side code, and several expensive server software installations. Also I'm migrating away from the flash / flex arena into a more purist JQuery / AJAX development mindset.
There is a full example of Google Maps panning here
First off we need to setup our page, Google maps requires an API key, so I'm setting that using ColdFusion, and passing it on the URL to the Google JavaScript API call. This validates against your URL, and is free. If you don't have one, you can get one here: http://code.google.com/apis/maps/signup.html.
After this I'm loading JQuery and the maps JS.
2
3<s/cript type="text/javascript"src="http://www.google.com/jsapi?key=<cfoutput>#request.apiKey#</cfoutput>"></script>
4
5<s/cript type="text/javascript">
6 google.load("jquery", '1.3');
7 google.load("maps", "2.x");
8</script>
The next block of code is the html content of the page. It is really small as most of our content will be dynamically inserted from the Google Maps functions.
The important bits are the 'map' div, which will hold our map graphics, and the ul 'list' container. This will be populated with a series of random Geo points from Google maps.
2
3 <div id="map"></div>
4 <ul id="list">
5 <div id="header">Random points</div><br id="clear-all">
6 </ul>
7
8 <div id="message" style="display:none;">
9 Label
10 </div>
11
12</div>
Now we can create our map and assign it to our container ('map'). Next I have created a variable called 'cheltenham' , which has the lat long of (yes you guessed it!) the town of Cheltenham. This is the initial starting point for the map. Lastly we use the setCenter method to position the map, and set the starting zoom level
2 $(document).ready(function(){
3
4// set the element 'map' as container
5var map = new GMap2($("#map").get(0));
6
7// set the lat long for the center point
8var cheltenham = new GLatLng(51.89487062921521,-2.084484100341797);
9
10// value 1 is the center, value 2 is the zoom level
11map.setCenter(cheltenham, 9);
Now we will create ten random points on the map. The idea is to display the panning function, so I don't really care where they are. We get the boundaries of the map, then we convert them to lat long coordinates, then we loop over them ten times invoking the map.addOverlay to create new markers each time.
2 var bounds = map.getBounds();
3 var southWest = bounds.getSouthWest();
4 var northEast = bounds.getNorthEast();
5 var lngSpan = northEast.lng() - southWest.lng();
6 var latSpan = northEast.lat() - southWest.lat();
7 var markers = [];
8
9for (var i = 0; i < 10; i++) {
10 var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
11 southWest.lng() + lngSpan * Math.random());
12 marker = new GMarker(point);
13 map.addOverlay(marker);
14 markers[i] = marker;
15 }
Next we will create a function to handle each of the markers. This function populates the ul list created above with a list of the markers. It also attached a click event to each marker that uses the function 'displayPoint', passing in the marker reference and index.
2 $(markers).each(function(i,marker){
3 $("<li />")
4 .html("Point "+i)
5 .click(function(){
6 displayPoint(marker, i);
7 })
8 .appendTo("#list");
9
10 GEvent.addListener(marker, "click", function(){
11 displayPoint(marker, i);
12 });
13 });
Now we create the displayPoint function referenced above. This has an event listener to watch for the end of a move event. It also calculates to distance from the current position to the clicked marker. It then uses the panTo method to pan the map display to the selected marker. (marker.getLatLng).
2 $("#message").hide();
3
4 var moveEnd = GEvent.addListener(map, "moveend", function(){
5 var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
6 $("#message")
7 .fadeIn()
8 .css({ top:markerOffset.y, left:markerOffset.x });
9
10 GEvent.removeListener(moveEnd);
11 });
12 map.panTo(marker.getLatLng());
13 }
It looks like a wedge of code, but if you view the source of the demo below it is pretty small.
In the next post I will add the AJAX polling to dynamically get the markers from a datasource.
There is a full example of Google Maps panning here
http://iplauction2016.in/
http://icct20worldcup2016live.org/
http://icct20worldcup2016tickets.com/