|
Dynamically adding markers to Google maps |
||||||||
Following on from a previous article I wrote about (Google maps panning the next step in my Google mapping project is to be able to add markers to a Google map dynamically.
This article deals with how to translate a location into a latitude and longitude using Google, and how to send and add markers from a database into a Google maps via a remote service, using AJAX and JSON.
There is a full example of the finished application here: Demo of dynamically adding markers to Google maps
|
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
|
Firefox not displaying Google maps generated images |
||||||||
My latest Google maps lookup template was not working in Firefox 3.n. It was working fine in IE 8 (and 8) so I thought maybe IE was compensating for some shaky JavaScript code, and 'working out' what I was trying to do and fixing it for me.
After spending half an hour painstaking going through my Google JavaScript and removing everything out of my FuseBox framework, just in case anything was mysteriously interfering, I was at a dead end.
A quick flick around online and it seems that there is a setting in FireFox that blocks this sort of functionality.
- Type 'about:config' (without quotes) in the browser's address bar.
- Type 'image' (without quotes) in the 'Filter' field.
- Verify that 'dom.disable_image_src_set' is set to FALSE.
- Verify that 'permissions.default.image' is set to 0 (the default setting).
For some reason in my FireFox installation the 'permissions.default.image' was set to 1, which blocks the function return from Google.
Google has a tech note on it here:
http://maps.google.com/support/bin/answer.py?answer=18529&topic=10789
It is really frustrating when 'controls' are set outside of the development environment. Now to put all my code back!
|
Geo coding Latitude and Longitude address in coldfusion using CFhttp |
||||||||
One piece of recently functionality to a site I'm writing is the ability to look up places on a Google powered map.
There are a variety of ways to insert a Google map into your site, but the first real hurdle is the lookup code.
Google does not use an address to position its map, it uses the Latitude and Longitude co-ordinates to place the map area around the desired location.
Google has pretty extensive documentation around this here:
http://code.google.com/apis/maps/documentation/geocoding/index.html
Rather than translate the locations on the fly on a per-hit basis I thought I would perform the lookup when the record is submitted to the database, that way I can cut down the number of google hits, and just reference the local data. Google also prefers this method, as it is less process intensive on their end of things.
First you need an API key:
http://code.google.com/apis/maps/signup.html
This application already has methods for setting the data in a table, so I am simply going to call another packaged method to calculate the latitude and longitude, and store them in the table with the other data.
2 <cfargument name="address" displayName="Address to Geo" type="string" hint="String of the address to Geo code" required="true" />
3 <cfset var geoDetails = structNew()>
4
5 <cfset var apiKey = "Your API key here">
6
7 <!--- initial string --->
8 <cfset var requestString = "http://maps.google.com/maps/geo?">
9
10 <!--- q= address to geo code --->
11 <cfset requestString = requestString & "q=28+Morley+Street,Swindon,SN1+1SG" & "&">
12
13 <!--- key = API key --->
14 <cfset requestString = requestString & "key=" & apiKey & "&">
15
16 <!--- sensor = does the requestor have a location sensor? --->
17 <cfset requestString = requestString & "sensor=false" & "&">
18
19 <!--- output = output format --->
20 <cfset requestString = requestString & "output=csv" & "&">
21
22 <!--- oe = output encoding format --->
23 <cfset requestString = requestString & "oe=utf8" & "&">
24
25 <!--- gl= Country code pointer --->
26 <cfset requestString = requestString & "gl=uk">
27
28 <cfhttp url="#requestString#" method="get" result="response"></cfhttp>
29
30 <!--- returns 4 elements statuscode/accuracy/lat/long
31 Higher accuracy is better --->
32 <cfset geoDetails.status = listGetAt(response.filecontent,'1',',')>
33 <cfset geoDetails.accuracy = listGetAt(response.filecontent,'2',',')>
34 <cfset geoDetails.lat = listGetAt(response.filecontent,'3',',')>
35 <cfset geoDetails.long = listGetAt(response.filecontent,'4',',')>
36
37 <cfreturn geoDetails />
38 </cffunction>
As you can see from above, I am simply creating a text string URL, and using cfhttp to GET the result from http://maps.google.com/maps/geo?
The screenshot below show the returned responses, and the http status code.
The result is parsed into a struct and returned to the parent function to be stored. Far less overhead than doing this for every map call.
Please note that this is far more heavily commented for Blog purposes. Now to actually call the service using the lat and long variables stored, but thats another article.
