Skip to main content

Fusion Table Layer...

    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 example we are required to specify mapTypeID as 'roadmap' or 'satellite', etc.
  • Look up the line layer = new google.maps.FusionTablesLayer(376526). The number in the brackets is the "dsrcid" of the fusion table. Every Fusion Table has this dsrcid and can be seen in the address bar when the Fusion Table is opened.
    You can copy the above code in a html file and open it in your default browser. You will see the Fusion Table Layer on Google Map in action! The output will be as seen in the result section above.

     I have used a ready-made publicly shared Fusion Table. You can also create your own Fusion Table and share it with the world! If you have any queries regarding this example or Fusion Tables leave a comment! Till then happy mapping!
Labels:

Comments

  1. AnonymousMay 10, 2012 at 11:56 PM

    Hello, Thanks for the tutorial . It's simple to understand. I however wanted to know how i can merge my created table with the google's weather forecast table and select the only the data that i would want to feature on the site. My address is ojwangwachiaje@gmail.com.

    I would really appreciate any help that you would accord to me

    ReplyDelete
  2. Antony OjwangMay 11, 2012 at 12:00 AM

    Hello, Thanks for the tutorial . It's simple to understand. I however wanted to know how i can merge my created table with the google's weather forecast table and select the only the data that i would want to feature on the site. My address is ojwangwachiaje@gmail.com.

    I would really appreciate any help that you would accord to me

    ReplyDelete

Post a Comment

Please leave your comments here...

Recommended for You

ES6 101 - Class

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍
Post a Comment
Read more

CSS - Counter-increment and counter-reset

Today we will take a look at a couple of CSS properties that are usually used together but not very frequently used. We will be talking about the counter-increment and counter-reset properties. As the name suggests counter-increment and counter-reset definitely have something to do with counters. Let's take a look at the example below which will clearly illustrate the usage of these 2 properties. The implementation is very clear and straight-forward. The only question that remains now, can these CSS properties replace the ordered list (ol-li) HTML code? Do let me know your comments and feedback. Would you use these CSS properties against the standard ol-li structure?
Post a Comment
Read more

Side-scrolling web pages issue with Jquery Mobile - Issue #5748

    While developing a Jquery mobile based application, I came across a issue that is observed only on the iOS 6 devices and Android 4.2.2 devices.     What is the issue?         Web pages are side scrolling on iOS6 and Android 4.2.2 devices.     How did I debug the issue?         This bug was in our applications bug tracker for a long time and since I am the lone front-end developer the project that I am working on, my manger was pushing me to close this bug quickly. I had used the perfect mobile meta tag and still the web pages were side-scrolling. None of my divs had width that was going beyond the device widths and still there was this issue. That day, I decided to break down my HTML to pieces, and tested each piece on the dreadful iOS 6 device. I came down to a textbox that had some placeholder text in it and there it was, the issue was glaring me in my face. ...
Post a Comment
Read more

Removing overlays

    "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...
Post a Comment
Read more

KML Layer Example

         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". ...
Post a Comment
Read more