The UI Dev

    Today we will have a look at a simple geocoding example wherein we will see the effects of region biasing on geocoding. First things first. What is region biasing in geocoding and why is it required; would be an obvious looking question here. The answer to this is pretty simple and straight. Region biasing means returning a geocoded address so that it falls in the region specified. Consider the example of the city named “Hyderabad” which is  present in India as well as Pakistan. Now, suppose that my target users are from India, then by using the region biasing property, the geocoder will always return the “Hyderabad” in India when a user enters a request for the same. I have taken the same example in the code, so that the region biasing geocoding concept would become much more clear.     The code goes here…     The code is pretty simple and does not need an explanation. The crux of the code lies in the following line of code. ...

            Have you seen the Google+ Demo Website ? It is making use of the Google Maps API as a presentation canvas. Now, that's pretty cool!            Check it out!

    How good I am feeling to post a code example after such a long time! It's been all "news" over the past so many posts! Well now that I am finally doing a code example, I am posting a very highly requested code sample. Placing two Google Maps on the same page (Now that's simple you would say!), but side by side. Now this is the thing that most people struggle with. Well, implementing the second part is also very simple, as you will see in today's code.     Let's see the code. Here it is!     The output of the above code will be as seen in the result section above.     As most of you will realize, there are two maps, one centered at "Pune" and other at "Noida". Why I chose these two locations? Well, just like that!...The main issue of concern is how the maps appeared side-by-side and not one below the other as would be normal behavior of two "div" elements used in the same page. Now here is the trick! Check out the...

    It's been long since I last posted an example here...But I am finally posting one again and it is about creating a GeoRSS layer on the google base map, using the Google Maps API.     The first question will be, "What is GeoRSS?" GeoRSS is nothing but geographically tagged or geographically referenced RSS feeds. RSS feeds having latitude- longitude information of the place of feed. Whether it's pictures from your vacation, favorite places on the globe, or the hiking trails you like to visit, all you have to do is geo-tag them and then load it up. This idea that you can view data from external sources inside Google Maps is really exciting.     Moving on to the example...There's no great deal about it. Copy and paste the following code in a html file and open it in your default browser. Here follows the code...     The output of the above code looks as seen in th result section above. The best thing about the GeoRSS l...

    In continuation with the previous example on Fusion Table, we will have a look at another Fusion Table layer example. Today's point of discussion is heat map! What is a heat map? A heat map is geographical representation of data where the values taken by a variable in two-dimensional map are represented as colors. Higher the value of the variable, that place on the map would be represented with a deeper color.     This example is very much similar to the previous one, just for one minor change! Let us have a look at the code.     I have just used a readily available Google Fusion Table for this example. Any anomalies in the data is not my responsibility! Copy the above code in an html file and open it in your browser! You will see the fusion table heat map layer in action! The only change in this code from the previous one is that, the heatmap property of the fusion table layer is made true! The output of the above code looks as s...

    Today we will have a look at the "Fusion Table" Layer example. But before we start with the actual code, we will have a look at what Fusion Table is. Google Fusion Table is a free service for sharing and visualizing data online. It allows you to share data, merge data from multiple tables into interesting derived tables, and see the most up-to-date data from all sources. There is a lot of documentation about Google Fusion Table available on the web. You can visit their home page or the Google Research Blog to gather more information about Fusion Tables.     Let us have a look at the following code. The code is very short and simple to understand!     The few things to look out for in the above code are: The manner in which mapTypeId has been specified! In other Google Maps API v3 examples, we have seen that we specify mapTypeID as ROADMAP, SATELLITE, etc. i.e., all the letters are in uppercase and not in quotes! However, in this...

         Until now, we have covered various examples involving markers, polylines, polygons, i.e. creating overlays. We have also seen other examples to remove overlays! We will now move on to some other concepts. Today we will have a look at what KML is and how to create a KML layer!          Let us first understand what KML is and why is it necessary. KML stands for Keyhole Markup Language which is an XML schema for expressing geographic annotation and visualisation within 2D maps and 3D Earth browsers. The KML file specifies a set of features (place marks, images, polygons, 3D models, textual descriptions, etc.) for display in Google Earth, Maps and Mobile, or any other 3D Earth browser (geobrowser) implementing the KML encoding. Each place always has a latitude and a longitude. Other data can make the view more specific, such as tilt, heading, altitude, which together define a "camera view". ...

    In the last post we have seen what an overlay is and we have also seen a small simple overlay example as well. Today's example is a bit complex as compared to the last one, but is not at all difficult. We will directly jump to the code instead of having any more descriptions and stuff. So, here's the code.     The output of the above code looks as seen in the result section above. You need to click on the map to place a marker on the map. You can place multiple markers on the map by clicking on the map multiple times. By clicking on the "Clear overlays" button all the markers on the map will disappear. By clicking on the "Show all overlays" button, all the cleared, but not deleted markers will reappear. Clicking on the "Delete overlays" buttons will remove all the markers permanently.     If you have any doubts or queries regarding the code please leave a comment or drop me a mail .

    "Overlays"....!!! What is this now! Never heard or used it before? You might immediately say "NO"...But, actually all of you have already seen what an overlay is and you have also used it! Now you would say "When!?!?" Well, all of the markers, polylines, polygons that you have created are overlays. Overlays are objects on the map that are tied to latitude/ longitude coordinates, so they move when you drag or zoom the map. Overlays reflect objects that you add to the map to designate points, lines, areas or collection of objects.     Till now we have seen how to create an overlay. In today's example we will see how to remove an overlay. In this example we will create markers on click. But the difference will be that when you create a new marker, the earlier one will disappear from the map. So at any given time there would only be one single marker on the map! Note that removing the marker does not delete the overlay; it simply removes the overlay...

    After creating a simple polygon and then creating an on-click polygon, we will today see how to create a polygon which can be changed, altered, dragged; basically edited on the fly. We will also cover the geodesic polygon in this example itself. If you want to read and understand more about what "geodesic" is, read this post.     Nothing exceptional about the code that I think needs explanation! You can create a geodesic polygon which can be edited on the fly. Click, hold and drag any marker, and the two polylines connected by this marker will change accordingly. By clicking on the marker, that marker would disappear, and the polygon will reform itself! Here is today's code.     You can copy the above code in a text file and save it with .html extension. Click on this file; it will open in your default browser and you will see an exciting map in action! The output of the above code appears as seen in the result section above! If yo...

    Yesterday we had a look at a simple polygon example. But that example was not exciting as it was all hard-coded with no user interaction and which means no fun! Today's example will deal with creating a polygon on the fly, i.e. an on-click polygon in action!     The code for creating a polygon is very much similar to creating a polyline! The only difference is that you need to replace "Polyline" by "Polygon" in such examples. Let's head on to our code.     The output of the above code can be viewed in the result section above. If you have any doubts or queries regarding the above code then please comment here or feel free to drop me a mail ! Till then, happy mapping!

    After having seen a number of examples of polyline using the Google Maps API, the obvious next step is to create polygons on the map! Today, we will start with a simple polygon example and later proceed with a few more ranging from simple to a little more complex! Let us now move on to the code. Copy the following code in a text file and save the file with .html extension. Click on this html file and it will open in your web browser. You will now see your map in action!     In this example we will see a hard-coded polygon, i.e. with no user interaction! No user-clicks, no drags, nothing at all! The polygon will directly appear on the map! Following is the code for the same.     The output of the above code is as seen in the result section above. If you have any doubts or queries regarding the above code, leave a comment here or feel free to drop me a mail !

    Following up on the last example where we saw how to add a hard-coded polyline to our map, today we will see a more user interactive polyline example. In this example we will discuss on-click polyline! What you need to do is, copy the following code into a txt file and save it with dot html (.html) extension and then view it in your browser. So here goes the code!     The output of the above code will be a map centred at Mysore. Click on the map for the first time and a marker will appear there. On the next click, another marker will appear with a polyline between the 2 markers. This will continue for all further clicks and here you have your "On-click polyline" running! The map looks something like seen in the image below!     The next step to this code will be creating a polygon. We will see examples to create polygons on the map at a later stage! If you have any queries or suggestion, please drop a comment here or feel free to ...

            Share a message of holiday cheer with custom online cards from Google Maps this New Year! Think Green, Go Green this New Year. Save paper and that too with a difference! This new year you can send your friends, family and loved ones an e-card which is out of the box!             You can choose from 10 different online holiday cards and add your personal message. Now, after reading this you will think what's so different here! The surprise is yet to unfold...You can include specific directions, a Street view image or your favorite place on the inside of the card!             So now planning your New Year party will become easier. You can send an e-card with directions from your friend's place to the place where you are hosting your New Year party! Won't that be fun!       ...

    We have seen a number of examples for markers and info-windows. We can definitely move ahead now with other things in Google Maps API v3. Today we will have a look at polylines. Today's example will show a hard-coded polyline, but later on we will have a look at creating polylines on the fly. We will also create polygons and calculate the geographic area and more but at a later stage!     Let us now first have a look at today's polyline code. You just need to copy and paste the code that follows into a text file and save it as .html. Double-click on the file and you will be able to see the map in action.     The output of the above code looks as seen in the result section above! The code is very simple and does not require any special explanation I guess! We have made use of an array to store the co-ordinates that form the polyline on the map! Rest is mostly as usual!     Please feel free to drop me a line about t...

    We have now seen numerous examples of markers and info-windows in Google Maps API v3. We will now see a last example where-in we will replace the customary marker icon with an icon of our choice! In the example that follows, I have shown 5 beaches in Goa along the Konkan coastal strip! These are nothing but markers, just with a different icon! Lets have a look at the following code!     The output of the above code looks as seen in the result section above. This is a simple code that goes here! If you have any queries or doubts or suggestions regarding this example you can comment on the same or feel free to drop me a mail ! In the meantime...Happy Mapping!

         "Why does this bubble not dance?" asked my friend's 6 year old sister referring to a marker she was seeing on the map! So I decided the this marker needs to be animated! So, I developed the following code which shows a marker that bounces on its position and can also be dragged anywhere on the map!         The following is the code for the "dancing marker"... <html> <head> <title>Google Maps JavaScript API v3 - Bouncing marker</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var marker; var map; function initialize() {     map = new google.maps.Map(document.getElementById("map"),     {         zoom: 5,               mapTypeId: google.maps.MapTypeId....

         We have seen 2 Google Maps API v3 examples wherein we have retrieved the latitude-longitude co-ordinates of the point of click on the map. In the first example we have displayed the co-ordinates in the information window and in the second , we have displayed the co-ordinates in a form in the information window.         Today we will create a code to retrieve the latitude longitude co-ordinates in a text box while simultaneously a marker appears on the map as well. So, here goes the code. <html> <head> <title> Google Maps API v3 - Adding marker on Click and retrieving the co-ordinates in a text box </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map;    //When using event as a parameter to a function declare map, strictly as a global variable fun...

         This is something that will demonstrate to you the power of mapping! This is a Google Maps API v2 example, but just copy and paste the code in an html file and you will see something very cool! This will prove that mapping is real fun!          Let's have a look at the code first. Copy this code in your html file. Don't worry about the length of the code and the post in general. Just execute the code and you will surely enjoy what you see! <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title> Drive Along </title> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAu3HXU_hLdVPTFGqLed_FCxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQbblEPYBGNoRsuuSU9aBfSq4VAZA" type="text/javascript"> </script> <script src="http://econym.org.uk/gmap/epoly.js" type="text/javascript"> ...

         Today we will look at a Google Maps API v3 example to add a form in the information bubble! This is usually required when we wish to accept some data/information from the user! This data can be saved to a server in the form of an XML file or a database! The information can then be retrieved back at a later stage, when necessary!          In this example we will only look at form in the information bubble! The connectivity part with the server will be discussed in another post! So, today's code snippet is as seen below! <html> <head> <title> Google Maps API v3 - Adding marker and info window on Click and creating a form in the infowindow with the lat-lng information in it. </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map;    //When using ev...