Skip to main content

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

ES6 101 - Destructuring

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

What do you do with Google Maps API...?

            By now we definitely know that Google Maps API stands out amongst other applications in creating interactive world maps. There are a couple of others which may be static, 2D or even 3D, etc, but Google maps have unique and distinctive features that make experienced webmasters prefer them over others.             Besides, being a great way to locate and navigate to places, Google maps API also provides many area and length measurement functions. These APIs’ allow for the development of web applications like measure distances and land features online with the Google maps embedded in them.             The Google Maps API has been considerably the most popular mapping API in the world. The Google Maps API delivers the standard interactive, easy-to-use features which are beneficial for your business. Google Maps A...

Google Map within an image

    Hope you'll enjoyed the last post describing how two maps can be placed side-by-side on the same webpage ! Most of you'll will enjoy today's code example too! All of you out there who work on Google Maps API, must have visited the API home page several times! You must have seen the map within the Google Nexus Phone frame there! It appears as though there is a map visible on the mobile screen! One of friend asked me the other day if I could implement that, and I did it and here is the code that I am sharing with you all!     I have used an I-Pad frame and am displaying a map centered at India within it! Here is the code!     The output of the above code is as seen in the result section above! The map that is appearing within the frame is not just an image but can be dragged like any other Google Map! Enjoy the code. It is very simple to understand!     In case you have any queries regarding the same, feel free to le...

ES6 Template Literals

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

ES6 101 - Default parameters

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