Google Maps KML Generator Documentation by Najmul Iqbal v1.0


Generate KML File from Google Maps

Created: 11/04/2023
By: Najmul Iqbal
Email: iqbengsolution@gmail.com

Thank you for your interest in my script. Please click here to download this code. If you have any questions that are beyond the scope of this help file, please feel free to email via our contact form here. Thanks so much!


Table of Contents

  1. Overview
  2. Features
  3. How To Use?
  4. Configure the API Key
  5. Video Demo
  6. Our Portfolio

A) Overview - Top

Google Maps KML Generator is a JavaScript code that makes it easier to add multiple polygons and markers to the KML file. You can specify the fill and border colors of the polygon. You can also specify the polygon border and fill opacity. You can also specify the weight of the border of the polygon. You can download it as KML file.


B) Features - Top

  1. You can add multiple polygons.
  2. You can specify name and description for the polygon that will be added to the KML.
  3. You can add multiple markers/pins.
  4. You can specify name and description for the marker that will be added to the KML.
  5. It utilizes the drawing library to draw polygons and add markers.
  6. You can specify the fill color of the polygon.
  7. You can specify the border color of the polygon.
  8. You can specify the fill and border opacity for the polygons.
  9. You can download the result in CSV format.
  10. You can easily generate and download the KML file once you complete drawing polygons and markers.
  11. It uses the bootstrap UI.

C) How To Use? - Top

  1. Specify the Options:

    • Click the Options link from the navigation bar.
    • Specify the fill color of the polygon.
    • Specify the border color of the polygon.
    • Specify the fill opacity of the polygon.
    • Specify the border opacity of the polygon.
    • Specify the polygon border weight.
    • After specifying all the options, click OK button.
  2. Draw a Polygon:

    If you want to add polygons to the KML, then click Draw Polygon from the navigation bar and draw as many polygons on the map as required. When you draw a polygon, a popup will appear where you can enter name as well as description of the place/area.
  3. Add a Marker/Pin:

    If you want to add markers/pins to the KML, then click Add Marker from the navigation bar and add as many markers/pins on the map as required. When you add a marker/pin, a popup will appear where you can enter name as well as description of the place.
  4. Clearing Map:

    If you want to clear the map i.e. remove all the polygons and markers, then click Clear Map and click OK from the confirmation dialog.
  5. Download KML:

    To generate and download the KML file, click Download KML form the navigation bar.

D) Configure the API Key - Top

  1. Go to your developer console.
  2. Generate your Google Maps API Key.
  3. Please note to enable billing.
  4. Also enable Maps JavaScript API.
  5. Open index.html page.
  6. Add your key in the following line (replace YOUR_API_KEY with your Google Maps API key):
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=drawing&key=YOUR_API_KEY"></script>

E) Video Demo - Top

Please click the play button below to view the video demo.


F) Our Portfolio - Top

We also have other useful utilities, plugins and software products. Please click here to see our portfolio.


Once again, thank you so much for your interest in this script. As I said at the beginning, I'd be glad to help you if you have any questions relating to this script. No guarantees, but I'll do my best to assist. If you have a more general question relating to the apps on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Najmul Iqbal

Go To Table of Contents