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
Related
I want to use fusion tables in google maps.
Can anyone could give me polyline pattern for Fusion Tables?
I don't want to use KML files.
Something like [(1,1),(3,3)]
As Dr.Molle pointed out <LineString><coordinates>1,1 3,3</coordinates></LineString> works perfectly when you place it in the location field of your GFT. You can even place multiple LineString segmets and it'll treat that as a single entity:
<LineString><coordinates>1,1 3,3</coordinates></LineString>
<LineString><coordinates>2,2 4,4</coordinates></LineString>
Broken into two lines for readability here, but GFT treats all whitespace (newlines, tabs, spaces) as a single space, so copy-pasting the above into GFT will work too (except if you try to insert it into an SQL Query, then you'll need to replace the newlines yourself).
I just use code like that below to overlay a polygon onto a Fusion Tables-generated map, if that is what you mean.
var triangleCoords = [
new google.maps.LatLng(51.620736,-0.443077),
new google.maps.LatLng(51.632233,-0.437060),
new google.maps.LatLng(51.629092,-0.434385),
new google.maps.LatLng(51.625626,-0.434879),
new google.maps.LatLng(51.619795,-0.435577)
];
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
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?
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.