Is there a way to get the bounding rectangle (screen position) of Google Map API markers? I am using an Angular 2 wrapper, so I don't construct the markers like you would normally with the API (mostly irrelevant here though).
Or are they on an internal canvas with no way to pull position like you would with an html element?
I have tried something like this, but getBoundingRectangle() comes back with zero values:
var googleMapContent = document.getElementsByClassName("sebm-google-map-content")[0];
var markerList = googleMapContent.getElementsByTagName("sebm-google-map-marker");
if( markerList.length > 0 ) {
for (var i = 0; i < markerList.length; i++ ){
var marker = markerList[i];
var markerLabel = marker.getAttribute("ng-reflect-label");
var boundingRectangle = marker.getBoundingClientRect();
}
}
P.S. I have access to map center lat/lng + zoom and marker lat/lng, so I can "math" this, but that's pretty dirty.
The Marker class hasn't got either a getBoundingRectangle or
getBoundingClientRect method.
It has got getPosition() and getShape() though, which in combination might give you the information you need.
Related
My app shows two kinds of markers: locations and items. I would like to be able to drag and drop items onto locations.
But when a marker is dragged, the mouseover event on the markers it is dragged over are not triggered.
If someone know a way to create this effect, I'd be eternally greatfull :-)
I think your best bet would be to implement it based on distance to the target, either real world distance in meters or screen distance in pixels.
For example:
var locations = Array();
var items = Array();
and then:
var itemMarker = new google.maps.Marker(opts);
google.maps.event.addListener(itemMarker, 'drag', function(){
for( var n = 0; n < locations.length; n++){
var d = google.maps.geometry.spherical.computeDistanceBetween(this.getPosition(),locations[n].getPosition());
if (d < 5){
// do something when below a given threshold.
}
}
});
items.push(itemMarker);
Demo here:
http://maps.forum.nu/v3/gm_template_simple.html
(Drag the Omaha marker towards Chicago.)
Remember to load the geometry library when you load the API.
I am having a map with some polylines with the distance [api v3]. I want that when someone drag the polyline at the same time the distance also get updated but dont know how to do. Please help me, any good tutorial or another threads are most welcome
Thanks for helping me
Naveen
This page describes using draggable markers and updating the distance when a marker is moved.
http://exploregooglemaps.blogspot.com.br/2012/02/measuring-distance-with-markers.html
There is a attribute which makes your polyline editable.
polyPath.setEditable(true);
Now use a listener to check the editing.
google.maps.event.addListener(polyPath, 'capturing_changed', function() {
var array = polyPath.getPath(); //getPath() gives u array of current markers latlng over map
var tempDistance = 0;
var tempPathArray = [];
for(i = 0; i < array.length; i++){
tempPathArray.push(array.getAt(i));
}
for(k = 1; k < tempPathArray.length; k++)
{
var calculateNewDistance=google.maps.geometry.spherical.computeDistanceBetween(tempPathArray[k-1],tempPathArray[k]);
tempDistance += calculateNewDistance;
}
}
// make sure to add the following script to compute the distance between two latlngs
Is there a simple way to scroll a google map programmatically of x pixels?
I can only think of using setCenter, but the problem is that I would have to compute the new location (lat/lng) depending on the zoom level...
Can you think of something else? Telling me that it's not possible with the Google Map API is a valid answer if you're pretty sure about it.
ps: I'm using Gmaps4rails, so if you can think of a way to do that with the gem, it'd be cool. (like adjusting the bounds to a subset of the map.)
Because in the end my goal is to prevent the menu from hidding some markers. I would need to change the viewport of the map, if that makes sense, so that it fits the markers into the orange area, not the full map.
Solution:
#Shane Best, great, the idea works perfectly, but I think your solution was for Google API v2, right? Here's how I did it for V3:
var point = map.getCenter();
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
var projection = overlay.getProjection();
var pixelpoint = projection.fromLatLngToDivPixel(point);
pixelpoint.x += my_value; # or .y
point = projection.fromDivPixelToLatLng(pixelpoint);
map.setCenter(point);
If anybody knows about a better solution with API v3, tell us about it.
Take a look at the projection object:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Projection
First you would need to get the center of the map.
var point = map.getCenter();
Convert the latlng to a point value.
var pixelpoint = projection.fromLatLngToPoint(point);
Add yourvalue to the point values.
pixelpoint.x = pixelpoint.x + yourvalue;
//or
pixelpoint.y = pixelpoint.y + yourvalue;
Convert it back to a latLng.
var newpoint = projection.fromPointToLatLng(pixelpoint);
Set the new center with the new value.
map.setCenter(newpoint);
I haven't tested the above but it should work.
I believe you are looking for this:
var panListener = google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
map.panBy(0,-90);
});
setTimeout(function() {
google.maps.event.removeListener(panListener)
}, 2000);
In this case, it moves the map south by 90px.
When overlay is a Google maps overlay and offsetx, offsety is the pixel distance from the maps center that I want to pan latlong to, the following works.
var projection = overlay.getProjection();
var pxlocation = projection.fromLatLngToContainerPixel(latlong);
map.panTo(projection.fromContainerPixelToLatLng(new google.maps.Point(pxlocation.x+offsetx,pxlocation.y+offsety)));
However, I don't always have an overlay on the map and map.getProjection() returns a projection, not a MapCanvasProjection which does not have the methods I need.
Is there a way to do this without making an overlay specificaly for it?
Since nobody has come up with a better way, here's my solution. Make an overlay with the sole job of giving me a MapCanvasProjection object.
var helper = new google.maps.OverlayView();
helper.setMap(map);
helper.draw = function () {
if (!this.ready) {
this.ready = true;
google.maps.event.trigger(this, 'ready');
}
};
var projection = helper.getProjection();
...
Hope this helps someone. Better suggestions welcome.
I am working with google map. According to requirements i need to set different zoom level that is dependent to my search query.If there are multiple location on the map in country then map should focus the country. Other scenario is , if there are different locations marked in a city then map should be focused to city level.
var geoCoder = new GClientGeocoder();
geoCoder.setViewport(map.getBounds());
geoCoder.getLocations('searchquery', function(latlng) {
if( latlng.Placemark.length > 0 ) {
var box = latlng.Placemark[0].ExtendedData.LatLonBox;
var bounds = new GLatLngBounds(new GLatLng(box.south, box.west), new GLatLng(box.north, box.east));
var center = new GLatLng(box.Placemark[0].Point.coordinates[1], latlng.Placemark[0].Point.coordinates[0]);
var zoom = oMap.getBoundsZoomLevel(bounds);
map.setCenter(center, zoom);
}
});
I think the key part of this for you is
//box is a LatLonBox with the size of your resultquery. You can create this yourself as well
var box = latlng.Placemark[0].ExtendedData.LatLonBox;
//bounds are the bounds of the box
var bounds = new GLatLngBounds(new GLatLng(box.south, box.west), new GLatLng(box.north, box.east));
//center is the center of the box, you want this as the center of your screen
var center = new GLatLng(box.Placemark[0].Point.coordinates[1], latlng.Placemark[0].Point.coordinates[0]);
//zoom is the zoomlevel you need for all this
var zoom = oMap.getBoundsZoomLevel(bounds);
//the actual action
map.setCenter(center, zoom);
After you perform the search, once you have the locations, you can use bounds.extend and map.fitBounds so the map automatically zooms to show all the pins returned by your search, like this:
//places is an array that contains the search result
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
//pass the location of each place to bounds.extend
bounds.extend(place.geometry.location);
}
//tell your map to sets the viewport to contain all the places.
map.fitBounds(bounds);
On the other hand, if you do a search for a zone like zip code, city or country using the geo coder, you can also use map.fitBounds to set the viewport to show the entire specific zone that was returned by the geo coder, like this:
//response is the geocoder's response
map.fitBounds(response[0].geometry.viewport);
Here's a codepen with the geocoder example https://codepen.io/jaireina/pen/gLjEqY
I found following article very helpful. using code sample code I can able to achieveenter link description here this.
I tried the code in drupal and it is working.