Im looking to "highlight" an area / specific region of the country Denmark, EXACTLY like it's seen here:
I've read that drawing a fill (or stroke) can be done by drawing lots of polygons to the map, example:
var bermudaTriangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.757370),
new google.maps.LatLng(25.774252, -80.190262)
];
var bermudaTriangle = new google.maps.Polygon({
paths: bermudaTriangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
How would I go about drawing an exact fill like the initial above link? Can I somehow get the longitude and latitude coordinates from the above fill? Or do some Google Maps GUI exist where I can draw and get the coordinates?
FIDDLE - Google maps demo
You cannot get the coordinates from the google maps link you referenced. The polygon (let's call it boundary) is part of the google maps application, but there is no API call to retrieve it.
For some countries such data is available though, as geojson files, or shapefiles. For example US Census organisation provide such data for respective US states, UK has "Ordinance Survey" organisation which also provide such data, but not for free, also there are some commercial organisations (For example here they have postal code boundaries for Denmark, but I cannot seem to find Denmark regions). So that's my first advice to you, try to search for something like: "Denmark regions boundaries shapefile" (if you know danish language, try in Danish, you might find some sites which I couldn't). Once you have the shapefile, you can use some convertor (e.g. mapshaper) to convert it to geojson format and then load the polygon on your map (here is an example on how to load world countries geojson to your map. You can load just one country/region, if your geojson contain coordinates just for that)
Alternatively, you can create your own very simple application, which allows you to draw on the map, and then print the coordinates to console. I have created a simple application for you, try to run it locally. After it loads, just click anywhere on the map to start drawing polygon and once you create it, watch javascript console for output of coordinates. You can then use the coordinates instead in your bermudaTriangleCoords):
function init() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(55.697683, 11.59711)
});
var drawing_manager = new google.maps.drawing.DrawingManager({
map: map,
drawingMode: google.maps.drawing.OverlayType.POLYGON
});
google.maps.event.addListener(drawing_manager, 'polygoncomplete', function(polygon) {
console.log("Polygon vertices coordinates following:");
polygon.getPath().forEach(function(el){
console.log(el.toString());
});
});
}
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing&dummy=.js"></script>
<body style="margin:0px; padding:0px;" onload="init()">
<div id="map" style="height:400px; width:500px;"></div>
</body>
I use this tool to draw the kml points, and then I would just replace the points with those in the example above. You can change the kml setting to javascript, and then just copy the coordinates out.
http://www.birdtheme.org/useful/v3tool.html
It's really useful, hope it helps you.
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'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
I researched the Maps Api and it's pretty complicated for me..and I didn't find what I want.
I wrote a php program that does some gps coordinate manipulation and returns me 2 sets of latitude and longitude value ready to use. All I want is to generate a map showing 2 markers for these 2 places, with a straight line between them.
One pair of LAT/LNG value is different each time but for sure somewhere in US, and the other pair is random, can be anywhere in the world. (and hence, maybe the zoom level should adjust accordingly)
How should I implement this? Thanks a lot!
edit:
I have created this map with 2 markers, code:
echo '
function initialize() {
var pos_query = new google.maps.LatLng('.$decimal_latitude.','.$decimal_longitude.');
var pos_tim = new google.maps.LatLng('.$result_tim_lat.','.$result_tim_lon.');
// var latlngbounds = new GLatLngBounds();
// latlngbounds.extend(pos_query);
// latlngbounds.extend(pos_tim);
var myOptions = {
zoom: 5,
center: pos_tim,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
//---> map.setCenter(latlngbounds.getCenter(), map.getBoundsZoomLevel(latlngbounds));
var marker_query = new google.maps.Marker({
position: pos_query,
map: map,
title:"Your query location"});
var marker_tim = new google.maps.Marker({
position: pos_tim,
map: map,
title:"Tim Horton"});
}
</script>';
However, I want to auto-adjust the zoom level and center of map using the code in comment.
But it doesnt work (the map doesnt show up)
I guess Im using V3 and the code in the comment part is older version?
Most of the Maps API's will do what your asking easily. You should read this Google Maps API-Jscript
This will get you started.
This is the actual API reference and is where you will find Maps, Controls, Overlays and Services. Pay special attention to the Overlays section, this is what you need to place your points on a map as well as custom images or graphics. The rest is programming. If you have specific questions regrading programming your best bet is to try some of this in your code and come back with code examples of what you're trying. Hope this helps.