How to add Google Search to your Maps API application

Posted by Mark Lucovsky, Software Engineer

The Google AJAX Search API is designed to work seamlessly with the Google Maps API. One way it adds instant value is to allow your maps-based applications to execute a search and then plot those search results on the map. Our model for this is simple and straightforward. Each search result is a JavaScript object that contains a number of properties including a URL, title, array of phone numbers, street address, city, etc. In addition, each search result contains the latitude and longitude of the result.

Adding a search result onto a map is as simple as:

var latLng = GLatLng(parseFloat(result.lat), parseFloat(result.lng));
var marker = new GMarker(latLng);
myMap.addOverlay(marker);


The AJAX Search API team has produced a number of sample applications to teach the basics of search integrated maps mashups. Two of the most popular are My Favorite Places and My Phone List. Take a look and see if they inspire you to add search to your maps based mashups.

As an example of this search enhanced Maps mashup idea, we have built a Google Gadget using these two APIs. Give the new The Google Map Search gadget a shot.

Draggable Markers and GTileLayerOverlays

Posted by Rob Schonberger, Software Engineer

Revision 2.61 introduces 2 cool new features -- draggable markers and GTileLayerOverlays.

Draggable markers

We added draggable markers as a hidden feature in revision 2.46, but today they are making their official debut as part of the Maps API. To make a marker draggable, set the marker option draggable to true when you declare it: var marker = new GMarker(center, {draggable: true});.

When you drag the marker, a little X will appear to mark the spot where the marker will fall. After you let go of the marker, it bounces into place (to let you know how much fun it's having). If you prefer non-bouncy markers, set the marker option bouncy to false.

Try dragging this marker:

GTileLayerOverlays

The Maps API has GTileLayers (which you can use to build GMapTypes) and GOverlays (which you can show on top of a Google Map). Today we're introducing GTileLayerOverlays, which lets you add tile layers without needing to introduce new map types. You can also add & remove them on the fly, unlike map types.

For example, to create a desaturated map, you can overlay it with a white tile overlay at 50% opacity:

 var tilelayer = new GTileLayer(new GCopyrightCollection(), 0, 17);
 tilelayer.getTileUrl = function(tile, zoom) {
   // A more interesting tile server would do something with the numbers
   // tile.x, tile.y and zoom.
   return "http://kml.lover.googlepages.com/white_map_tile.gif";
 };
 tilelayer.getOpacity = function() {return 0.5;}
 map.addOverlay(new GTileLayerOverlay(tilelayer));

If you'd like to start testing these new features right away, don't forget to add the v=2.x parameter to your <script> src, so you get the latest revision instead of the default v2.60.

API v1 Current: 1.31
API v1 Default: 1.31
API v2 Current: 2.61
API v2 Default: 2.60

Revision 2.60 of API v2

Posted by Rob Schonberger, Software Engineer

The latest revision of API v2 is 2.60, which incorporates a fix for a small bug some of you may have worked around in the past: Up until now, calling infoWindow.hide() would make map.closeInfoWindow() do nothing. From 2.60 onwards, hiding an infoWindow and then closingit will still give you an infowindowclose event, which is nice.

Note that we also fixed the Internet Explorer marker sizing issue in last week's revision.

API v1 Current: 1.31
API v1 Default: 1.31
API v2 Current: 2.60
API v2 Default: 2.59