You might remember the previous version of my distance finder. It’s a small google maps project that helps you find the distance and the route between two points.
I have decided to improve the layout of the project and add new features. Here’s the new version!
A major improvement is the fact that you can now choose a ‘via’ address for the route. Also, the app is now available in both English and Romanian.
More updates will follow as I’m working on improving it even further!
My fourth google maps tutorial was published on 1stwebdesigner.com. The tutorial covers another of google maps features, street view.
I have built an app for this tutorial, an interactive visit of Paris. You’ll be able to visit certain locations, walk through Paris or take virtual tours.
You can read the tutorial here and also play with the app.
You can also check out the source code on github.
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.
I’ve played again with the google maps api and started working on an interactive travel map. The idea is that everyone can add new locations and view the locations added by others.
I’ve also written a tutorial about this, you can read it here.
I’ve added some more features to my distance finder. You can now share your search results with your friends on twitter. I’ve used twitter’s @anywhere to do this.
If you want to find out how I did this, I’ve also written a tutorial.
I’m planning to also integrate facebook so you’ll be able to share your results on there too 🙂