I have, for example, 10 markers on Google Map. But I zoomed and in visible area left only 2 markers.
Can Google Maps API somehow return me a number of markers in visible area (2 for my example)?
You can evaluate map.getBounds().contains(marker.getPosition()) with each marker to see which ones are included in the current viewport.
The above code is not working. There is no method as such getBounds(). Below is the updated code :
VisibleRegion visibleRegion = map.getProjection().getVisibleRegion();
LatLngBounds mapBound = visibleRegion.latLngBounds;
if(mapBound.contains(marker.getPosition()){
// do somethings i.e. such as changing marker icon and others.
}
Related
I'am using reactJS and want to design a component with following functionality :
Display pixelated image which is able to zoom in and zoom out at pixel level.
When clicked on image , display a marker- which can be a dot or icon at specific position.
When image is zoomIn/zoomOut, marker size and position should not change.
Even after zoomIn/zoomOut when clicked on image, marker should get repositioned at proper pixel on the image.
I am thinking of applying same logic as used in the maps/ leaflet. Like they maintain separate layers for map and markers on the map. If we zoomIn/out maps it won't affect the marker position or size, same functionality I want for the image.
Anyone with the solution or related library will be welcomed !
(For reference, I want this design for marking GCP(Ground Control Points) on the image, which requires very precise marking at pixel level)
I am experiencing a strange positioning issue when placing an overlay in my home city (Syracuse, NY). First the test map:
http://hotsdg.com/~downtown/map.html
This map uses the example code to place my image over newark. No problem here. The image is skewed and distorted of course, by placement occurs as expected.
The second map:
http://hotsdg.com/~downtown/map_two.html
This map uses the example code with coords adjusted to place the image over Syracuse, NY. At first glance the overlay appears to be missing. However, upon inspection I discovered that the element which is used for the overlay has it's top set to 94px (at the initial zoom), instead of 0px. Adjusting this manually brings the image into view.
Any thoughts as to what might be happening here, or more importantly, why it's happening?
A google.maps.LatLngBounds takes SW, NE LatLngs for the constructor.
Your working map does that (SW, NE):
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.716216, -74.213393),
new google.maps.LatLng(40.765641, -74.139235));
the not working one is (NW, SE):
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(43.054340, -76.159101),
new google.maps.LatLng(43.042504, -76.142601));
i'm looking for some info about Google Map V3. I want change the color of the zoom control , i want it red...
How can i change the color simply ?
Thank you for response !
They're images, so you can't simply "change" the color. What you can do, however, is create a map WITHOUT the zoom controls and then just use the API and your own DOM elements as zoom controls.
This will give you a very rough idea:
var map = new google.maps.Map();
//zoom out
map.setZoom(map.getZoom()-1);
//zoom in
map.setZoom(map.getZoom()+1);
I have a Google Maps JavaScript v3 map on my website that allows me to drag the marker to get the coordinates for the given location. This works perfectly but I also want to enter the coordinates manually and then click on a link to update the marker. This works great but I can't center the map to the marker (make it to pan to the marker).
I have also added a select box with solid coordinates to quickly get to a specific location on the map. I have the same problem for this one to as for the first problem.
The problem is that when I manually enter the coordinates or choose a fixed location, the marker only moves few steps from the origin position or it doesn't move at all. When you try to grab the marker and move it you can't move it and the X is far away from the marker. After few attempts to move the marker the maps goes blank but the marker stands still.
You can see my solution and problems on jsFiddle. How can I fix my issue?
Thanks in advance.
function moveMarker() {
var lat = parseFloat(document.getElementById('marker-latitude').value);
var lng = parseFloat(document.getElementById('marker-longitude').value);
var newLatLng = new google.maps.LatLng(lat, lng);
marker.setPosition(newLatLng);
map.setCenter(newLatLng);
}
Does that work?
Please help me to change size of openInfoWindowHtml in google map and plez tell me can i make it popup out of map area also..? i mean my map area is very small but i want that when user click on Marker this openInfoWindowHtml should show popup and if its crossing size of map than its should show beyond the boundary of google map. ( i am working in asp.net)
There are 2 ways that you can influence the size of the InfoWindow. First, you can pass a GInfoWindowOptions object when you call openInfoWindowHtml (see: http://code.google.com/apis/maps/documentation/reference.html#GInfoWindowOptions) Second, you can wrap the contents of the InfoWindow in a div and use CSS to set the size of that div.
Regardless of which method you use to set the size of the InfoWindow, it can never exceed the bounds of the map canvas (area).