I am trying to create polyline outlines and fills for each state. I need the state polyline to be clickable. Also, when viewed at greater zoom levels the fill looks fragmented. Any suggestions?
see code below:
function drawBorder(){
var Polyline_Path = new google.maps.Polyline({
path: newyork,
strokeColor: "#CD0000",
// color of the outline of the polyline
strokeOpacity: 1,
// between 0.0 and 1.0
strokeWeight: 1,
// The stroke width in pixels
fillColor: "#CD0000",
fillOpacity: 1,
clickable: true
});
Polyline_Path.setMap(map);
google.maps.event.addListener(Polyline_Path, 'click', function() {
alert('you clicked polyline');
});
}
this code does work to make the polyline clickable but only in a very specific area of the polyline. Is there a way to configure it to detect a click event anywhere in the state
I used the google.maps.Polygon instead and it took care of fragmenting and clickable issues
Related
When I'm painting two polygons with a part of them covering each other, the mouse events are triggred for the polygon that was last painted no matter that it's zIndex is lower!
Is there a way to make mouse event to be triggered for the polygon with higher zIndex?
My code is adding layers of polygons in an asynchronous way (ajax) and some layers overlap.
I want polygons with higher zIndex's to get the mouse events.
A polygon is created by :
function createPolygon(_paths, _strokeColor, _strokeOpacity, _strokeWeight, _fillColor, _fillOpacity, _zindex) {
var polygon = new google.maps.Polygon({
paths: _paths,
strokeColor: _strokeColor,
strokeOpacity: _strokeOpacity,
strokeWeight: _strokeWeight,
fillColor: _fillColor,
fillOpacity: _fillOpacity,
zIndex: _zindex
});
return polygon;
}
and afterwards is attached to the map by:
for (i in polygonArray) {
polygonArray[i].setMap(map);
polygonArray[i].setVisible(true);
}
Thanks
I set the panControl property of the map to false which apperantly disables the affect of the zIndex, you must set it to true!
I put three icons on a map and they represent buildings on the map, but when I zoom into or out of the map the icon sizes are the same and they no longer correspond to the actual building size on the map. Now I know how to resize png icons by pixels but is there a way to keep the vectoral icons proportional to the map zoom while zooming in-out or do I have to manipulate scale property of the Icon object by catching the zoom event? Thanks.
for (var cnt = 0; cnt < pathArr.length; cnt++) {
var path = {
path: pathArr[cnt].Path,
fillColor: "#CCCCCC",
fillOpacity: 1,
strokeColor: "#666666",
strokeWeight: 4,
scale: 1
};
var pos = new google.maps.LatLng(pathArr[cnt].Lat, pathArr[cnt].Lng);
var marker = new google.maps.Marker({
position: pos,
icon: path,
map: this.Gmap
});
this.MapMarkers.push(marker);
}
The best way to achieve what I want is to use custom overlays and svg:
https://developers.google.com/maps/documentation/javascript/customoverlays
I'm able to drop markers on the map in the click eventhandler. But if a circle has already been drawn on the map where the user wants to put a marker, it doesn't work. I assume the circle is "swallowing" the click and not passing it through to the map beneath. How to fix that?
When you draw the circle, set clickable: false in the circle options, and then clicks will go through to the underlying map. For example:
new google.maps.Circle({
clickable: false, // let clicks go through to the map
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng( 0, 0 );
radius: 1000
});
Or add a click listener to the circle to create markers over it.
I'm trying draw polygon arrow using Google Map APT V3. See code below. The problem is when I zoom out the map arrow head remain same. Any way to adjust the zoom level of arrow head?
var myCoordinates = [
new google.maps.LatLng(54.065836, -7.415771),
new google.maps.LatLng(53.219191, -7.261963)
];
var polyOptions = {
path: myCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3
, icons: [{ icon: { path: google.maps.SymbolPath.FORWARD_OPEN_ARROW, scale: 2 }, offset: "100%"}]
}
var it = new google.maps.Polyline(polyOptions);
it.setMap(map);
You could have an event listener for the zoom_changed event on the map, which adjusts the scale property on the icon Symbol object.
I am trying to display dynamic data in infowindows whenever user hovers over polygons on the map. Debugging shows the data and other infowindow/polygon settings are all right. I am able to get the color change on mouseover, just that infowindows doesn't show up. What might be the reason behind it? What am I missing here?
statePolygon = new google.maps.Polygon({
paths: stateBorderCoords,
strokeColor: '#f33f00',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#ff0000',
fillOpacity: 0.2
});
statePolygon.pId = infoText; // Fetching from a JSON response
statePolygon.wPet = wPet; // Fetching from a JSON response
statePolygon.infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(statePolygon,"mouseover",function(event){
this.setOptions({fillColor: "#00FF00"});
this.infoWindow.setPosition(event.latLng);
this.infoWindow.setContent(this.wPet);
this.infoWindow.open(map, this);
});
google.maps.event.addListener(statePolygon,"mouseout",function(){
this.setOptions({fillColor: "#FF0000"});
this.infoWindow.close();
});
google.maps.event.addListener(statePolygon, 'click', function(){
//createInfoWindow(this.pId);
});
statePolygon.setMap(map);
What happens if you leave out the "this" in the line:
this.infoWindow.open(map, this);
?
I've been fighting with something similar over the last few days and just discovered my code works for google.maps.Markers (as in Google pins) but not for google.maps.Circles (and I guess google.maps.Polygons.)
My guess: "infoWindow.open(map, object)" which tries to anchor the InfoWindow to the object only seems to work for google.maps.Markers, not Circles, Polygons, etc. What does seem to work is "open(map)" which doesn't anchor it to anything. However the position of the infoWindow has to be explicitly set (which you are already doing).
Edit:
In my case this doesn't work (assuming global variable map)
var circle = { clickable: true,
strokeColor: "darkred",
strokeOpacity: 1,
strokeWeight: 1,
fillColor: "green",
fillOpacity: 1,
map: map,
center: new google.maps.LatLng(55.95,-3.19),
radius: 45
};
var marker1 = new google.maps.Circle(circle);
infoWindow = new google.maps.InfoWindow();
infoWindow.setContent("Hello");
inoWindow.setPosition(new google.maps.LatLng(55.95,-3.19));
infoWindow.open(map,marker1);
but this does:
var circle = { clickable: true,
strokeColor: "darkred",
strokeOpacity: 1,
strokeWeight: 1,
fillColor: "green",
fillOpacity: 1,
map: map,
center: new google.maps.LatLng(55.95,-3.19),
radius: 45
};
var marker1 = new google.maps.Circle(circle);
infoWindow = new google.maps.InfoWindow();
infoWindow.setContent("Hello");
infoWindow.setPosition(new google.maps.LatLng(55.95,-3.19));
infoWindow.open(map);
The only difference is in the last line.
Thinking about the above post, setting the position after opening presumably overwrites the anchor position and thus makes it appear.
First you open the InfoWindow, then set its position:
http://jsfiddle.net/fuDfa/
google.maps.event.addListener(statePolygon,"mouseover",function(event){
this.setOptions({fillColor: "#00FF00"});
this.infoWindow.setContent(this.wPet);
this.infoWindow.open(map);
this.infoWindow.setPosition(event.latLng);
});
However, I realized that if the mouse moves on top of the InfoWindow (even if it's on top of the polygon), it will count as if the mouse moved outside the polygon. So, the polygon will turn red and Infowindow will close. But since the mouse is still inside the polygon, the infowindow will open again, causing a flicker.
I don't know a way to get around this (tried a timeout but it's not reliable either). I only thought about putting the Infowindow in a preset position instead of event.latLng.