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);
Related
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'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.
I've set up some polygons, drew them on the map just fine. I also managed to fire console.log when they were clicked. However, how would I go on about figuring out which polygon was actually clicked?
As you can see in my sample code here I store each object within the collection "lots", however - clicking them only gives me the lat-long of the click. I figured I might need to loop through my polygons and check if the point was clicked is intersecting them and thus figure out which polygon it is... is there an easier solution?
var lot = new google.maps.Polygon({
paths: me.area,
strokeColor: 'black',
strokeOpacity: 0.35,
strokeWeight: 1,
fillColor: fillcol,
fillOpacity: 0.35
});
lot.setMap(map);
var obj = {
'id':me.id,
'rented':me.rented,
'area':lot
};
google.maps.event.addListener(lot, 'click', function(event) {
console.log(event);
});
lots.push(lot);
Why don't assign to each polygon some id property when you create them and later just use this.myID? Truly speaking, you can hang all information you need on that polygon object.
var lot = new google.maps.Polygon({
paths: me.area,
strokeColor: 'black',
strokeOpacity: 0.35,
strokeWeight: 1,
fillColor: fillcol,
fillOpacity: 0.35
});
lot.setMap(map);
var obj = {
'id':me.id,
'rented':me.rented,
'area':lot
};
lot.objInfo = obj;
google.maps.event.addListener(lot, 'click', function(event) {
console.log(this.objInfo);
});
lots.push(lot);
It would be more effective than path comparison in a loop, or am i missing something? :)
If I can step in a little late with a different solution, I was having the same problem and discovered that you can define custom properties on a polygon.
My example (which creates a state on a map of the U.S.)
poly = new google.maps.Polygon({
map_state_id: map_state_id,
paths: pts,
fillColor: colour,
fillOpacity: 0.66,
strokeWeight: 1,
clickable:true
});
In this case "map_state_id" is the custom property. I have defined it to be the ID of the state (1 for Alabama, 2 for Alaska, etc.)
Then when the particular state is clicked later, this "map_state_id" can be passed into the event function.
google.maps.event.addListener(poly, 'click', function()
{
var map_state_id = this.map_state_id; //retrieve correct state_id
$.ajax(
{
type: "POST",
url: "http://www...get_state_info.php",
data: {state_id : map_state_id},
dataType: "html",
success: function(data)
{
$("#state_info").html(data); //display some info
}
});
});
I found this particular concept at http://dominoc925.blogspot.com/2011/12/add-your-own-property-field-to-google.html
Turned out getPath() works like a charm. I did not realize I actually got the polygon reference passed on the click event, to match this with my stored "lots" I simply loop through my stored lots and compare this.getPath to other.getPath, if they match I know which lot was clicked and can now show info related to this particular object.
Here's a code sample:
(where parking is an array of my parking area objects which themselves have arrays containing parking lot objects)
google.maps.event.addListener(lot, 'click', function(event) {
var myPath = this.getPath();
for(var i = 0; i < parking.length; i++){
for(var j = 0; j < parking[i].lots.length; j++){
var lot = parking[i].lots[j];
var otherPath = lot.poly.getPath();
if(otherPath == myPath){
console.log(lot);
break;
}
}
}
});
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