mouseover and creating a dynamic Circle

830 views
Skip to first unread message

Oscar Forth

unread,
Nov 5, 2010, 5:39:19 AM11/5/10
to google-map...@googlegroups.com
Firstly apologies if I ask stupid questions here.  I've been doing Javascript for under 24 hours so some of the vagaries of the language are still getting to me.

Anyway .. I have a web page that is plotting some GPS coords.  What I want is to display aq circle showing the GPS fix accuracy when you mouse over one of the way point markers.  I have added a listener for 'mouseover' and 'mouseout' but the circle doesnt appear to be getting created.  I've stepped through the code using chrome and the mouseover event is definitely getting called.

This is my code:

   var map;
   var Coords;
   var Accurs;
   var accurCircle;

   function initialize()
   {
       Coords = [
                    new google.maps.LatLng( 51.7991409302,-1.2836096800 ),
                    new google.maps.LatLng( 51.7991409302,-1.2836096800 )
               ];

      var Times = [
                      '09:25:41 05/11/2010',
                      '09:25:46 05/11/2010'
               ];

      Accurs = [
                      250.00,
                      250.00
               ];

       var Path = new google.maps.Polyline(
       {
           path: Coords,
           strokeColor: "#0000ff",
           strokeOpacity: 1.0,
           strokeWeight: 4
       });

       var myOptions =
       {
           zoom: 16,
           center: Coords[Coords.length - 1],
           mapTypeId: google.maps.MapTypeId.HYBRID
       };

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

       Path.setMap( map );

       for ( i = 0; i < Coords.length; i++ )
       {
           var marker = new google.maps.Marker(
           {
               position: Coords[i],
               title: 'waypoint ' + (i + 1) + ' of ' + Coords.length + ' at ' + Times[i],
               map: map
           });
   google.maps.event.addListener( marker, 'mouseover', function(event) { addCircle(i) } );
   google.maps.event.addListener( marker, 'mouseout', function(event) { killCircle(i) } );
       }
   }

   function addCircle(i)
   {
  accurCircle = new google.maps.Circle(
           {
               center: Coords[i],
               radius: Accurs[i],
       fillColor: "#0000ff",
       fillOpacity: 0.25,
       strokeWeight: 1,
               map: map
           });
   }

   function killCircle(i)
   {
 delete accurCircle;
   }

So can anyone tell me what I'm doing wrong?  Btw I was also unsure of how to kill accurCircle I'm guessing delete isn';t hte right way (I'm a C++ programmer ;)).

Any help would be much appreciated!

Oscar Forth

unread,
Nov 5, 2010, 9:08:55 AM11/5/10
to google-map...@googlegroups.com
Right I finally solved my issues by doing the following:

accurCircle = new google.maps.Circle(
       {
          center: Coords[0],
          radius: 0,
          fillColor: "#0000ff",
          fillOpacity: 0.25,
          strokeWeight: 1,
          map: map
       });

       for ( i = 0; i < Coords.length; i++ )
       {
           var marker = new google.maps.Marker(
           {
               position: Coords[i],
               title: 'waypoint ' + (i + 1) + ' of ' + Coords.length + ' at ' + Times[i],
               map: map
           });
           addMarkerListeners( marker, i );
       }
   }

   function addMarkerListeners( marker, number )
   {
      google.maps.event.addListener( marker, 'mouseover', function(event) { addCircle(number)  } );
      google.maps.event.addListener( marker, 'mouseout',  function(event) { killCircle(number) } );
   }

   function addCircle(i)
   {
      accurCircle.setOptions(
      {
          center: Coords[i],
          radius: Accurs[i],
          fillColor: "#0000ff",
          fillOpacity: 0.25,
          strokeWeight: 1,
          map: map
      });
   }

   function killCircle(i)
   {
      accurCircle.setOptions(
      {
          center: Coords[0],
          radius: 0,
Reply all
Reply to author
Forward
0 new messages