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.
Related
I am loading a data layer via calling a geoJSON file. I am drawing around 100+ polygons using the geoJSON file. I am setting the style via my js code, but the issue is that when the map loads the polygons it shows the strokes/fill colors with some default black shades for some milli seconds and then apply my color schemes correctly. Is there any way I can avoid this effect?
zipLayer = new google.maps.Data({
map: map1,
style: {
strokeColor: '#ff0000',
strokeOpacity:.8,
strokeWeight:1,
fillColor: '#ff0000',
fillOpacity:.1
}
});
var url = 'url/to/polygons';
$.ajax({
url: url,
success:function(data) {
zipLayer.addGeoJson(data);
}
});
Use the map.data.loadGeoJson method.
zipLayer = new google.maps.Data({
map: map1,
style: {
strokeColor: '#ff0000',
strokeOpacity:.8,
strokeWeight:1,
fillColor: '#ff0000',
fillOpacity:.1
}
});
zipLayer.addGeoJson('url/to/polygons);
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 am using Google Map API V3 to show the vehicle traveled path and its route directions. But by google direction icon, its very hard to find the directions. The image below explain more
and I saw the each icon, it is
source
I found the image path, it is
http://www.google.com/intl/en_ALL/mapfiles/dir_0.png for
How to make a good directions icons ?
There are some predefined symbols (e.g. arrows) available in V3 that may be used for an IconSequence.
See http://jsfiddle.net/doktormolle/V3gMT/ for a demo.
P1 AND P2 ARE POINTS.
A point is this:
({ lat:Latitud, lng: Longitud }
Latitud and Longitud are values with coordinates.
function MapsP2P(p1, p2)
//dipuja linea de punto a punto
{
if (p1.lat != 0) {
var line = new google.maps.Polyline({
path: [
new google.maps.LatLng(p1.lat, p1.lng),
new google.maps.LatLng(p2.lat, p2.lng)
],
strokeColor: "#0000FF",
strokeOpacity: 1.0,
strokeWeight: 1,
icons: [{
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor:'#0000ff',
fillColor:'#000000',
fillOpacity:1
},
repeat:'100px',
path:[]
}],
map: map
})
lines.push(line);
}
}
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.
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