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.
Related
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();
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.
Google Maps javascript API question - Map object recenters after applying KML layer. How do I prevent this?
I created a simple page with a map. When I apply a simple polygon KML, it recenters and zooms the map. Any ideas?
var myOptions = {
center: new google.maps.LatLng(27, -97),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var buildings = new google.maps.KmlLayer('https://mysite/site/buildings.xml');
buildings.setMap(map);
//i tried this to recenter and zoom, but no dice.
var posn = new google.maps.LatLng(27, -97);
map.setCenter(posn);
map.setZoom(17);
Sounds like you need the preserveViewport option. From the documentation:
By default, the input map is centered and zoomed to the bounding box of the contents of the layer. If this option is set to true, the viewport is left unchanged, unless the map's center and zoom were never set.
Pass it a KMLLayerOptions object through the constructor:
var buildings = new google.maps.KmlLayer('https://mysite/site/buildings.xml',{preserveViewport:true});
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.
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);