drawing geojson layers on web maps using google map api

This post will demonstrate how to draw vector layers on a web map by loading geojson files using google maps api.

Download sample of a geojson file by clicking this link: https://www.dropbox.com/s/kucws6p2byd4vlo/geology.geojson?dl=0

Below is the code lines for the demonstration: In red text are the explanations:

loading geojson to google web map using gmap api - Notepad

Note that we loaded our geojson file from an external URL i.e. https://cdn.rawgit.com/mayotunde/google/master/geology.geojson. You can also use geojson files stored locally. Just make sure the geojson file is saved in the same folder as your text and html file. Then re-write the code line

map.data.loadGeoJson(“name of geojson file.geojson”)

See resultant web map from our code lines on the screeenshot below:


You can view the live map from our github page by clicking the link :http://htmlpreview.github.io/?https://github.com/mayotunde/google/blob/master/geojsonadd

You can also download a plain text file version of our source code by clicking on: https://www.dropbox.com/s/pmu0yny2n70kcwz/loading%20geojson%20to%20google%20web%20map%20using%20gmap%20api.txt?dl=0

Thank you for following the blog.


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