The UI Dev

            Amazed? Shocked? by the title? Well don't be. This is true. You can now talk to your Google map. Without even touching your keyboard, you can now talk into your Google Maps to look for places and get directions. If you are using the Google Chrome browser in the U.S. simply click the microphone icon and speak into your computer.               Using voice search can make it easier to find hard-to-spell places (like Poughkeepsie or Liechtenstein) or simply get directions without typing (for example, say “Directions from Los Angeles to San Francisco”).             Hope, you enjoy talking to your Google Maps!

    Having seen a simple hard coded directions example yesterday, today we will have a look at another simple example but not an hard coded one. In today's  example we will see the directions between different states in India. We have two simple list boxes stating Origin and Destination as lists of the states in India. You can select a state from either of the lists and then you will get the directions between the two selected cities.     If you see yesterday's code and today's code you will find a lot of similarities and so  it would be easy to follow. The code will look lengthy, but it is just because of the list boxes code. So don't worry about the code, just go for it.     The output of the above code will look as seen in the results section above. Hope you find this code helpful in understanding the directions services even further. Tomorrow, we will look at another - a bit complex example. Till then, happy mapping. Note:...

    After taking an unintended long break after the 100 th post, I am back with more examples and several more GIS news. Today, we will take a look at a simple example showcasing the use of the Google’s Directions Services. Using the Google’s Direction service, we can calculate the distance between two points, show the path between these two points, calculate the average time taken to traverse this distance and we can also enforce several constraints on this path.     The Google Directions API is a service that calculates the directions between locations using an HTTP request. You may pass either an address (string) or a latitude/longitude coordinate as the origin and destination. If you pass an address as a string, the Directions service geocodes the string and converts it to a latitude-longitude coordinate to calculate directions. The origin and destination are two mandatory parameters for a directions request, whereas several other o...

    In some of the earlier posts, I have shown some examples related to creating Polygons and Polylines on the Google Map using the Google Maps API v3. In addition to this generic polygon class, the Javascript Google Maps API also includes a specific class for Circle to simplify its construction. In today’s example, I am going to show you how to generate a circle or a spherical cap on the map.     A Circle is similar to a Polygon in that you can define custom colors, weights, and opacities for the edge of the circle (the "stroke") and custom colors and opacities for the area within the enclosed region (the "fill"). Colors should be indicated in hexadecimal numeric HTML style.     Unlike a Polygon , you do not define paths for a Circle ; instead, a circle has two additional properties which define its shape:  Center: Specifies the center of the circle using google.maps.LatLng  Radius: Specifies the radius...

    "All work and no play, makes Jack a dull boy!". I also decided to play around with the Google Map APIs, so that we don't become dull! The following is a simple code which will show you how to control the map controls or basically the Google Map UI. So here goes the fun code...     I don't think the above code needs much of an explanation. I will tell you what happens as a result of this code! When you move your mouse over the map, the map controls will become visible, as seen in the result above!     When you will move your mouse out of the map, the Map Controls will disappear. The controls will reappear again once you move your mouse over the map and disappear again when you move your mouse out of the map! Keep going on, have fun...     Hope you enjoy the code. Feel free to drop your comments, doubts, queries, suggestions!

    In today's example we will see how to add 4 maps on the same web page and then play a bit around with some events in Google Maps API. Lets have a look at the code. All that you have to do to get the code working is copy the code in a text file and save it with .html extension. Open this html file in your browser and you will see the four maps in action!     Adding the four maps on a webpage should not be a challenge anymore, and all the more after the example Two Google Maps - Side by side that I shared a few weeks back! All you need to pay attention is to the events. There are two events "drag" and "zoom_changed". As the event names suggest, when you will drag or zoom the first map (upper left map), the remaining three maps will also zoom and pan accordingly! Try it out and leave a comment of what you think of it! You can also drop your queries or doubts about the same here!     The output of the above code appears as seen in th...