Hi all This is the scenario:
Have a KML layer with points of data, with description, if you click on marker it will popup description. KML layer added via:
geoxml= new google.maps.KmlLayer('http://MYRURL',{preserveViewport:true});
geoxml.setMap(map);
Have a polygon made with coords array directly on map with
poly = new google.maps.Polygon({
paths: polyCoords,
strokeColor: "#0000FF",
strokeOpacity: 1,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.2
});
Problem: I can click (Green Arrow on image) and see data of description for points outside polygon but cannot (red arrows on image) of the ones geo-inside the polygon. I will like to see infowindows of those too, Poly AFAIK has no click listener.
I have tested setMap the KMLLayer before and after setMap of poly..
See attached image.
thanks
Your kmllayer is getting the click event rather than the map which has the markers on it.
Add the "clickable: false" option.
Like so:
new google.maps.KmlLayer('http://MYRURL',{preserveViewport:true, clickable: false});
Works in google maps api v3.
Related
Im looking to "highlight" an area / specific region of the country Denmark, EXACTLY like it's seen here:
I've read that drawing a fill (or stroke) can be done by drawing lots of polygons to the map, example:
var bermudaTriangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.757370),
new google.maps.LatLng(25.774252, -80.190262)
];
var bermudaTriangle = new google.maps.Polygon({
paths: bermudaTriangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
How would I go about drawing an exact fill like the initial above link? Can I somehow get the longitude and latitude coordinates from the above fill? Or do some Google Maps GUI exist where I can draw and get the coordinates?
FIDDLE - Google maps demo
You cannot get the coordinates from the google maps link you referenced. The polygon (let's call it boundary) is part of the google maps application, but there is no API call to retrieve it.
For some countries such data is available though, as geojson files, or shapefiles. For example US Census organisation provide such data for respective US states, UK has "Ordinance Survey" organisation which also provide such data, but not for free, also there are some commercial organisations (For example here they have postal code boundaries for Denmark, but I cannot seem to find Denmark regions). So that's my first advice to you, try to search for something like: "Denmark regions boundaries shapefile" (if you know danish language, try in Danish, you might find some sites which I couldn't). Once you have the shapefile, you can use some convertor (e.g. mapshaper) to convert it to geojson format and then load the polygon on your map (here is an example on how to load world countries geojson to your map. You can load just one country/region, if your geojson contain coordinates just for that)
Alternatively, you can create your own very simple application, which allows you to draw on the map, and then print the coordinates to console. I have created a simple application for you, try to run it locally. After it loads, just click anywhere on the map to start drawing polygon and once you create it, watch javascript console for output of coordinates. You can then use the coordinates instead in your bermudaTriangleCoords):
function init() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(55.697683, 11.59711)
});
var drawing_manager = new google.maps.drawing.DrawingManager({
map: map,
drawingMode: google.maps.drawing.OverlayType.POLYGON
});
google.maps.event.addListener(drawing_manager, 'polygoncomplete', function(polygon) {
console.log("Polygon vertices coordinates following:");
polygon.getPath().forEach(function(el){
console.log(el.toString());
});
});
}
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing&dummy=.js"></script>
<body style="margin:0px; padding:0px;" onload="init()">
<div id="map" style="height:400px; width:500px;"></div>
</body>
I use this tool to draw the kml points, and then I would just replace the points with those in the example above. You can change the kml setting to javascript, and then just copy the coordinates out.
http://www.birdtheme.org/useful/v3tool.html
It's really useful, hope it helps you.
im getting the current position (latitude and Longitude) on the map when a user click on it, and works fine the script, it gives me the position of the place i clicked in the map, the problem is that doesnt work when i click in the colored polygon zones.
I already try to figure out how to solve it, but but cant figure out the solution.
I leave here the link above:
http://jsbin.com/nirikuwofo/edit?html,output
You just need to add clickable: false to all the polygons. That way the click will go trough the polygon and will click the map underneath. E.g.:
var zone1 = new google.maps.Polygon({
paths: zone1_Coords,
strokeColor: '#d9dc02',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#f5f801',
fillOpacity: 0.35
,clickable:false // <-- ADD THIS LINE
});
http://jsbin.com/sokugoziso/1/edit?html,output
I have 50 polygons on my google map, 25 of which end in '_6' and the other 25 ending in '_100' I was wondering if anyone could point me in the direction of an example where check boxes are used to toggle polygons on and off based on a variable such as the name?
Below is an example of the current options I have for one of the polygons, if someone could point me in the right direction that would be awesome!
var Zone_25_Distance_100 = new google.maps.Polygon({
paths: Zone_25_Distance_100,
strokeColor: '#48DD00',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#48DD00',
fillOpacity: 0.01
});
google.maps.event.addListener(Zone_25_Distance_100, 'click', function() {
top.frames['GraphFrame'].location.href = 'Zone_25_100.html';
});
The method setVisible(bool) is what you are looking for. It hides or show a polygon on the map.
Here is the doc related to polygons
You would then only have to bind a click function to one of the checkboxes you have and call that method on the polygon you want hidden.
EDIT :
Supose your checkboxe's id is cbId and your polygon is Zone_25_Distance_100, it would look like this (using jQuery):
$('#cbId').click(function () {
Zone_25_Distance_100.setVisible(this.checked);
});
Without jQuery
document.getElementById('cbId').onclick=function(){
Zone_25_Distance_100.setVisible(this.checked);
}
I am attempting to implement a "negative" overlay on my google maps, similar to the effect that you get at estately.com. Basically, I have successfully drawn up mapping polygons from the KML data I've gathered. When there are multiple paths, they draw up just fine.
So, modeling the example I have, first I create a set of polyLines around my area from polygonCoords (which is an array of arrays of LatLng objects):
for (var d = 0 ; d < polygonCoords.length ; d++)
{
var b = new google.maps.Polyline( {
path: polygonCoords[d],
strokeWeight: 4,
strokeColor: "#4F6D8F",
strokeOpacity: 1,
map: map
});
}
I have a "negative space" polygon defined by:
function negativeSpaceBoundary()
{
return [new google.maps.LatLng(10, -170),
new google.maps.LatLng(10, -50),
new google.maps.LatLng(80, -50),
new google.maps.LatLng(80, -170),
new google.maps.LatLng(10, -170)]
};
So, I unshift that negative space polygon into my polygonCoords array, and attempt
to draw the polygon:
negativeSpace = new google.maps.Polygon( {
path: polygonCoords,
strokeWeight: 0,
strokeOpacity: 1,
strokeColor: "#4F6D8F",
fillColor: "#000000",
fillOpacity: 0.2,
clickable: false,
map: map
});
Basically, what I'm hoping will happen is that my initial set of polyLines will "punch
a hole" in the negative space polygon, so that there is essentially no overlay covering
my city boundary. If you go to estately.com, and search for "Paradise Valley, AZ", you
can see the effect.
I have tried several variations (Polygons vs Polylines, different fill colors and
opacities, etc), but nothing achieves the effect displayed in my sample.
Any ideas? Using the v3 API, BTW.
Thanks,
Andy
Both paths need to be in the same polygon. The inner hole path winding direction needs to be opposite the outer path.
http://www.geocodezip.com/v3_polygon_example_donut.html
http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_nosidebar.html?lat=37.155939&lng=-79.497071&zoom=6&type=m&filename=http://www.geocodezip.com/geoxml3_test/virginia_inverted_kml.xml
Your polygon (all of the "holes" seem to be the same).
I have saved a rectangle bounds in the database and I'm able to show the rectangle on the map.
Below is the code for showing rectangle on a map.
rectangle = new google.maps.Rectangle({
bounds: bounds,
fillColor: "#FF0000",
strokeColor: "#FF0000",
clickable: true
});
rectangle.setMap(map);
While creating a new shape using drawingmanager, I am able to get unique __gm_id for each shape.
But when create a shape without drawingmanager, I'm not getting this unique id. How do i generate a unique id for already saved shape without using drawing manager?