I have this code that suppose to place the marker by the latlng
public void initialize() {
geocoder = Geocoder.create();
myOptions = MapOptions.create();
myOptions.setZoom(18);
myOptions.setMapTypeId(MapTypeId.HYBRID);
myOptions.setMapMaker(true);
map = GoogleMap.create(
Document.get().getElementById("map_canvas"),myOptions);
GeocoderRequest request = GeocoderRequest.create();
request.setLocation(LatLng.create(lat,lng));
geocoder.geocode(request, new Callback() {
public void handle(JsArray<GeocoderResult> rslts, GeocoderStatus status)
{
if (status == GeocoderStatus.OK) {
location = rslts.get(0);
map.setCenter(location.getGeometry().getLocation());
marker = Marker.create();
marker.setMap(map);
marker.setPosition(location.getGeometry().getLocation());
}
}
});
When I tested with those coordinates (45.48592686713835, -73.49009937672122)
I only get the nearest address which is the icon A. But what I really wanted is the exact location showed with the green arrow.
Am I missing something ?
You will always get the nearest address, if one may be determined, when using the Geocoder to do a reverse geocode (convert LatLng to address). If you want to use the original coordinates, just place the Marker using the original coordinates. If you are going to convert the LatLng to an address or the closest that the Google Geocoder can get to an address, the results will always give you the LatLng of the nearest known street_address, route, airport, transit_station, neighborhood, sublocality, locality, etc.
Related
How can I make my polygon go throughout the street instead of the weird shape in the image below, the data I am passing have the street coordinates. so I don't know why it makes such a strange shape.
How could I fix this?
public async Task DisplayRoute (List<Position> rpositions, Color color)
{
Polygons = new ObservableCollection<TKPolygon>();
var LoopB = new TKPolygon
{
StrokeColor = color,
StrokeWidth = 4f,
Coordinates = rpositions
};
_polygons.Add(firtline);
await Task.Delay(1000);
LoopB.StrokeColor = color;
await Task.Delay(1000);
}
Use this set of coordinates. how could they go through the streets instead of cutting the line through buildings and the sea?
25.848399-80.120878
25.850423-80.120287
25.85412-80.120397
25.85776-80.120689
I'm getting (NaN, NaN) when I trying to fetch the latitude and longitude information from an GET in JavaScript. Here's my code:
var GET = {};
var params = location.search.substr(1).split("&");
for (var i=0; i < params.length; i++) {
var par = params[i].split('=');
GET[par[0]] = par[1];
}
function initialize() {
var latitude_longitude = new google.maps.LatLng(GET['coordinates']);
// The basic code to call Google Maps JavaScript API v3 ...
}
Do I have to put the latitude and longitude in clear text (for example ... new google.maps.LatLng(59.328614,13.485847))?
Thanks in advance.
LatLng() takes two arguments, so you will need to split the coordinates:
function initialize() {
var csplit = GET['coordinates'].split(',');
var latitude_longitude = new google.maps.LatLng(csplit[0], csplit[1]);
// The basic code to call Google Maps JavaScript API v3 ...
}
Can you elaborate, what's stored in coordinates?
You might have to use split(','), then write new google.maps.LatLng(parseFloat(value[0]),parseFloat(value[1]))
I have a some UI elements on the right of my map (sometimes), and I'd like to offset my panTo() calls (sometimes).
So I figured:
get the original latlng
convert it to screen pixels
add an offset
convert it back to latlng.
But I must misunderstand what Google Maps API refers to as the "Point Plane":
http://code.google.com/apis/maps/documentation/javascript/reference.html#Projection
Here is my code that seems to offset by lat-long:
function getCentreOffset( alatlng ) {
var PIXEL_OFFSET= 100;
var aPoint = me.gmap.getProjection().fromLatLngToPoint(alatlng);
aPoint.x=aPoint.x + OFFSET;
return me.gmap.getProjection().fromPointToLatLng(aPoint);
}
Here's a simpler version of Ashley's solution:
google.maps.Map.prototype.panToWithOffset = function(latlng, offsetX, offsetY) {
var map = this;
var ov = new google.maps.OverlayView();
ov.onAdd = function() {
var proj = this.getProjection();
var aPoint = proj.fromLatLngToContainerPixel(latlng);
aPoint.x = aPoint.x+offsetX;
aPoint.y = aPoint.y+offsetY;
map.panTo(proj.fromContainerPixelToLatLng(aPoint));
};
ov.draw = function() {};
ov.setMap(this);
};
You can then use it like this:
var latlng = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
});
setTimeout(function() { map.panToWithOffset(latlng, 0, 150); }, 1000);
Here is a working example.
Let me explain in detail. This extends the Map object itself. So you can use it just like panTo() with extra parameters for offsets. This uses the fromLatLngToContainerPixel() and fromContainerPixelToLatLng() methods of the MapCanvasProjecton class. This object has no contructor and has to be gotten from the getProjection() method of the OverlayView class; the OverlayView class is used for the creation of custom overlays by implementing its interface, but here we just use it directly. Because getProjection() is only available after onAdd() has been called. The draw() method is called after onAdd() and is defined for our instance of OverlayView to be a function that does nothing. Not doing so will otherwise cause an error.
Answer by Dean looks a lot cleaner as said in some comments, but was looking a little complicated to me. This single line solution is looking more elegant to me.
var map = $('#map_canvas').gmap3("get")
map.panBy(-500,-500); // (x,y)
Set center of map first. Then panyBy will shift the center in (x,y) direction. The more negative x, map will shift right. The more negative y, map will shift down.
Ok I found the answer here: How to call fromLatLngToDivPixel in Google Maps API V3?
First create function/prototpe to access the map's projection (difficult in V3)
//declare function/prototpe
function CanvasProjectionOverlay() {}
//define..
CanvasProjectionOverlay.prototype = new google.maps.OverlayView();
CanvasProjectionOverlay.prototype.constructor = CanvasProjectionOverlay;
CanvasProjectionOverlay.prototype.onAdd = function(){};
CanvasProjectionOverlay.prototype.draw = function(){};
CanvasProjectionOverlay.prototype.onRemove = function(){};
var gmap;
var canvasProjectionOverlay;
var PIXEL_OFFSET= 100;
function showUluru(isOffset=false){
//create map
var gmap = new google.maps.Map($('#map_canvas', {});
//create projection
canvasProjectionOverlay = new CanvasProjectionOverlay();
canvasProjectionOverlay.setMap(gmap);
var uluruRock = new google.maps.LatLng(-25.335448,135.745076);
if (isOffset)
uluruRock = getCentreOffset(uluruRock);
gmap.panTo( uluruRock )
}
//Use this function on LatLng you want to PanTo();
function getCentreOffset( alatlng ) {
var proj = canvasProjectionOverlay.getProjection();
var aPoint = proj.fromLatLngToContainerPixel(alatlng);
aPoint.x=aPoint.x+PIXEL_OFFSET;
return proj.fromContainerPixelToLatLng(aPoint);
}
i need to know long and lat of my four corners of current area
as in this image
i have tried this but with no luck :
map.getBounds();
any help ?
You are half way there. All you need to do is to get the map bounds and then extract (and properly use) the coordinates of the corners.
var bounds = map.getBounds();
var ne = bounds.getNorthEast(); // LatLng of the north-east corner
var sw = bounds.getSouthWest(); // LatLng of the south-west corder
You get north-west and south-east corners from the two above:
var nw = new google.maps.LatLng(ne.lat(), sw.lng());
var se = new google.maps.LatLng(sw.lat(), ne.lng());
Just keep in mind that the map has to be already initialized, otherwise the map bounds are null or undefined.
If you want to be updated about every change of the viewport, use idle event listener:
google.maps.event.addListener(map, 'idle', function(ev){
// update the coordinates here
});
In Android, you can find out corner LatLng (northeast, southwest) by this way,
in the map, every time the camera listen(means gesture detect) they are called,
private var mapView: GoogleMap? = null
............
mapView?.setOnCameraMoveStartedListener { reasonCode ->
if (reasonCode == GoogleMap.OnCameraMoveStartedListener.REASON_GESTURE) {
val screenView: LatLngBounds = mapView.getProjection().getVisibleRegion().latLngBounds
var northeast=screenView.northeast
var southwest=screenView.southwest
var center=screenView.center
Log.v("northeast LatLng","-:"+northeast)// LatLng of the north-east Screen
Log.v("southwest LatLng","-:"+southwest)// LatLng of the south-west Screen
Log.v("center LatLng","-:"+center)// LatLng of the center Screen
}
}
**this is mapbox zoom example**
map.on('zoom', (el) => {
map.getBounds();
});
How to display Bing map dynamically in an ASP.NET website based on the address provided. I do not have latitude and longitude for the address so I have to pass address directly and display the map.
In the ASP.Net mark up page, I have a hidden field which contains address. Based on this address, bing map gets loaded using the script mentioned below. A pushpin is placed on the address for easy identification of the address.
var map = null;
var pinid = 0;
function GetMap() {
map = new VEMap('theMap');
map.LoadMap();
map.SetZoomLevel(10);
FindLoc();
}
function FindLoc() {
try {
map.Find("<b>Property Address:</b>",
document.getElementById('ctl00_head_HiddenField1').value,
null,
null,
1,
1,
true,
true,
true,
true,
ProcessResults);
}
catch (e) {
alert(e.message);
}
}
function ProcessResults(layer, results, places, hasmore)
{
CreatePin("Default", places[0].LatLong);
}
function CreatePin(type, point)
{
if (point != 'Unavailable')
{
var pin = new VEShape(VEShapeType.Pushpin, point);
pin.SetTitle('<b>Property Address:</b>');
pin.SetDescription(document.getElementById('ctl00_head_HiddenField1').value);
map.AddShape(pin);
}
}