How to know if marker is on zoom area of user Google maps

How to know if marker is on zoom area of user Google maps

  

I have a list of markers loaded on map, and now I'm trying to know if marker is on zoom area of the user map. Anything like this example: http://jsfiddle.net/glafarge/mbuLw/

I already saw some examples where i need to verify the markers exists on the Bound:


var Bounds  = Map.getBounds();

for(var i = 0; i < markers.length; i++){
   if(Bounds.contains(markers[i].position))
      Markers.push(markers[i].title);
}


What i did on "zoom_changed" in AddMapEvent:

SyntaxEditor Code Snippet

"
function(e){

    var Bounds = "+ Map.Id +".getBounds();
    for (var a in "+ Map.Id +".markers) 
    {          
            if(Bounds.contains(a.gMarker.position)===true) {
                alert('is in zoom area!!');
            }
        }
    }
}
"

Hello César,

Is this code giving JS errors? The 4th and 5th code lines seem a bit strange... you're using Map.Id + .getBounds(), but here you should use a Google Maps object, not an ID...

Also, on the 5th line you're using Map.Id +.markers, but from the code sample you need to store the markers in your own array.

If you have a sample of your code, post it here and I can take a look.

Cheers,
R

Solution

Hi, 


Here is my solution, on AddMapEventIdle event:


SyntaxEditor Code Snippet

"
function(evt){
    // Get map object from api google outsystems
    var map = osGoogleMap.getMap('" + Map.Id + "').gMap;

    // Get markers object from api google outsystems
    var markers = osGoogleMap.getMap('" + Map.Id + "');

    var center = map.getCenter(); 
    var zoom = map.getZoom();

    var elmnt = $('#" + Map.Id + " > div:first-child ');  //get element map to check size (width and height)
    
    var markerList = '';
    //add markers to the markerList when this marker is on the screen
    for (var marker in markers.markers){
        var lat_marker = new google.maps.LatLng(markers.getMarker(marker).gMarker.getPosition().lat(), 0);
        var lng_marker = new google.maps.LatLng( 0 , markers.getMarker(marker).gMarker.getPosition().lng());
        var lat_center = new google.maps.LatLng(center.lat(), 0);
        var lng_center = new google.maps.LatLng( 0 , center.lng());
        var distance_lat = CalculateDistance(0, 0, center.lat(), markers.getMarker(marker).gMarker.getPosition().lat());
        var distance_lng = CalculateDistance(center.lng(), markers.getMarker(marker).gMarker.getPosition().lng(), 0, 0 );
        
        if((elmnt.outerHeight()/2 >= (distance_lat*1000 / zoom_list[zoom]) &&  elmnt.outerWidth()/2 >= (distance_lng *1000 / zoom_list[zoom]))){
            var markerTitle = markers.getMarker(marker).gMarker.getTitle().split('-')[0];
            markerList += '\'' + markerTitle.substring(0, markerTitle.length-1) + '\'' + ',';
        }
        
    }
    
    if(markerList != ''){
        markerList = markerList.substring(0, markerList.length-1);
    }
    
    if(markerList != $('#" + MarkersOnMap_txt.Id + "').val()){ 
        $('#" + MarkersOnMap_txt.Id + "').val(markerList); 
        $('#" + RefreshList_Btn.Id + "').click();
    }
}
"

Where i put the markers ids on a input text!

Solution