Creating an Online Interactive Map with KML, Google and ESRI ArcMap – JA Media Solutions | GIS Services, Software and Web Development

Creating an Online Interactive Map with KML, Google and ESRI ArcMap

Home » Blog » Creating an Online Interactive Map with KML, Google and ESRI ArcMap

Written by Aldwin Galapon posted on Tuesday, February 5th, 2013

0.00 avg. rating (0% score) - 0 votes

Option 1: Embed KML file created in Google Map to website

KML is a file format used to display geographic data in an Earth browser such as Google Earth, Google Maps, and Google Maps for mobile. KML uses a tag-based structure with nested elements and attributes and is based on the XML standard. All tags are case-sensitive and must be appear exactly as they are listed in the KML Reference. The Reference indicates which tags are optional. Within a given element, tags must appear in the order shown in the Reference.
  1. Go to Google Maps, login using your Google account then click button “My Places”.  
  2. Create your personalized map by clicking “Create Map” button. For this example, I named my Map as “Sample Interactive Map”, where I added polygon, line and points as seen below, where the line represents Lake Fort Peck’s centroid, blue polygon covering the area of the lake and points representing bays (blue wave symbol) and park (green pine tree symbol).
    View Larger Map
  3. These lines, points and polygons can be customized to fit your preference and how you would like your final layer to look like (e.g. you can upload your own point symbol, change the color of your line or color and opacity of your polygon). You can likewise add descriptions to these items, adding links, information and even media (videos, images, etc.) to them.
  4. When you are finished with your map, click save and done button. To download your kml file, click “KML” link displayed on your Google Map dashboard.
  5. Embedding your KML file to your website is just a few steps away. Upload your KML file to your website (e.g. https://www.jamediasolutions.com/kml/SampleInteractiveMap.kml, I uploaded this example map to my KML folder), then go to Google Maps and paste your KML url to Google Map search textbox.
  6. Finally click “Link to these page” icon and an embed code will be displayed. Copy this code and paste to your website post just like I did above.

Option 2: Embed KML files extracted from ESRI shapefiles

KML files are very often distributed in KMZ files, which are zipped KML files with a .kmz extension.
  1. For purpose of example, I extracted a parts of my shapefiles and prepared my map layers to be converted to KML.
  2. In my example I extracted a few street layer (line shapefile) and structure centroids (point shapefile) from Mandaue City.
  3. Using ESRI’s ArcGIS ArcToolbox, we can use the ‘Conversion’ tool for either Shape to KML or Map to KML.
  4. Alternatively, we can also use other applications that offers conversion tools (e.g. Global Mapper).
  5. Upload your KML file to your website (e.g. https://www.jamediasolutions.com/kml/sample3.kmz), then go to Google Maps and paste your KML url to Google Map search textbox.


View Larger Map

Posted on Tuesday, February 5th, 2013 at 5:48 am Print this Article Email this Article