Google Maps V3 Tips and Tricks

While studying for the google maps certification exam I made this list of tips about the 3rd version of the API. Useful as a recap of the most important features of the API.

Tips and Tricks:

  • This version of the API was designed to work well on mobile devices. To check the device type and make the appropriate settings, use the navigator.userAgent property.
  • You can set a default language for the map and how it behaves based on a given country or territory. For this, the language and region parameters must be set when loading the API.
  • It’s best to load the script asynchronously, to make sure the rest of your pages content renders properly.
  • The basic objects you should know are: map, latlng, marker.
  • There are two types of events: users events and MVC state changed events. User events are triggered when the user clicks on the map, goes with the mouse pointer over the marker, etc. MVC state changed events are triggered when the map’s properties are changed. You can also handle DOM events.
  • User events can pass arguments, MVC state changed events do not.
  • There are 3 types of controls: navigation, scale and maptype.
  • The default controls can be disabled by setting the Map’s disableDefaultUI property (within the Map options object) to true. The map options object is also used to add or remove controls, by setting the appropriate property value to false.
  • The are some options you can choose for controls, by modifying the navigationControlOptions, scaleControlOptions or mapTypeControlOptions objects. The style and position of the controls can be set this way.
  • You can also create custom controls. Steps to create one: drawing the control, positioning, handling events.
  • Most custom overlays you can use are: markers, polylines, polygons, info windows and custom overlays.
  • If you wish to manage a set of overlays, you should create an array to hold the overlays and amnage each of the overlays in it one by one.
  • Ground Overlays can be used for rendering images on the map.
  • Geocoding means turning addresses into coordinates (longitude and latitude). Using one of the provided services, you can use geocoding and also reverse geocoding.
  • The calls to the geocoding service are asynchronous, a callback method must be specified to be executed when the result is received.
  • You can also use the google maps API to find directions between two places and properly show them on the map.
  • The directions service is used for finding the directions. The call to this service is also asynchronous.
  • To view the directions you need to use the DirectionsRenderer object.
  • To make the directions draggable you only need to set the draggable option for the renderer to true.
  • You can set waypoints for routes.
  • The routes are formed of legs (between waypoints, or one leg if there are no waypoints set) and steps (more steps form a leg). You can view all of these using the DirectionsLeg and DirectionsStep objects.
  • There’s also the elevations service that helps you find the elevation of your locations. This too is asynchronous.
  • The last service provided is the street view service. To add this one you just need to add the Street View control in the map options.
  • The basic map types are: ROADMAP, SATELLITE, HYBRID (roadmap + satellite) and TERRAIN.
  • You can add new types and also change the properties of the existing ones.

For more info on Google Maps V3 read Developer’s guide.

HTML 5 Geolocation API

I’ve played today with this feature of HTML 5. If your browser supports it, using this, everyone can find out your exact location (it really is pretty accurate!). You will have to permit the browser to share your location.

Here’s the app I’ve made.

Even if it sounds a bit spooky, knowing where your site’s viewer are from may come in handy in various situations. And this method it more accurate than using the user’s IP address. This API uses Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs to find the location.

You can read the api specification here.

Useful tool: syntax highlighter

I’ve been looking for a while for a tool for showing source code in my blog posts. I found some tricks, but it still wasn’t what I’m looking for. I’ve just found this tool: the SyntaxHighlighter by Alex Gorbatchev.

It’s a code syntax highlighter developed in JavaScript. It works great and is also really easy to use for wordpress. There’s a plugin for it 🙂


I’ve finally found some free time to add some content to my site. I still need to make some design improvements, but it’s mostly finished. Wooh!

Now that this is done, I did a bit of reading about search engine optimization or how to make your site show up in online searches.

Here are some useful tips:

I’ve tried some of the techniques there, now I’m waiting to see if my site will show up more often in searches!

Another useful tool for improving your website are the Webmaster Tools provided by Google.