Google maps javascript eventproblem

Question

Im trying to do some event-listeners for my homepage. But I can only register one event. The event that works for me is adding Marker's and a circle to it. But when im trying to do something else like rigthclicking on the marker to delete it or get the radius off the circle when the radius is changed. Anyone know what im doing wrong? I also have problems with the showning the map. The map gets loaded and i can see everything except the map.

var map = new google.maps.Map(document.getElementById("map_areas"), {
    zoom:8,
    center: latlng,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    streetViewControl: false,
    zoomControl: true,
    zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE},
    overviewMapControl: true,
    panControl: true
});

var marker;
var circle;
google.maps.event.addListener(map, 'click', function(evt) {
    addMarkerAndCircle(evt);
});

function addMarkerAndCircle(evt) {
    marker = new google.maps.Marker({
        position:  evt.latLng,
        animations: google.maps.Animation.DROP,
        map:map,
        draggable: true,
        clickable:true
    });
    circle = new google.maps.Circle({
        map:map,
        radius:16093, // 10 miles in metres
        fillColor:'#AA0000',
        clickable: true,
        editable: true
    });
    circle.bindTo('center', marker, 'position');
    markersArray.push(marker);
    circleArray.push(circle);
}

google.maps.event.addListener(circle, 'radius_changed', function() {
    var radius = circle.getRadius();
});

http://img231.imageshack.us/img231/6739/googlemapsv.jpg

I've seen that map-partially-loaded issue when I've initiated a map inside a hidden div, to be shown at a later point. Is that what you're doing? In that case, would it be possible to initiate the map at the point of displaying the div instead? — David Hedlund
– David Hedlund, Commented Nov 28, 2011 at 12:47
So does this line work or not? Presumably you then want to do something with the radius... var radius = circle.getRadius(); — duncan
– duncan, Commented Nov 28, 2011 at 12:49
I think the line works :). But the event.addlistener dosent. I want to get the radius from the circle and save it. — SolidALb
– SolidALb, Commented Nov 28, 2011 at 13:11

Stephen O'Connor · Accepted Answer · 2011-11-28 14:21:56Z

Your need to attach the circle event listener to the circle when it is created. In your code you are adding a listener to a circle that is not defined yet. Try this:

function addMarkerAndCircle(evt) {
    marker = new google.maps.Marker({
       position:  evt.latLng,
       animations: google.maps.Animation.DROP,
       map:map,
       draggable: true,
       clickable:true
    });
    circle = new google.maps.Circle({
       map:map,
       radius:16093, // 10 miles in metres
       fillColor:'#AA0000',
       clickable: true,
       editable: true
    });
    circle.bindTo('center', marker, 'position');
    addRadiusChanged(circle);
    markersArray.push(marker);
    circleArray.push(circle);
}

function addRadiusChanged(c) {
    google.maps.event.addListener(c, 'radius_changed', function() {
        var radius = c.getRadius();
        // do something with radius
    });

You can get the map to resize itself to fill the div with this:

 google.maps.event.trigger(map,'resize');

Collectives™ on Stack Overflow

Google maps javascript eventproblem

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related