Adding Markers on Google Maps (with more functionalities)

I modified my previous markers example to show off further functionalities:

• To pop up an info window with marker description.
• To handle clicks and create new markers.
• To use markers with custom images.

Adding Markers on Google Maps

I created an example of a Google Map application where you can plot markers on the map by specifying coordinates.

Creating markers is fairly simple:

1. Create a new instance of GLatLng object. The GLatLng holds the coordinates of your marker.

// create new location object
var location = new GLatLng(latitude, longitude);

2. Create a new instance of GMarker with the GLatLng object.

// place new marker
var marker = new GMarker(location);

3. Use the addOverlay method to create a new overlay in the map.

map.addOverlay(marker);

Just like we add an overlay to create a marker, we clear a marker by removing an overlay.

map.removeOverlay(markersArray[idx]);

The markersArray[idx] is the GMarker we would like to remove. If you are not using an array to keep your markers, you can pass in an instance of GMarker directly.

A Simple AJAX Example: Searching Australian Postcodes

I have been trying out AJAX tools such as the YUI to make web applications more responsive. Reminding myself that AJAX stands for Asynchronous JavaScript and XML, I thought I’d try to understand better then asynchronous side of it.

The xmlHttpReq object is responsible for the responsiveness of an AJAX application. It allows the JavaScript to make asynchronous HTTP request (POST or GET) to a script. The same xmlHttpReq object handles the output of the script through a callback function.

The example that I wrote is an Australian postcode lookup. Basically, the user enters a postcode which is then posted by the xmlHttpReq object to a PHP script. The script returns comma delimited details of the postcode, which is processed by the callback function, and displayed nicely to the user.

Click here to see working example.