I am trying to draw a circle in OpenLayers using Google Maps (olGM).
I don´t know why it not draw a circle, because in OSM working perfectly.
var circle = new ol.geom.Circle(ol.proj.transform([latd, lond], 'EPSG:4326',
'EPSG:3857'), 1000);
var center = circle.getCenter();
var CircleFeature = new ol.Feature(circle);
Edit again. Finally I could to draw the Circle. But, my question is, how can I access to Radius and Center from Circle1? And modifying Circle1, I modify Circle in the same time.
I am using:
var circle1 = new ol.geom.Circle(ol.proj.transform([latd, lond],
'EPSG:4326', 'EPSG:3857'), radius);
var circle = new ol.geom.Polygon.fromCircle(circle1, 232, 0);
var CircleFeature = new ol.Feature(circle);
Circle geometries are currently not supported in ol3-google-maps, see: https://github.com/mapgears/ol3-google-maps/blob/master/LIMITATIONS.md#circle-geometry
If you wish to contribute it, you can create a pull request on the library's GitHub.
Related
I'm implementing an application in which I have to show google map with circle at the center of the map. I'm able draw a circle on map but after few seconds I've to update the circle's radius. I want to use same instance of map rather than creating new one.
When i create the new circle its overlapping on older circle. I want to remove previously added circle and show new one.
While checking the api I got this method from Circle class which will hide the circle.
myCity.setOptions({visible:false});
but the problem is I don't have access to older circle instance.
Is there any way which will allow me to get maps markers and infoboxes assigned to that map and remove them?
Below is method which will get called interval of few seconds
function mapByCoordinates()
{
var lat=document.getElementById("latValue").value;
var lng=document.getElementById("lngValue").value;
var accuracy = document.getElementById("zoomValue").value;
var zoomVal=getZoomBasedOnAccuracy(accuracy);
var zm = parseInt(zoomVal);
var tempRadius = getRadiusBasedOnAccuracy(accuracy);
var amstr = new google.maps.LatLng(lat,lng);
var mapProp = {
center:amstr,
zoom:zm,
mapTypeId:google.maps.MapTypeId.HYBRID
};
map.setOptions(mapProp);
myCity.setOptions({visible:false});
infobox.close();
myCity = new google.maps.Circle({
center:amstr,
radius:tempRadius
});
marker=new google.maps.Marker({
position:amstr,
});
myCity.setMap(map);
myCity1.setMap(map1);
infobox = new google.maps.InfoWindow({
content:"Welcome to google map",
disableAutoPan:true
});
infobox.open(map,marker);
map.panTo(amstr);
map.setZoom(19);
}
Thanks
We can make the already drawn circle invisible on google maps by using following method
circle.setOptions({visible:false});
and can null the instance of that map.
Try circle.setRadius(radiusvalue)
I am trying to get started with the Google Maps API, but I'm finding the documentation incredibly confusing. Does anyone know how to find the coordinates for an image for a ground overlay?
I copied the code here (https://developers.google.com/maps/documentation/javascript/overlays#GroundOverlays) and have it working on my website with my image. But when I try to change the coordinates from Newark to my location, the image does not appear at all. I've just been guesstimating the coordinates for the imageBounds and I'm guessing that's what is causing it not to work. Any help would be most appreciated.
This is my code (the LatLng coordinates are copied from the example):
function initialize() {
var newark = new google.maps.LatLng(40.740, -74.18);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.712216,-74.22655),
new google.maps.LatLng(40.773941,-74.12544));
var myOptions = {
zoom: 13,
center: newark,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var oldmap = new google.maps.GroundOverlay(
"http://www.mcography.com/beta/Accessibility_Map.png",
imageBounds);
oldmap.setMap(map);
}
I use the LatLng Marker and LatLng tooltip options of maps.google.com labs (link is in the right bar - bottom). Once I get it close, I simply make small tweaks to my LatLng numbers.
Also it looks like you may be using the wrong corners for your LatLngBounds box. It should be Southwest (bottom left) then Northeast (top right). Using the wrong corners has the effect of not showing an image.
Google Maps javascript API question - Map object recenters after applying KML layer. How do I prevent this?
I created a simple page with a map. When I apply a simple polygon KML, it recenters and zooms the map. Any ideas?
var myOptions = {
center: new google.maps.LatLng(27, -97),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var buildings = new google.maps.KmlLayer('https://mysite/site/buildings.xml');
buildings.setMap(map);
//i tried this to recenter and zoom, but no dice.
var posn = new google.maps.LatLng(27, -97);
map.setCenter(posn);
map.setZoom(17);
Sounds like you need the preserveViewport option. From the documentation:
By default, the input map is centered and zoomed to the bounding box of the contents of the layer. If this option is set to true, the viewport is left unchanged, unless the map's center and zoom were never set.
Pass it a KMLLayerOptions object through the constructor:
var buildings = new google.maps.KmlLayer('https://mysite/site/buildings.xml',{preserveViewport:true});
I'm adding a collection of markers to a map in the v3 api. Everything works fine, but when I drag the map (enough so the markers are off the screen), zoom in, and then drag the map back to the original center, the marker images are offset by roughly the distance I dragged the map. They're still arranged in the correct shape, just moved.
A few other notes:
The marker images don't move if I drag and don't zoom in, or if I drag and zoom out.
If I just zoom in on the map until the markers are off the screen, the same thing happens
Polylines do not move (i.e., they retain their correct position no matter what)
In Firefox, marker images move (or rather, stay in their same pixel position and don't move with the coordinates point on the map) whenever i zoom in on a point other than map center
Here's the code I'm using the add markers:
var bounds = new google.maps.LatLngBounds;
for (i=0, len=points.length; i<len; i++) {
var myPoint = points[i];
var myLatLng = new google.maps.LatLng(myPoint.lat, myPoint.lng);
var markerImage = new google.maps.MarkerImage(
'http://www.mysite.com/images/marker.png',
new google.maps.Size(21,21), // size
new google.maps.Point(0,0), // origin
new google.maps.Point(10,10), // anchor
new google.maps.Size(21,21) // scale
);
var markerOptions = {};
markerOptions.map = this.map;
markerOptions.position = myLatLng;
markerOptions.icon = markerImage;
markerOptions.draggable = true;
this.markers[i] = new google.maps.Marker(markerOptions);
bounds.extend(myLatLng);
}
It's like the pane for the markers is disconnected from the pane for the map and polylines. Is there something I can do differently when adding the markers so the images retain their correct display position? This wasn't a problem in V2.
I'm fired.
Just after the block of code in the example, I had
if (init) {
//a bunch of stuff, PLUS
this.map.fitBounds(bounds);
} else {
//a bunch of other stuff, BUT NO fitBounds
}
so, adding
this.map.fitBounds(bounds);
in both logic paths fixed the problem
I have an overlay that is dynamically generated from user data, so I need to know how to find the center of that overlay.
Currently, I am just using the first coordinates from the overlay, but that really does not represent the center of the overlay. Therefore when I load the map, it is not centered on the overlay.
Does anyone have a good method for centering the map on the overlay, by calculating the center, not hard coding it?
var latlng = new google.maps.LatLng(38.269239, -122.276010);
var myOptions = {
zoom: 15,//Calculate this somehow?
center: latlng,// Calculate value from array of coordinates?
mapTypeId: google.maps.MapTypeId.HYBRID
};
If you have a list of coordinates, you can loop over them and add them to a LatLngBounds object. Here is a example for the V3 API, but the concept in V2 is similar:
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < coordinates.length; i++) {
bounds.extend(coordinates[i]);
}
After that, you can get the center with:
bounds.getCenter();
Or alternatively, you can call map.fitBounds() directly, which will center the map around the center of the bounds and adjust the zoom, so that the whole bounds will fit exactly into the view port.
map.fitBounds(bounds);
Based on #tux21b,
var bounds = new google.maps.LatLngBounds();
polyline.getPath().forEach(function(e){//can't do polyline.getPath()[i] because it's a MVCArray
bounds.extend(e);
})
_map.fitBounds(bounds);