[GIS] Plotting KML files onto a Google Map

google mapskmlopenlayers-2

I would like to show a map on my website.
I have 2 different kinds of KML files that need to be plotted. One defines region boundaries. The other points within those boundaries.
The region boundaries are in standard google map format. The points are in "EPSG:4326" format.

Is google maps the right tool for the job or should I use something else? I heard openlayers is an alternative.

Best Answer

Using v3 Google Maps API

Note: The KML File(s) need to be publicly accessible - on a webserver Google Maps API has limited KML support (simple lines, points, polygons are okay)

change: var ctaLayer = new google.maps.KmlLayer('http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml'); ctaLayer.setMap(map); to your kml

and the var chicago = new google.maps.LatLng(41.875696,-87.624207); to your centre point.

http://code.google.com/apis/maps/documentation/javascript/examples/layer-kml.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: KmlLayer KML</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
  var chicago = new google.maps.LatLng(41.875696,-87.624207);
  var myOptions = {
    zoom: 11,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var ctaLayer = new google.maps.KmlLayer('http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml');
  ctaLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>

</html>
Related Question