replacing default markers with custom markers in google maps api

In this post we will write out a html page containing a script that would show how to to replace default markers with custom ones when creating a web map using google map api.

Screenshot 2016-06-30 06.13.59

Below is the source code for the map in the screenshot above. Follow the tags for the explanation.

custom icons from file - Notepad-001

A –In the header section, Insert the link to the google map api javascript library and your API key.B– Create variable objects point and point2 and define the geographical location of the points .C– Create variable objects to load the markers onto the map. We assign the markerOption ‘icon’ and input the url of our png image icon.

See live map at my github page by clicking the link :http://htmlpreview.github.io/?https://github.com/mayotunde/google/blob/master/custom%20icons%20from%20file

Download the plain text file version of the source code here:https://www.dropbox.com/s/4aqzckgro97aksq/custom%20icons%20from%20file.txt?dl=0

Thank you for following the blog.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s