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!

Comments

  1. 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

Where does Google get it's live traffic data from?

Referring to a post that I wrote earlier, Google’s - Live traffic Layer , ever wondered how Google collected this data? I was wondering the other day, how Google received live data to display it on their maps as a layer! I looked up the web and found something very interesting and am sharing the same with you all. As we all know, the traffic layer is available most accurately in several states in USA. Most major metro areas in the US have sensors embedded in their highways. These sensors track real time traffic data. Easy to miss at high speeds (hopefully anyway, traffic permitting), more commonly noticed may be the similar sensors that often exist at many busy intersections that help the traffic lights most efficiently let the most amount of people through. The information from these tracking sensors is reported back to the Department of Transportation (DOT). The DOT uses this data to update some of the digital signs that report traffic conditions in many metro areas. They als...

Learning React in #41Tweets

Sounds crazy, right? 😲Not really. It is possible! This is no magic pill ✨ . There is no substitute for practice and experience , but this will get you started and help you make the right decisions in your React journey. When I started with React, the sheer use of ES6 syntax and difference in the coding style, made me not want to use it. But when I learned and practiced ES6 and then learned and practiced React, that is when I truly fell in love with React 😍 I created a Twitter Moment Learning React ⚛️ which is basically a collection of #41Tweets that will get you off the ground on your React journey. I hope you like this new approach to learning React and hope it is helpful in getting you started 🀝Let me know your feedback and keep the conversation going on Twitter 🐦

Jquery Mobile Form - Slider control

    Input field of type range is newly introduced in HTML5 and is very well styled. The style is further enhanced when using the Jquery Mobile framework and we will see how this can be done in today's post. Jquery Mobile styles the range input type with capsule-corners and adds a circular handle to the slider.   The input's value is used to configure the starting position of the handle and the value is populated in the text input. Specify the min and max attribute values to set the slider's range. If you want to constrain input to specific increments, add the step attribute.   As you drag the slider's handle, the framework will update the native input's value (and vice-versa) so they are always in sync; this ensures that the value is submitted with the form.     The range input elements are available in 2 flavors/sizes - regular and mini. Adding a data attribute data-mini="true" to the input tag renders a smaller sized input el...

Jquery Mobile Listview enhancements and customization

    In this post today, we will take a look at the various enhancements and customization that we can do to the standard listviews. All these enhancements or customization are questions asked by various people on the Jquery Mobile forum. I have tried to put together a solution to some of them.     Let's take a look at a few of them. Some questions are really amazing like " W hen i have 3 nested listview structure and moved to 3rd nested, how to move back to second nested listview? " Now this is a really good question and a nice valid requirement too. When we had see an example on nested listviews  you must have wondered how we would navigate to the previous levels from the current level. Well here is a solution that I had put together.     Another really nice question was " Listview with collapsable listview inside ". This is really a good example to try out. Take a look at the solution that was proposed and also taken from other jsfid...

ES6 101 - For..of

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 😍 😍