Geocoding on Google Maps

Geocoding is the process of converting from address into geographic coordinates which you then can position on the map. It can be accessed directly via an HTTP request or by using a GClientGeocoder object. It is worthwhile to mention two methods of GClientGeocoder object.

1. GClientGeocoder.getLatLng(): this method allows you to get location of a specific location by querying google geoserver. You need to pass two arguments, address and a callback function. That callback function is invoked with one parameter, a GLatLng object of that location, when there is a reply from this service. See example here.

2. GClientGeocoder.getLocations(): this method allows you more ability than the previous one by returning a JSON object consisting of the following information: Status (request, code), Placemark (address, AddressDetails, Accuracy, Point, coordinates,...). Moreover, it supports both standard and reverse geocoding. If you pass this method a GLatLng object instead of a String address, the geocoder will perform a reverse lookup and return a structured JSON object of the closest addressable location. See examples:
geocoding-extraction
geocoding-reverse

Recently, I realized Google has added another information of data returned by this method, ExtendedData which consists of north, east, south, and west of that area. This is quite useful when positioning location on the map with appropriate zoom level. All you have to do, construct a GLatLngBounds object with these data, then call getBoundsZoomLevel() by passing this GLatLngBounds object to determine proper zoom level that fits map view port.


var getLocation = function(address) {
   var geoCoder = new GClientGeocoder();
   geoCoder.getLocations(
      address,
      function(location){
         document.getElementById('txtAddressId').value = address;

         //if this address is found
         if(location.Status.code == 200) {
            var placeMark = location.Placemark[0];
            var latLngBox = placeMark.ExtendedData.LatLonBox;

            //default zoom level is 7
            var latlng, zoom = 7;
            if(latLngBox) {
            //determine zoom level if possible
               var latLngBound = new GLatLngBounds(new GLatLng(latLngBox.south, latLngBox.west), new GLatLng(latLngBox.north, latLngBox.east));
               zoom = map.getBoundsZoomLevel(latLngBound);
            }
            latlng = new GLatLng(placeMark.Point.coordinates[1], placeMark.Point.coordinates[0]);
            map.setCenter(latlng, zoom);
         } else {
            alert('Address is not found.');
         }
      }
   );
}

Load Google Maps Dynamically

Previously, I posted how to load google maps script dynamically for performance reasons. However, when callback function is get called, we could not pass any parameters to this callback, because the callback we passed is the name specified in string.

There is another way if you use multiple APIs from Google, Google AJAX APIs. This framework allows you to load one API key for all supported Google AJAX APIs (including Google Maps) and also provides a common namespace for each API, allowing different Google APIs to operate together. If you decide not to use the Google AJAX API framework, you can continue to use the existing namespace. There is a method from this framework called load() with 2 parameters: moduleName, and callback function. Hence, I could use the same way to load google map except the url to load and call load(). Here is from google documentation.


function mapsLoaded() {
   var map = new google.maps.Map2(document.getElementById("map"));
   map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
}

function loadMaps() {
   google.load("maps", "2", {"callback" : mapsLoaded});
}

function initLoader() {
   var script = document.createElement("script");
   script.src = "http://www.google.com/jsapi?key=ABCDEFG&callback=loadMaps";
   script.type = "text/javascript";
   document.getElementsByTagName("head")[0].appendChild(script);
}


To solve the previous problem, you could actually add the script tag of Google AJAX APIs, which describes more precisely at http://code.google.com/apis/ajax/documentation/. The Google AJAX APIs <script> tag loads a single method, while google.load() which loads individual AJAX APIs. With this method, you can load any specific Google API on demand.


function mapsLoaded() {
   var map = new google.maps.Map2(document.getElementById("map"));
   map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
}

function loadMaps() {
   google.load("maps", "2", {"callback" : mapsLoaded});
}


Experimenting Google Maps with Local Files

I found one link, and I just quote it from http://cafe.elharo.com/web/google-maps-tip-1-experimenting-with-local-files/:

As you probably know using Google maps on a web site requires a custom API key that is locked to the web site. For example, my key is ABQIAAAANzhjmjn_aQro8IDfoVHCkxT-n61mIiazNPHwWTk3s75Ar5J1YhQDxyPhUR-O4Nfg_1iRn1pAUseY4g and every page that uses a Google map includes this script element:

<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAANzhjmjn_aQro8IDfoVHCkxT-n61mIiazNPHwWTk3s75Ar5J1YhQDxyPhUR-O4Nfg_1iRn1pAUseY4g" type="text/javascript"></script>

I’m not giving away any secret by telling you that. You could figure out the same thing using View Source. However. the key is locked to the web site. If you try using that key on a different site, the map won’t load.

This is all well and good. However it’s very inconvenient for debugging, testing, and experimenting, because you can’t load a map on your local file system. Everything has to be tested on the live Web server. You could probably password proterct a directory to play around in, but what a pain.

It turns out that you can use this script element on your local hard drive:

<script src="http://maps.google.com/maps?file=js" type="text/javascript"></script>

Then you can test out and play with Google Maps without loading the file onto the production web server first. Cool!

Phnom Penh Map overlays on Google Maps

I have been too busy lately. I have uploaded a small project (called Oy-Moy) several weeks ago on Google Apps Engine, but I didn't have time to post it in my blog. It is about taking a map (jpeg/png) to overlay on top of Google Maps. Doing this has two ways: one is create a new maptype (GMapType) and another is create a new tilelayer (GTileLayer). The belows are list of links that show how to do this. I found the last link, http://www.bdcc.co.uk/GoogleCrunch/Crunch.htm, is the easiest way to do. It is abit slow because the tile images are too big in size about 132kb per tile. I just download this image somewhere on the internet and try this with google maps api.

http://groups.google.com/group/Google-Maps-API/web/more-info-gtilelayer-gtilelayeroverlay?pli=1
http://code.google.com/apis/maps/documentation/overlays.html#Tile_Overlays

Here is the link of my project: http://oy-moy.appspot.com/

Load map script dynamically

I posted a topic in google maps api group asking how to load a map script dynamically. Thanks to igloo that response this to my question. The Maps API can be loaded dynamically by creating script tag and append it to the head section of the html page. You can call your own function to run when the loading of the map is finished. Here is a sample code.

    function loadScript(callbackName) {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA-O3c-Om9OcvXMOJXreXHAxQGj0PqsCtxKvarsoS-iqLdqZSKfxS27kJqGZajBjvuzOBLizi931BUow&async=2&callback=" + callbackName;
      document.body.appendChild(script);
    }

You can test here: http://gmaps-samples.googlecode.com/svn/trunk/dynamicloading/scriptappend.html

http://groups.google.com/group/Google-Maps-API/browse_thread/thread/a8bc1539889b5fd/62f173b55e9a2e29?lnk=gst&q=dynamic+loading#62f173b55e9a2e29

Some Hacks in Google Maps

1. You cannot setMapType before setCenter
2. To change cursor the the map, look for the div inside map_div that has style cursor. So, normally in my application in the second child div. This type I found in http://groups.google.com/group/Google-Maps-API.

$('map').down(1).style.cursor = "pointer";

3. To use custom cursor for the map. This type I could not in Google Groups at all. It seems no one can change to a custom cursor. But I try, using Firebug to monitor the DOM changing while I use Google Maps. And I found that, Google uses this format in their style, so I try it with javascript in my both browser IE 6 and Mozilla 2.0.0.5, and It works.

$('map').down(1).style.cursor = "url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur), default";


4. Making GMarker drag smoothly without flip and flop. This one I get from Mike http://www.econym.demon.co.uk/googlemaps/. The first thing you have to do is:
Change dragCrossImage of GIcon to Invisble Image
Set dragCrossMove of GMarker to true
Set bouncy of GMarker to false
Finally, if it doesn't work, set GIcon.maxHeight = 1 or less than 1. Don't set to zero otherwise you will get the default height.

5. Testing a point is inside a Polygon or not, see this http://econym.googlepages.com/inside.htm