Geek Answers Handbook

GoogleMaps API: kml over polygon

How can I display my polygon behind the kml layer?

I have a kml layer imported into a Google Maps canvas. In addition, I applied a polygon that is drawn on the canvas whenever you click Draw.

The problem is that when you click Draw, the polygon is drawn on top of the kml markers. Thus, I cannot click the marker and render their respective names. In other words, I would like to know which markers are included inside the drawn polygon, and for this I will need to click the marker and see its corresponding name.

I believe the solution is to use panels. I know about the panels and the order in which they are located, but I do not know how to implement the solution using them.

To follow, I include my code in much the same way as mine, so you can see what I'm talking about and test it yourself. The only difference is that I do not include my key for GoogleMaps, so where you see API_KEY , replace it with your own key. Thanks in advance.

jsfiddle

HTML:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js" type="text/javascript"></script>
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=geometry"></script>
<script src="GoogleMapTEST.js"></script>

<style>
    html{ 
    height:100%; 
    margin:0; 
    padding:0;
    }
    body{
    height:60%;
    font-family:'Trebuchet MS',  'Arial', 'Helvetica', 'sans-serif';
    font-size:10pt;
    background-color: LightGray;
    line-height:1.6em;
    }
    #map-canvas {
    width:80%;
    height:500px;
    margin-left: auto;  
    margin-right: auto; 
    margin-top: 50px;   
    margin-bottom: 25px;
    }
    .col2{
    border: #bfbfbf 1px solid;
    vertical-align: middle;
    display: inline;
    width: 39%;
    height: 90px;
    margin-left: 4%;
    }
</style>

<div id="map-canvas"></div>                                                       

<div>
    <form>
        <fieldset class="col2">
            Search radius (km): <br><br>
            <input type="text" id="DrawTxt" value="30">
            <input type="button" id="DrawBtn" value="Draw">
        </fieldset>
    </form>
</div>

JavaScript:

var map;
var overlays_array = [];                                                            

function initialize()                                                               
{
    var MyLatLng = new google.maps.LatLng(51,-114);                         
    var mapOptions = {                                                              
        center: MyLatLng,
        zoom: 10
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);    

    $("#DrawBtn").click( function(){                                                
        ClearOverlays();                                                            
        var radius = $("#DrawTxt").val();                                           
        var circle = DrawCircle(map.getCenter(), radius);                            
        AddOverlay(circle);                                                         
    });

    var CP_url = 'https://drive.google.com/uc?export=download&id=0B2KR4Lz3foYEd04za21sMXZYaEE'      
    var CP_options = {
        preserveViewport: true,                                                                     
        map: map                                                                                    
    };
    var CP_layer = new google.maps.KmlLayer(CP_url, CP_options);                                    
}

google.maps.event.addDomListener(window, 'load', initialize);        

function DrawCircle(center, radius)
{
    var nodes = 72;

    var latConv = google.maps.geometry.spherical.computeDistanceBetween( center, new google.maps.LatLng(center.lat()+0.1, center.lng()) )/100;
    var lngConv = google.maps.geometry.spherical.computeDistanceBetween( center, new google.maps.LatLng(center.lat(), center.lng()+0.1) )/100;

    var points = [];
    var step = parseInt(360/nodes)||10;

    for(var i=0; i<=360; i+=step)
    {
        var pint = new google.maps.LatLng(center.lat() + (radius/latConv * Math.cos(i * Math.PI/180)), center.lng() + (radius/lngConv * Math.sin(i * Math.PI/180)));
        points.push(pint);
    }
    points.push(points[0]); 

    var poly = new google.maps.Polygon({
        paths: points,
        strokeColor: "#00A2FF",                               
        strokeOpacity: 0,                                     
        strokeWeight: 0,                                      
        fillColor: "#80D0FF",                                 
        fillOpacity: 0.3                                      
    });

    return poly;                                              
}

function AddOverlay(overlay)                                  
{
    if(overlay)
    {
        overlay.setMap(map);                                  
        overlays_array.push(overlay);                         
    }
}

function ClearOverlays()                                      
{
    while(overlays_array[0])                                  
    {
        overlays_array.pop().setMap(null);                    
    }
}
+1
source share
1 answer

( kml ) , KML API Javascript Google Maps , geoxml3 geoxml-v3, .

<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script>
function initialize() {
  var MyLatLng = new google.maps.LatLng(51,-114);                         
  var mapOptions = {                                                              
    center: MyLatLng,
    zoom: 10
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);    
  geoXml = new geoXML3.parser({
              map: map,
              infoWindow: infowindow,
              singleInfoWindow: true,
              markerOptions: {optimized: false}
          });
 geoXml.parse("http://www.geocodezip.com/geoxml3_test/kml/CPs_Calgary.kml");
// ...

494

839

0

More articles:


All Articles