Creating Google map from KML file

You can create a google map from the KML file. Use the following code to create a google map on your site.

<!DOCTYPE html>
<html >
 <head>
 <title>KML to Google Map example</title>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 <meta charset="utf-8">
 <style>
 html,body,table,tr,td {
 height:100%;
 }
 #map-canvas {
 height:100%;
}
 #map-menu {
 background-color:#eeeeee;
 height:100%;
 overflow:scroll;
 padding:10px;
 }
 
 </style>
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
 <script>
var map;
function initialize() {
 var mapOptions = {
 zoom: 4,
 center: new google.maps.LatLng(49.834799,-97.212557),
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 map = new google.maps.Map(document.getElementById('map-canvas'),
 mapOptions);
 
 <?php
 $urlweb = "KML2GMap.kml";
 $kml = simplexml_load_file($urlweb);
 if ($kml)
 {
 $items = $kml->Document->Placemark;
 foreach ($items as $item)
 {
 $name = $item->name;
 $description =addslashes($item->description);
 $coordinates=$item->Point->coordinates;
 $latlng = explode(",",$coordinates);
 echo "var marker= new google.maps.Marker({";
 echo "Position: new google.maps.LatLng(".$latlng[1].",".$latlng[0]."),";
 echo "map:map,";
 echo "title:'".$description."' });";
 }
 }
 
?> 
 
}
function FindRIVA(lat,lng,zoom) {
 var center = new google.maps.LatLng(lat,lng);
 
 map.setZoom(zoom);
 
 var marker=new google.maps.Marker ({
 Position: center,
 map:map,
 animation: google.maps.Animation.DROP
 
 });
map.panTo(center);
 
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
 <body >
 <h2><center>KML to Google map example</center></h2>
<table border="2" style="height:90%;">
<tr ><td width="90%">
<div id="map-canvas">
</div>
</td>

<td width="10%" >
<div id="map-menu">
<?php
 $urlweb = "KML2GMap.kml";
 $kml = simplexml_load_file($urlweb);
 if ($kml)
 {
 $items = $kml->Document->Placemark;
 foreach ($items as $item)
 {
 $name = $item->name;
 $description =addslashes($item->description);
 $coordinates=$item->Point->coordinates;
 $latlng = explode(",",$coordinates);
 
 echo "<p onclick=FindRIVA(".$latlng[1].",".$latlng[0].",4) ondblclick=FindRIVA(".$latlng[1].",".$latlng[0].",13)>".$name. "</p>";
 }
 }
 
?> 
</div>

</td>
</tr>
</table>

</body>
</html>

Here’s the KML file you need for the example above. (The file name for the kml file is KML2GMap.kml)

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
 <name>KML2GMap</name>
 <description><![CDATA[]]></description>
 <Style id="style5">
 <IconStyle>
 <Icon>
 <href>http://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png</href>
 </Icon>
 </IconStyle>
 </Style>
 <Style id="style2">
 <IconStyle>
 <Icon>
 <href>http://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png</href>
 </Icon>
 </IconStyle>
 </Style>
 <Style id="style3">
 <IconStyle>
 <Icon>
 <href>http://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png</href>
 </Icon>
 </IconStyle>
 </Style>
 <Style id="style4">
 <IconStyle>
 <Icon>
 <href>http://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png</href>
 </Icon>
 </IconStyle>
 </Style>
 <Style id="style1">
 <IconStyle>
 <Icon>
 <href>http://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png</href>
 </Icon>
 </IconStyle>
 </Style>
 <Placemark>
 <name>Winnipeg</name>
 <description><![CDATA[<div dir="ltr">Winnipeg, Manitoba</div>]]></description>
 <styleUrl>#style5</styleUrl>
 <Point>
 <coordinates>-97.171326,49.899940,0.000000</coordinates>
 </Point>
 </Placemark>
 <Placemark>
 <name>Toronto</name>
 <description><![CDATA[<div dir="ltr">Toronto</div>]]></description>
 <styleUrl>#style2</styleUrl>
 <Point>
 <coordinates>-79.189453,43.516689,0.000000</coordinates>
 </Point>
 </Placemark>
 <Placemark>
 <name>Los Angeles</name>
 <description><![CDATA[<div dir="ltr">LA</div>]]></description>
 <styleUrl>#style3</styleUrl>
 <Point>
 <coordinates>-118.212891,33.870415,0.000000</coordinates>
 </Point>
 </Placemark>
 <Placemark>
 <name>Vancouver</name>
 <description><![CDATA[<div dir="ltr">Vancouver, BC</div>]]></description>
 <styleUrl>#style4</styleUrl>
 <Point>
 <coordinates>-123.046875,49.210419,0.000000</coordinates>
 </Point>
 </Placemark>
 <Placemark>
 <name>Dallas </name>
 <description><![CDATA[<div dir="ltr">Dallas, Texas</div>]]></description>
 <styleUrl>#style1</styleUrl>
 <Point>
 <coordinates>-96.855469,32.620869,0.000000</coordinates>
 </Point>
 </Placemark>
</Document>
</kml>
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