What I'm trying to do is draw a circle on google maps and retrieve the latitude/longitude/radius to store in a database, alternatively a geometry object would also be fine.
Using the standard code from https://developers.google.com/maps/documentation/javascript/examples/drawing-tools i created the map and drawing toolbox. What i can't seem to do is get the lat/long/radius from the map using javascript, surely this must be possible.
Any ideas?
Thanks
Note - my code is identical to the google example, i figured it was better to link to it rather than copying ~60+ lines of html into a post.
Thanks
Ref: https://developers.google.com/maps/documentation/javascript/drawing
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
var radius = circle.getRadius(),
center = circle.getCenter();
});
Edit: getCenter()
Related
Here I have plotted a circle with
center="59.82352331557955,-43.59219821635634" & radius ="567.6796059859073"
I am giving two links , one is plotted using ngui-map and second one is the the marker point set as the same circles center in google map.
Link1: Plunker
Link2: Google map
There is a huge difference between them. Can anyone help? Is this my mistake or bug in the module?
AFAIK(I have been using ng2-ui/map for some while), the marker's position accept array which contains lat, lng, and circle's center accept object which contains properties of lat/lng, ng2-ui/map will call geocode to search for result if they are binded with string(your current plunker).
refer code, and fixed plunker.
I have a LeafletJS map with a GeoJSON layer that contains multiple polygons. If a user enters a latitude/longitude coordinate that falls within the GeoJSON layer, the script should retrieve the feature that contains that point and log some information about it to the console.
I can't simply use Leaflet's built-in event handling because the latitude and longitude coordinates are generated by a separate input field, not by direct interaction with the map. So my question is not a duplicate of this.
I'm looking for something similar to getFeatureContainingLatLng() in the example below:
var map = L.map('map');
var geojson = L.geoJson(myGeojson);
geojson.addTo(map);
$.on('address input changed event', function(lat, lng) {
var myFeature = geojson.getFeatureContainingLatLng(lat, lng);
console.log(myFeature.properties);
});
The plugins Leaflet.CheapLayerAt or Leaflet-pip should help. Both approaches will solve your problem, albeit they have different advantages and disadvantages specially in terms of algorithmic complexity.
I'm trying to render Antarctica geojson shape on a map using the HERE maps api.
The geojson is found here: https://github.com/johan/world.geo.json/blob/master/countries/ATA.geo.json
You can see github renders it nicely.
Using the same geojson on geojson.io also renders it nicely.
But somehow it seems to render the 'inverse' of Antarctica when using it in HERE maps.
It colors everything except antarctica.
see: http://imagebin.ca/v/1dZIn5vsEuFx
(I've tried making an expample using jsfiddle, but it's not able to load external json. And the HERE maps api doesn't allow you to load geoJSON from a string)
Is there an issue with the geoJSON? Is there an issue with the HERE maps api?
The API doesn't quite understand what to do with the open polygon. Because the polygon is basically just a line around the globe the API doesn't know if you shape closes over the north pole or the south pole. By default it assumes that open polygons close over the north pole. You can change this by using this flag (setNorthPoleCovering):
http://developer.here.com/javascript-apis/documentation/v3/maps/topics_api_nlp/h-map-polygon.html#h-map-polygon__setnorthpolecovering
However, actually getting to that point in the code where this can be done is a bit complicated:
// When you instantiate the geojson.Reader you can specify a function that
// receives all objects the reader parsed. It is called when objects are
// being rendered on the map. At that point we can look into the object and
// check whether it is Antarctica
var reader = new H.data.geojson.Reader('...ATA.geo.json', {
style: function(obj) {
if (obj.getData().properties.name === "Antarctica") {
//AHA! We found Antarctica!
// Since this is a multi-polygon we have a group here which contains
// all polygons. We apply the north-pole-covering flag to each of the
// polygons
obj.forEach(function(polygon) {
polygon.setNorthPoleCovering(false);
});
}
}
});
reader.parse();
map.addLayer(reader.getLayer());
Depending on what you want to accomplish in terms of dynamic behavior, if you are just looking to display or share a map with cards and other metadata about a country with some basic styling -- HERE XYZ can be used to render GeoJSON on a HERE map.
If you want to do it with JavaScript rather than an embedded iframe, the other answer may be what you are looking for.
There is an there an issue with the GeoJSON, and other mapping APIs would have the same problem. It needs to be closed at the 180th meridian, so
[178.277212,-84.472518],[180,-84.71338],[-179.942499,-84.721443]
becomes
[178.277212,-84.472518],[180,-84.71338],[180,-90],[-180,-90],[-180,-84.71338],[-179.942499,-84.721443]
We are using the Javascript API v3 and I want to add a radius to get more local results. But I can't get it to work.
The docs say to use radius with the Google Places API but use a rectangular LatLngBounds for the Google Maps JavaScript API v3. Is that right or can I use radius with Javascript API?
Doesn't work:
var defaultPlace = new google.maps.LatLng(28.522399, -81.415558);
var optionsAuto = {
location: defaultPlace,
radius: 20000
};
var autocomplete2 = new google.maps.places.Autocomplete(input2, optionsAuto);
You cannot use radius with the Javascript API. https://developers.google.com/maps/documentation/javascript/reference#AutocompleteOptions
The Javascript API is different from the REST API. I suppose if you really needed the radius, you could proxy the result of the REST call into your application. But it shouldn't be too difficult to create some method that translates a radius value into a square bounding box for use in the Javascript API.
i need some help with google map api v3 markers.
I got an array which contains coordinates i retrieve from a file. I am trying to traverse the array, and plot them using the markers.
Traversing the array to retrieve the coordinates is not a problem, however, when i start using the coordinates to plot on google map. i realise that i am getting (NaN, NaN) as the coordinates.. Because of this, i am not able to do the plotting.. any idea why isit? Thanksss
my codes so far:
var temp = new google.maps.LatLng(myObject[o]);
retrieverouteMarker(temp);
The constructor for LatLng takes two arguments (the latitude and longitude of the point), so this line is clearly wrong:
var temp = new google.maps.LatLng(myObject[o]);
Of course, since we have to idea what myObject is, or what the function retrieverouteMarker does, there isn't much more we can do to help.