I have rendered/parsed KML file on google map. Now I need that whatever coordinates kml has that should be show on map and that I should able to drag those coordinates. Also I have drawing tools in my code. If that is draw then that should be also able to drag. I am not getting any resources for these functionalities.
My code is as below:
<!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: Directions Complex</title>
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
font-family: Helvetica, Arial;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=drawing&v=weekly"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/ProjectedOverlay.js"></script>
<script type="text/javascript">
var overlays = [];
jQuery(document).ready(function () {
var myOptions = {
center: new google.maps.LatLng(18.5814049819976, 73.9787511057671),
zoom: 4,
mapTypeId: "satellite",
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE,
],
},
markerOptions: {
icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
},
// circleOptions: {
// fillColor: "#ffff00",
// fillOpacity: 1,
// strokeWeight: 5,
// clickable: false,
// editable: true,
// zIndex: 1,
// },
circleOptions: {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
},
polygonOptions: {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
},
polylineOptions: {
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
},
rectangleOptions: {
strokeColor: "#33DFFF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#33DFFF",
fillOpacity: 0.35,
},
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
overlays.push(event.overlay); // store reference to added overlay
});
var geoXml = new geoXML3.parser({
map: map,
singleInfoWindow: true,
// afterParse: useTheData
afterParse: function (doc) {
for (var i = 0; i < doc[0].placemarks.length; i++) {
var p = doc[0].placemarks[i];
console.log(doc[0].placemarks[i]);
clickablePolygon(p);
}
}
// afterParse: function(doc) { // callback after parse
// for (var i = 0; i < doc[0].placemarks.length; i++) {
// console.log(doc[0].placemarks[i].LineString[0].coordinates) //for coordinates - doc[0].placemarks[i] get more info
// }
// }
});
//geoXml.parse('./kml_files/KML_Samples.kml');
geoXml.parse('./kml_files/golfpoly.kml');
// alert("done init");
}
);
function useTheData(doc) {
// Geodata handling goes here, using JSON properties of the doc object
for (var i = 0; i < doc[0].markers.length; i++) {
console.log(doc[0].markers[i].title);
jQuery('#map_text').append(doc[0].markers[i].title + ', ');
}
};
function clickablePolygon(p) {
google.maps.event.addListener(
p.polygon,
"rightclick",
function (event) {
var clickedLocation = event.latLng;
var latlng = {
lat: clickedLocation.lat(),
lng: clickedLocation.lng(),
zlevel: map.getZoom()
};
}
);
}
// undo last overlay action
function removeLine() {
var lastOverlay = overlays.pop();
if (lastOverlay) lastOverlay.setMap(null);
};
</script>
</head>
<body>
<form id="form1">
<div id="map_canvas" style="width:600px;height:500px;"></div>
<button onclick="removeLine()">Undo Line</button>
<div id="map_text"></div>
</form>
</body>
</html>
MY KML file.
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
<name>golfpoly.kml</name>
<Style id="s_ylw-pushpin_hl">
<IconStyle>
<scale>1.3</scale>
<Icon>
<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
</Icon>
<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
</IconStyle>
<LineStyle>
<color>ffff5500</color>
</LineStyle>
<PolyStyle>
<color>ff00aa55</color>
</PolyStyle>
</Style>
<Style id="s_ylw-pushpin">
<IconStyle>
<scale>1.1</scale>
<Icon>
<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
</Icon>
<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
</IconStyle>
<LineStyle>
<color>ffff5500</color>
</LineStyle>
<PolyStyle>
<color>ff00aa55</color>
</PolyStyle>
</Style>
<StyleMap id="m_ylw-pushpin">
<Pair>
<key>normal</key>
<styleUrl>#s_ylw-pushpin</styleUrl>
</Pair>
<Pair>
<key>highlight</key>
<styleUrl>#s_ylw-pushpin_hl</styleUrl>
</Pair>
</StyleMap>
<Placemark>
<name>golfpoly</name>
<description>Golf club, Nashik</description>
<styleUrl>#m_ylw-pushpin</styleUrl>
<Polygon>
<tessellate>1</tessellate>
<outerBoundaryIs>
<LinearRing>
<coordinates>
73.77706910664098,19.99557588191178,0 73.77680015227681,19.99516184216627,0 73.7769660838005,19.99455413693239,0 73.77741856668077,19.99433581882104,0 73.77795443692341,19.99445050861715,0 73.77823852664554,19.9948752467814,0 73.77807297962021,19.99545511968107,0 73.77752721622502,19.99569916551114,0 73.77706910664098,19.99557588191178,0
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
</Document>
</kml>