Skip to main content

Multiple markers...

            It rarely happens that there is just one point of interest or just one location that you would like to mark! Generally there is a bunch of markers that appear on the map! Specifically, you want a list of latitude and longitude pairs representing the points of the markers you'll plot.

            To store the list of points, you can combine the power of Javascript's array and object constructs. An array stores a list of numbered entities. To access the elements of the array, you must use their numeric indices. So array[0] will point to the first element in the array while array[n] will point to the nth element in the array.

            I will use the following piece of Javascript code to demonstrate how multiple markers can be made to appear on a map using the array structure and the for loop for iteration.



            Nothing here should be much of a surprise! You can see that the google.maps.Marker function is called for each of the markers, so you can see two markers at two different locations on the map. The result above displays the output that is generated. Feel free to add your own locations and more number of markers on the map! Keep following for more examples and more information on GIS! Till next post, happy mapping!
Labels:

Comments

  1. Deepika JainNovember 15, 2010 at 8:51 AM

    Hmm...this is intersting. I executed the code at my end and it worked marveously well!..thank you for the explanation of the code....cheers...keep Going!

    ReplyDelete

Post a Comment

Please leave your comments here...

Recommended for You

The Bicycling Layer...

    Recreational cyclists and bike commuters alike can plot cycle-friendly routes, find trails, and avoid snarling traffic with Google Map's Bicycle layer. Map's bike-friendly, green-toned map layer is very eye-pleasing. The Google Maps API allows you to add bicycle information to your maps using the BicyclingLayer object.     The BicyclingLayer renders a layer of bike paths, suggested bike routes and other overlays specific to bicycling usage on top of the given map. Additionally, the layer alters the style of the base map itself to emphasize streets supporting bicycle routes and de-emphasize streets inappropriate for bicycles.     Let us have a look at the following example. The code has a map which is centered at Pune, India. There are very few cycle tracks in Pune and so you will see just a few dark green lines on the map. But if you would change the latitude-longitude values in the code and center the map at USA, then you will see a...
Post a Comment
Read more

Google Map's Real-Time Traffic Layer...

    You can now check the traffic condition on the road before you leave for work, or a party or to your friend's place. Google's Traffic layer shows the traffic conditions in your area - LIVE!!! Live traffic data is available in major cities in the United States, France, Britain, Canada and Australia, with new cities and countries frequently added. The Google Maps API allows you to add real-time traffic information (where supported) to your maps using the TrafficLayer object. Traffic information is provided for the time at which the request is made. Consult this spreadsheet to determine traffic coverage support.     Let us now have a look at the Google Maps API - Trafiic Layer example. Copy the following code in a simple text file and save it as html. Click on this html file and it will open in your default browser. You will then see the traffic conditions in your area - LIVE...     The output of the above code looks as seen in the r...
4 comments
Read more

Form info window

         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...
5 comments
Read more

On-click polyline

    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 ...
1 comment
Read more

Material UI, Google Polymer & Web Components

    Google introduced Material UI during the Google I/O a few days back. Since then the web is all abuzz with articles about material UI and what Polymer is and how these 2 fit together. In this article today, I will try and helps us all to get a better understanding of these new concepts.     So, let's start with Material UI first. Google has for long been trying to bridge the gap between the Web and the Android worlds with a unified user interface and Google's Material UI is a big step towards this. The new design philosophy is about dynamically adjusting the elements according to screen size, add more white space between elements, provide a lot of user feedback using animations, make use of bold UI colors and be flat and 3D about the design at the same time. Now that sounds really cool, isn't it? Well, actually it is and you will actually appreciate and enjoy it all the more when you watch the following video from this year's Google I/O.   ...
Post a Comment
Read more