I have created a google map and inside that I am drawing multiple radius circles. The radius circles are drawn onclick of a button from outside the map. When there are 15-20 circles are to be drawn the code is working fine. But when the amount of circle goes up to 100 or more than that it takes lot of time. It also hangs up the browser. Is there anyway we can speed up while drawing the radius circles over the map.
Below is the code which I am using. I am looping through a python variable inside django template to draw the circles.
{% for key, val in info.items %}
var radius = parseFloat(5) * parseFloat(1609.3)
var lat = '{{val.latitude}}'
var long = '{{val.longitude}}'
circle_latlng = new google.maps.LatLng(lat, long)
var circle = {
strokeColor: "#ff0000",
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: "#ff0000",
fillOpacity: 0.20,
map: map,
center: circle_latlng,
radius: radius,
zIndex: 5
};
var drawCirle = new google.maps.Circle(circle);
{% endfor %}
Looks like the circles are hard coded in your page. Load them after the map is rendered via AJAX techniques. To prevent the map from "hanging" use setTimeout to give the browser CPU cycles to respond to the user.
Related
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'm working on a WordPress plugin where users can build a route map and show it on their site. In the admin panel it shows a preview of the existing route on the map, and also a marker they can drag to a new location that they want to add to the map.
The default zoom location for the map is set in Europe. But if they for example add a few stops in Australia, then only that part of the world is visible and you won't see the draggable icon anymore that is used to specify new locations, and that is a problem.
So I thought of fixing it with fitbounds, so it would always make the draggable marker and the already created route fit on the screen. The code I have does show all the locations on the map, but because I draw polylines between the visited locations, it somehow also draws a line to the draggable marker in Europe, which it shouldn't do because it's not part of the route.
You can see an example here -> http://jsfiddle.net/tijmen/HctvT/1/
Part of the code:
/* Draw lines between the markers */
function drawFlightPlan( flightPlanCoordinates ) {
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: "#ad1700",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap( map );
fitBounds( flightPlanCoordinates );
}
/* Zoom the map so that all markers fit in the window */
function fitBounds( flightPlanCoordinates ) {
var bounds = new google.maps.LatLngBounds ();
/* Include this latlng value in europe, but I dont want a line going to that latng... */
var defaultLatlng = new google.maps.LatLng('52.378153', '4.899363');
flightPlanCoordinates.push( defaultLatlng );
for ( var i = 0, flightPlanLen = flightPlanCoordinates.length; i < flightPlanLen; i++ ) {
bounds.extend ( flightPlanCoordinates[i] );
}
map.fitBounds( bounds );
}
The lines between the markers in Australia are fine, but the line to Europe shouldn't be there (normally there would just be a different colored marker in Europe).
I don't really understand why there is a line going to Europe in the first place. The flightPath.setMap( map ); is run inside the drawFlightPlan function. And it's not untill the fitBounds function is that I add the latlng value for Europe to the flightPlanCoordinates array.
I searched for a way to remove a partial polyline, but I can't find anything about it that works. I know how to remove all the markers or polylines, but not a single polyline part. Is that even possible?
Any ideas or suggestion how to fix this, or is this something that cannot be fixed the way I want to?
initialize bounds with the LatLng in europe instead of pushing this LatLng into flightPlanCoordinates
http://jsfiddle.net/doktormolle/HctvT/4/
When you use a reference to an array as path for a polyline any changes to the array will affect the polyline.
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?
I'm in a bit of a pickle here. I've set up a google maps object that shows airport locations using markers. I've even enabled clustering to a certain extent. The thing is that I need to include a filter which would allow users to:
Filter and show certain types of airports i.e by clicking on a corresponding check box
SHow markers within a certain distance from a central point. Like show all markers within a radius of # miles. A user can enter a value in a text field to see this or use a slider control.
I'm quite stuck with respect on starting this out - I need some help on this.
What you can do is draw your circle (in response to user input). Then draw the markers that fall within that bounds. Each time you redraw the circle, also redraw all the markers.
// draw a circle of appropriate radius
var circleOptions = {
center: destinationLatlng,
radius: 500, // or value from some formfield, in metres
fillColor: "#FF0000",
fillOpacity: 0.2,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 1
};
var circle = new google.maps.Circle(circleOptions);
var bounds = circle.getBounds();
// loop over your markers, and only draw the ones that are within these bounds
for (var i = 0; i < arrMarkers.length; i++) {
if (bounds.contains(arrMarkers[i].getPosition())) {
// only do setMap if the marker wasn't already visible
if (arrMarkers[i].getVisible() != true) {
arrMarkers[i].setMap(map);
arrMarkers[i].setVisible(true);
}
} else {
// remove the ones that are not within the circle's bounds
arrMarkers[i].setMap(null);
arrMarkers[i].setVisible(false);
}
}
You'll notice I do both setMap and setVisible. This is so that I can then use getVisible to determine if I need to redo setMap (so avoiding unnecessary function calls to setMap - I think I had an issue with flickering).
All this should be within a function that happens in response to user input, e.g. when they submit the form that asks for the radius (or as they slide the slider). This should also maybe be called from within your initialize function (if you want to draw a circle at the very start as well).
Of course this assumes you actually want to display a circle on your map showing that radius; I find this useful. However if you don't, you can use exactly the same message, but just set the fillOpacity and strokeOpacity to 0.0.
Organize references to markers into categories when you add it to map:
var markers = { cat1: [...markers...], cat2: [...markers...] }
When user selects cirtain type - just set or unset map for that markers in markers.catN