0

I am trying to draw a circle on google maps-v3. Unable to call oldDrawHandler() method onClick event from html. How to Call a javascript method on onclick event, defined inside a jquery();. Please help!!!

<head>
<script type="text/javascript">
 var init = function() {
 $.getJSON('web_services/latlong.php?option=2&id='+id, function(json) {
 $.each(json.result,function(i,gmap){
 latitude=gmap.latitude;
 longitude=gmap.longitude;
 var image = 'vw-beetle-icon.png'
 var latlng= new google.maps.LatLng(latitude, longitude)
 var opts = {
 zoom: 16,
 center:latlng , // London
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 icon: image
 };
 var map = new google.maps.Map(document.getElementById('map'), opts);
 var Marker = new google.maps.Marker({
 position: latlng,
 map: map,
 icon: image
 });
 var getPoints = function(lat, lng, radius, earth){
 // Returns an array of GLatLng instances representing the points of the radius circle
 var lat = (lat * Math.PI) / 180; //rad
 var lon = (lng * Math.PI) / 180; //rad
 var d = parseFloat(radius) / earth; // d = angular distance covered on earth's surface
 var points = [];
 for (x = 0; x <= 360; x++) 
 { 
 brng = x * Math.PI / 180; //rad
 var destLat = Math.asin(Math.sin(lat)*Math.cos(d) + Math.cos(lat)*Math.sin(d)*Math.cos(brng));
 var destLng = ((lon + Math.atan2(Math.sin(brng)*Math.sin(d)*Math.cos(lat), Math.cos(d)-Math.sin(lat)*Math.sin(destLat))) * 180) / Math.PI;
 destLat = (destLat * 180) / Math.PI;
 points.push(new google.maps.LatLng(destLat, destLng));
 }
 return points;
 }
 var polygonDestructionHandler = function() {
 this.setMap(null);
 //marker.setMap(null);
 }
 var polygonDrawHandler = function(e) {
 // Get the desired radius + units
 var select = document.getElementById('unitSelector');
 var unitKey = select.getElementsByTagName('option')[select.selectedIndex].value;
 var earth = earthRadiuses[unitKey];
 var radius = parseFloat(document.getElementById('radiusInput').value);
 // Draw the polygon
 var points = getPoints(e.latLng.lat(), e.latLng.lng(), radius, earth);
 //alert(e.latLng.lat());
 var polygon = new google.maps.Polygon({
 paths: points,
 strokeColor: '#004de8',
 strokeWeight: 1,
 strokeOpacity: 0.62,
 fillColor: '#004de8',
 fillOpacity: 0.27,
 geodesic: true,
 map: map
 });
 //alert(radius);
 google.maps.event.addListener(polygon, 'rightclick', polygonDestructionHandler);
 }
 var oldDrawHandler = function() {
 [select.selectedIndex].value;
 var unitKey = 'mt';
 var earth = earthRadiuses[unitKey];
 var radius = 2000;
 lt=13.0497548596428;
 ln=77.6202746243287;
 var points = getPoints(lt, ln, radius, earth);
 //alert(e.latLng.lat());
 var polygon = new google.maps.Polygon({
 paths: points,
 strokeColor: '#004de8',
 strokeWeight: 1,
 strokeOpacity: 0.62,
 fillColor: '#004de8',
 fillOpacity: 0.27,
 geodesic: true,
 map: map
 });
 google.maps.event.addListener(polygon, 'rightclick', polygonDestructionHandler);
 }
});
});
 }/* end of init()*/
</script>
 </head>
<body onload="init()">
 <a href="javascript:void(0)" onclick="oldDrawHandler();">GeoFence</a>
</body>
asked Dec 15, 2011 at 12:45
3
  • if you use jQuery, use jQuery: $(document).ready(function() { $.getJSON(....); }); Commented Dec 15, 2011 at 12:51
  • thanks for quick reply @mplungjan i saw page loading faster. But still, i get error in console saying "Uncaught ReferenceError: oldDrawHandler is not defined" Do i have to call it using any other means? Commented Dec 15, 2011 at 13:01
  • See my answer below. There will be other issues, but the structure is there Commented Dec 15, 2011 at 13:10

2 Answers 2

1

I think you want this: I added the click to the link inside the ready

<html>
<head>
<script type="text/javascript">
 $(document).ready(function() {
 $.getJSON('web_services/latlong.php?option=2&id='+id, function(json) {
 $.each(json.result,function(i,gmap){
 latitude=gmap.latitude;
 longitude=gmap.longitude;
 var image = 'vw-beetle-icon.png';
 var latlng= new google.maps.LatLng(latitude, longitude);
 var opts = {
 zoom: 16,
 center:latlng , // London
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 icon: image
 };
 var map = new google.maps.Map(document.getElementById('map'), opts);
 var Marker = new google.maps.Marker({
 position: latlng,
 map: map,
 icon: image
 });
 var getPoints = function(lat, lng, radius, earth){
 // Returns an array of GLatLng instances representing the points of the radius circle
 var lat = (lat * Math.PI) / 180; //rad
 var lon = (lng * Math.PI) / 180; //rad
 var d = parseFloat(radius) / earth; // d = angular distance covered on earth's surface
 var points = [];
 for (x = 0; x <= 360; x++) { 
 brng = x * Math.PI / 180; //rad
 var destLat = Math.asin(Math.sin(lat)*Math.cos(d) + Math.cos(lat)*Math.sin(d)*Math.cos(brng));
 var destLng = ((lon + Math.atan2(Math.sin(brng)*Math.sin(d)*Math.cos(lat), Math.cos(d)-Math.sin(lat)*Math.sin(destLat))) * 180) / Math.PI;
 destLat = (destLat * 180) / Math.PI;
 points.push(new google.maps.LatLng(destLat, destLng));
 }
 return points;
 }
 }); // each
 }); // getJSON
 var polygonDestructionHandler = function() {
 this.setMap(null);
 //marker.setMap(null);
 }
 var polygonDrawHandler = function(e) {
 // Get the desired radius + units
 var select = document.getElementById('unitSelector');
 var unitKey = select.getElementsByTagName('option')[select.selectedIndex].value;
 var earth = earthRadiuses[unitKey];
 var radius = parseFloat(document.getElementById('radiusInput').value);
 // Draw the polygon
 var points = getPoints(e.latLng.lat(), e.latLng.lng(), radius, earth);
 //alert(e.latLng.lat());
 var polygon = new google.maps.Polygon({
 paths: points,
 strokeColor: '#004de8',
 strokeWeight: 1,
 strokeOpacity: 0.62,
 fillColor: '#004de8',
 fillOpacity: 0.27,
 geodesic: true,
 map: map
 });
 //alert(radius);
 }
 $("#geoFenceLink").click(function() {
 var unitKey = 'mt';
 var earth = earthRadiuses[unitKey];
 var radius = 2000,lt=13.0497548596428,ln=77.6202746243287;
 var points = getPoints(lt, ln, radius, earth);
 //alert(e.latLng.lat());
 var polygon = new google.maps.Polygon({
 paths: points,
 strokeColor: '#004de8',
 strokeWeight: 1,
 strokeOpacity: 0.62,
 fillColor: '#004de8',
 fillOpacity: 0.27,
 geodesic: true,
 map: map
 });
 });
 google.maps.event.addListener(polygon, 'rightclick', polygonDestructionHandler);
 }); // document.ready
</script>
</head>
<body>
 <a id="geoFenceLink" href="#">GeoFence</a>
</body>
</html>
answered Dec 15, 2011 at 13:01
Sign up to request clarification or add additional context in comments.

2 Comments

thanks again @mplungjan... It worked beautifully, provided $("#geoFenceLink") function had to be placed in $.each({...}), because var earth = earthRadiuses[unitKey]; had no scope within.
Right.. I moved it because there was only one link and you will assign the click to it for each result
1

Why do you put that function into the var init() ?
You could run the same code by using jQuery and execute it when the DOM is loaded which would be faster !

$(document).ready(function() {
 // put all your jQuery goodness in here.
});
answered Dec 15, 2011 at 12:51

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.