A simple marker example

Once you have set up your map as seen in the earlier post you can now place a marker at your point of interest on the map. A marker is a symbol that is used to point something interesting or important on the map! A marker can be overlayed on a map statically, dynamically i.e. when a user clicks on a map, a marker appears on the map. Markers can also be loaded from an XML file, a plain text file and also a CSV file. We will be seeing an example of each in the subsequent posts.

Later on we will also see how to add an information window to the markers on the map! But that will be at a later stage. Let us have a look at the following code first which will add a marker at the Rajya Sabha, New Delhi.

And here you are...You have placed a marker at your point of interest. The output will look as seen in the result section above. Feel free to change the point of interest and see a marker at a location of your choice. Happy mapping!

Comments

Recommended for You

Playing with the markers and info window bubbles...

In the last few posts, we have seen some marker examples and some information window examples. Now, lets do something interesting combining these two things. Just writing that "This is an info window" in the information bubble is not very interesting! And I know this...Have gone through the same phase! So, today we will do something interesting! We will display the latitude- longitude co-ordinates of the point that the user clicks on the map! Doing this is not at all complex! Copy paste the following code and you will see for yourself a map coming to life! The output of the above code looks as seen in the result section above! If you have any queries regarding the above code please comment on the blog post or feel free to contact me at my mail ID .

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

CSS inheritance sequence

Starting today, I will also write about a few things CSS apart from Google Maps Javascript API and Jquery Mobile . I will cover some really interesting things in CSS and keep updating this blog as and when I learn something new and think its worth sharing with you all. Today we will look at a very common mostly known thing in CSS - the inheritance sequence of CSS. Most of you reading this post must be aware that there are 3 ways in which you can include CSS into your web application. External Stylesheet Internal Stylesheet Inline Styles External Style Sheet An external style sheet is ideal when you are writing a style that would be applied across multiple pages. The external style sheet gives the developer lot of control over the look and feel of the entire website or web application. The external style sheet is included using the the "link" tag which is included in the head section. <link rel="stylesheet" href="styles/de...

Overlays - A complex example

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 .

Jquery Mobile - Listview with data-inset property

In the previous post we looked at a basic example of the jQuery Mobile listview. The listview in jQuery Mobile stretches 100% of the width with sharp edges and straight corners. If you wish to have rounded corners for your lists you need to make use of the data-inset="true" property. Lets take a look at the example below. The lists as seen in the result below have rounded corners as opposed to the straight edges in the example in the previous post, where we had not made use of the data-inset property. When we say that we did not use the data-inset property, we mean that the value of data-inset property is "false". UPDATE: The following example makes use of the next stable version of Jquery Mobile 1.3.1 Hope you have followed the post. Do let me know your feedback on the same and drop your commenets below.

The UI Dev

Search This Blog