call javascript method defined inside jquery

Question

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>

if you use jQuery, use jQuery: $(document).ready(function() { $.getJSON(....); }); — mplungjan
– mplungjan, 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? — nuthan
– nuthan, Commented Dec 15, 2011 at 13:01
See my answer below. There will be other issues, but the structure is there — mplungjan
– mplungjan, Commented Dec 15, 2011 at 13:10

mplungjan · Accepted Answer · 2011-12-15 13:07:30Z

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>

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

mas-designs · Accepted Answer · 2011-12-15 12:51:19Z

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

mas-designs

7,5311 gold badge33 silver badges56 bronze badges

Collectives™ on Stack Overflow

call javascript method defined inside jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related