Google Maps calculate visible part of the map - google-maps

Ok, i good a simple question about Google Maps.
Imagine there is a map the user scrolls half way out of screen on desktop. So only half of the map is visible on screen.
How can i calculate which part is visible, so i can put a marker in the center of the visible part of the map?
So if you check this out:
http://jsfiddle.net/Honkoman/ghzgdLhw/
and scale the browser window like this:
You see that pressing "run" sets the marker not in the visible middle of the map.
That's because map.getCenter works with the canvas dimensions, not the visible part of the map. So how can this be done?
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});

You can use
map.getBounds()
Returns the lat/lng bounds of the current viewport. If more than one
copy of the world is visible, the bounds range in longitude from -180
to 180 degrees inclusive.
for obtain the coord of the visible maps
or directly you can use getCenter
map.getCenter();
and for marker
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Hello World!'
});
}
for the bound you can use this tecnique
aNord = map.getBounds().getNorthEast().lat();
aEst = map.getBounds().getNorthEast().lng();
aSud = map.getBounds().getSouthWest().lat();
aOvest = map.getBounds().getSouthWest().lng();

Related

Set the marker position in Google Map

I want to know how can I change the position of the marker in the Google Map.
Currently I'm using:
var newlatlong = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());
map.setCenter(newlatlong);
marker.setPosition(newlatlong);
map.setZoom(10);
Can I hand code the position of the marker in the map other than the center position?
I mean map.setCenter(newlatlong);, Instead of setCenter Is there any other position available? or can I hand code the position in the map where the marker should appear?
Not sure why you are running the code twice...
But yes, you can pass latitude/longitude values directly to the setCenter method
map.setCenter({lat: -34, lng: 151});
Documentation: https://developers.google.com/maps/documentation/javascript/reference#Map
update after comments
If you want to move the map center so that the marker is specific position (in pixels), you can center on the marker and then use the .panBy method to move the map a fixed amount of pixels.
To create a marker:
var marker = new google.maps.Marker({
map : map,
position : newlatlong
})
to update the position of this marker:
marker.setPosition(newlatlong);
to put the center at the east of marker, for example:
map.setCenter(new LatLng(newlatlong.lat,newlatlong.lng + 1.0))
You can set the center of the map and the marker separately using different longitude and latitudes:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.512318, -72.979349);
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(41.513001, -72.983845)
});
};
This makes the marker slightly off center to the left. I used this in a current project of mine.

Marker not displayed on Map until pan or zoom

I have only one marker to be displayed on the map. I got the marker LatLng and added to the map by extending the LatLngBounds for the marker's poistion and fit the bounds to the map.
Here is the snippet I used,
GoogleMap map = GoogleMap.create(divWrapper.getElement(), mapOptions);
LatLngBounds latLngBounds = LatLngBounds.create();
final LatLng latLngInstance = LatLng.create(((ResultModel)resultModel).getLocLat().doubleValue(), ((AssetMapViewerSiteModel)resultModel).getLocLong().doubleValue());
MarkerOptions markerOptions = MarkerOptions.create();
markerOptions.setPosition(latLngInstance);
markerOptions.setTitle(((ResultModel)resultModel).getMarkerName());
Marker marker = Marker.create(markerOptions);
marker.setMap(map);
latLngBounds.extend(marker.getPosition());
map.setCenter(latLngBounds.getCenter());
map.fitBounds(latLngBounds);
After the map is loaded I am not to see the marker which was added until I pan or zoom on the map. The problem is seen in both the browser I tested Chrome and FireFox so looks like a Google Map issue.
Is there a solution or workaround for this issue?
Thanks in advance.

Google Maps Marker off center

I have a google maps with a circle at a specific Lat and Lng. I am also using a Marker that I want displayed in the center of the circle, which should be the Lat and Lng the circle is set to.
Here is a screen shot of what I am talking about:
You can see the "6" and "7" are not in the center of the circle. I am not sure how to fix this?
Here is the Marker code:
var markerIcon = [
"img/marker-icon-1.png",
"img/marker-icon-2.png",
"img/marker-icon-3.png",
"img/marker-icon-4.png",
"img/marker-icon-5.png",
"img/marker-icon-6.png",
"img/marker-icon-7.png",
"img/marker-icon-8.png",
"img/marker-icon-9.png",
"img/marker-icon-10.png"
];
var marker = new google.maps.Marker({
position:new google.maps.LatLng(mapDataTrending[i].lat, mapDataTrending[i].lng),
icon: markerIcon[i],
map: map
});
I am setting the Lat and Lng from a JSON file, but I am using the same Lat and Lng to set the center of my circles.
Do note that when you place an image as a marker, the bottom center of the image goes to the latlng selected. you need to adjust for your image size via the Icon.anchor property (assuming you're talking about google maps Javascript v3 since you're using icon )
https://developers.google.com/maps/documentation/javascript/reference#Icon
Hopefully someone will find this helpful that is looking for a more copy paste answer. ICON_BASE allows you to replicate it across multiple icons of the same size.
const ICON_BASE = {
size: new google.maps.Size(16, 16),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(8, 8)),
};
const ICON_1 = {
...ICON_BASE,
url: "img/marker-icon-1.png",
};

How can I draw marker on google maps in specified boundary?

I want to draw marker on google maps. The marker data is from JSON.(from json file, not from database) and all data have a geometry (latitude, longitude)
An important thing is when I drag google maps, the browser will show some boundary.
And then the markers have to show on only shown maps.
After drag map again, the marker resets and show new marker in new boundary.
google.maps.event.addListener(map, 'dragend', function(event) {
var bd = map.getBounds();
var ne = bd.getNorthEast();
var sw = bd.getSouthWest();
var nw = new google.maps.LatLng(ne.lat(), sw.lng());
var se = new google.maps.LatLng(sw.lat(), ne.lng());
I can not progress any more..
Please give some example url or help..
So you've got the points for the 4 corners of some kind of boundary, and you want to put a marker in there. So you have a bunch of markers, but you only want to plot the ones that fall within the current bounds.
So something like this might work:
var latlng = new google.maps.LatLng(54.42838,-2.9623);
var marker = new google.maps.Marker({
position: latlng,
});
if (bd.contains(latlng)) {
marker.setMap(map);
}
You might want to setMap(null) for any markers that fall outwith the bounds.

Hide a circle along with the binded marker

I'm working with Google Maps v3 and I use the MarkerManager to hide the markers on a certain zoom level. I bind circle objects to these markers. Anyway, they aren't hided when the markers are. How can I bind the circles to hide with the markers?
The binding:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
});
var circle = new google.maps.Circle({
map: map,
radius: 50,
});
circle.bindTo('center', marker, 'position');
Array.push(marker);
Did you solved your problem? If not add this:
circle.bindTo('map', marker);