I'm building a NativeScript app using the nativescript-google-maps-sdk.
I have added an eventlistener for the coordinateTapped event and now that it is working I want to plot a marker on the map at the position at which I tap.
I cannot find an example of this online or in the sdk documentation.
I feel I am very close and just have a few minor corrections to make.
var mapsModule = require("nativescript-google-maps-sdk");
function onCoordinateTapped(args) {
console.log("coordinate tapped!");
var mapView = args.object;
var marker = new mapsModule.Marker();
marker.position = mapsModule.Position.positionFromLatLng(args.latitude,args.longitude);
mapView.addMarker(marker);
}
Note: I've labelled this question with the google-maps tag as there is no nativescript-google-maps tag.
Never it's too late to answer this kind of questions.
The problem was that the args object doesn't have a latitude nor a longitude attribute, so you are trying to add a marker with latitude and longitude as undefined.
Inside your function onCoordinateTapped(args) you can access to two different positions.
First, args.object.latitude and args.object.longitude.
var lat = args.object.latitude;
var lng = args.object.longitude;
Those attributes stand for the current position of the map (you know, the center of it).
Second, args.position.latitude and args.position.longitude.
var lat = args.position.latitude;
var lng = args.position.longitude;
In this case, those attributes represents the actual position of your tap on the map.
Also, this works on coordinateLongPress.
Hey #Danoram you code looks'n'feels right and although there is no XML file I guess you have used the coordinateEvent to pass the fallback function onCoordinateTapped like here
<maps:mapView coordinateTapped="onCoordinateTapped" />
Is that working out for you or are you experiencing some kind of error/unexpected behaviour? It is not entirely clear from your post where the issue is...
Related
NO, THE ABOVE ANSWERS DON'T ANSWER MY QUESTION. PLEASE READ MY UPDATE BELOW TO SEE THE CLARIFICATION WHY THIS IS A DIFFERENT CASE!!!
I'm using Google maps API V3. When I write this code:
map.fitBounds(map.getBounds());
the map zooms out!
I understand that it's according to the documentation since fitBounds ensures to show the given bounds on the map so that all the edges are shown inside the map. Therefore, the answer I'm looking for lies into the following:
How to modify the result of getBounds to be used for fitBounds without zoom effect afterwards?
Basically, I'm quite sure this can be calculated because that's what the map does, but in the opposite direction, when adding margins, to show the given bounds completely. In these terms, tell me how to calculate the margins (and therefore, how to calculate the correct input for fitBounds having output from getBounds) and your answer will be accepted.
Thanks in advance!
Update:
Zoom and Center retrieval and setting does not work for me! here's the reason why:
I am going to hold the map's viewport information in the database. Later on, I want to re-create the map and show the exact same location again. However, the mapping platform can differ from user to user. Therefore, zoom and center is not standard between different mapping platforms/frameworks and cannot be used in all them with the same results. Therefore, the only standard way is to hold the bounds in the database. So the question needs an answer exactly in the direction it is asking for.
Store instead of the bounds the zoom and center of the map and restore these values later.
I had the exact same problem and decided to shrink the bounding box resulting from getBounds() with 15%. That does the job nicely for me:
var neLat = map.getBounds().getNorthEast().k;
var neLong = map.getBounds().getNorthEast().B;
var swLat = map.getBounds().getSouthWest().k;
var swLong = map.getBounds().getSouthWest().B;
var boundingBoxPerc = 0.15;
var mapWidth = neLong - swLong;
var mapHeight = neLat - swLat;
var ne = new google.maps.LatLng(neLat - mapHeight * boundingBoxPerc, neLong - mapWidth * boundingBoxPerc);
var sw = new google.maps.LatLng(swLat + mapHeight * boundingBoxPerc, swLong + mapWidth * boundingBoxPerc);
map.fitBounds(new google.maps.LatLngBounds(sw, ne));
I am displaying two different leaflet maps in the same page. After a certain event. I want a Polyline to appear on both of them. I would like to avoid, if possible, to create a copy and keep two different variables.
I am trying yo use the following:
var line_coordinates = [[1,2],[3,4]];
var my_polyline = L.polyline(line_coordinates);
my_polyline.addTo(map1);
my_polyline.addTo(map2);
However, if I run the above code, the Polyline will be displayed only on the map2.
Afterwords, I will need to change again its coordinates to some new_line_coordinates, and I will run the following:
my_polyline.setLatLngs(new_line_coordinates);
my_polyline.redraw();
The polyline should now appear updated to the new coordinates. However, again, it appears only on map2.
What am I doing wrong? Is it possible to achieve what I am trying to do?
As geocodezip mentioned in a comment, adding a polyline to a map sets the polyline object's this._map instance variable. Therefore, there is no way to have the object rendered on both maps with the way in which it is currently implemented.
You can view the relevant source code here.
You can't add the same layer to multiple Leaflet maps. But I had a similar problem using a more complex GeoJSON layergroup and ultimately solved it by getting the GeoJSON object from the layer using toGeoJSON() and using it to create a new layer for the second map. For a simple polyline, you could use getLatLngs(). So:
var line_coordinates = [[1,2],[3,4]];
var my_polyline = L.polyline(line_coordinates);
my_polyline.addTo(map1);
var new_polyline = L.polyline(line_coordinates);
new_polyline.addTo(map2);
should work, as would:
var line_coordinates = [[1,2],[3,4]];
var my_polyline = L.polyline(line_coordinates);
my_polyline.addTo(map1);
var my_polyline_latlngs = my_polyline.getLatLngs();
var new_polyline = L.polyline(my_polyline_latlngs);
new_polyline.addTo(map2);
I'm using the Google maps API to allow users to set a location by clicking on a map. Wherever the user clicks, the marker is placed and it works quite well. My problem is, my users are adding duplicate locations to my application despite the fact that they can visually see there's already a marker at that location (I'm loading markers for existing locations from my database).
Is there a way, within the Google Maps API, to fire an event if a marker is placed within X distance of a marker already on the map? I know I could probably use the haversine algorithm in javascript in some way, but I'd like to avoid that kind of complexity on the client side if I can.
Another approach, which doesn't require any further calculating of distances or similar:
For every marker placed on the map also create a circle at the same position.
Hide the circle by setting fillOpacity and strokeOpacity to 0 and apply a radius that fit's your needs.
Result: the circle is not visible, but still exists. The map will not respond to click-events when the user clicks on the hidden circle.
Please try this method.. this may be require some modification based on your need, this will be client side but the logic can be implemented server side also.
function CheckIFMarkersAreNearBy(preExistingMarkersArray, milesToCheck, lat, lon){
var range = milesToCheck/70;
var minLat = lat - range;
var maxLat = lat + range;
var minLon = lon - range;
var maxLon = lon + range;
var markersNearBy = 0;
for( var i = 0; i < preExistingMarkersArray.length; i++){
if(preExistingMarkersArray[i].lat > minLat && preExistingMarkersArray[i].lat < maxLat && preExistingMarkersArray[i].lon > minLon && preExistingMarkersArray[i].lon < maxLon){
markersNearBy++;
}
}
alert('you have ' + markersNearBy + 'markers near by you current selection');
}
I don't think there is specific function for that. The closest thing you will find is going to be google.maps.geometry.spherical which includes a function to computeDistanceBetween(from:LatLng, to:LatLng, radius?:number)
So before you drop a new marker on your map just get the distance between your current markers and the newly requested one. Keep in mind, that even if Google Maps API provided way to do it, it would still be on the client side, so you would not be avoiding the "complexity on the client side" anyways.
I am using VEMap API. I have the latitude and longitude of the top left point and the bottom right point (bounding box) of a map. I want to get the center point. What is an easy way to do that? I couldn't find a solution by searching on Google.
What I was thinking is that if I can define the map using the two points mentioned above, then I can get the center very easily:
// JavaScript code snippet
var center = map.GetCenter();
var lat = center.Latitude;
var lng = center.Longitude;
Is there a way to call the constructor of map object and pass the two coordinates I have?
Thanks.
The simple answer would be add the latitudes and divide by two, and do the same for longitudes. They are straight lines.
Is there any reason you can't use the VEMap.GetCenter method after the map has been constructed? This way regardless of the viewpoint it will be correct. If you're using the default constructor you can pass in your bounding box, and then call getmap after the object is instantiated.
http://msdn.microsoft.com/en-us/library/bb412539.aspx
I develop a simple Google Maps application. I need just to place one marker on the map. For whatever reason, the marker is placed outside of the visible area of the map. It's a little bit strange, because the map is centered to the marker's coordinates. Here is the code:
var point1 = new GLatLng(location1.lat,location1.lon);
map1.setCenter(point1, 15);
var marker1 = new GMarker(point1);
map1.addOverlay(marker1);
map1.setCenter(point1);
When we drag the map a little bit, we can see the marker. What do I need is to center the map in the way the marker will be visible without map dragging.
Can anyone help me?
I believe the GLatLng object would accept String arguments as well - but to be safe I would ensure that they are integers - try using:
new GLatLng(parseInt(location.lat), parseInt(location.lon));
I also noticed you call map.setCenter a second time which ought to not be necessary.
Using the following code really ought to do it
map=new GMap(document.getElementById("map"));
var point = new GLatLng(parseInt(location.lat), parseInt(location.lon));
map.setCenter(point,5);
var marker = new GMarker(point);
map.addOverlay(marker);
If you still are having issues I would check that "location" object to make sure the .lat and .lon values are being populated correctly.
Check this code out:
var map = new GMap(document.getElementById("map"));
/* -- snip -- */
map.centerAndZoom(new GPoint(-1.2736, 53.0705), 8);
From a website I made a while ago. Feel free to check the source:
http://www.primrose-house.co.uk/localattractions
Just click the link in the top right to switch to the map view.