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.
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 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",
};
Not sure if this is possible but I have set my map up with custom styles and marker and I want to ensure the map shows at this level but with London in view. To do so I centred the map at a different location to my marker. I would like the map to zoom to my location if possible instead of the centre.
var myLatlng = new google.maps.LatLng('51.4525368','0.2481994');
var mapOptions = {
center: new google.maps.LatLng('51.4600368','0.0781994'),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 11,
mapTypeControl: false,
scrollwheel:false
};
Also if anybody can tell me why my info window is displaying all funky I would appreciate too.
It has been tough to understand your question but if I got you right, you are trying to fit both center of London and your location on the map without setting a center on some position on the map. If that's correct, then you need google.maps.LatLngBounds() to get it done.
var bounds= new google.maps.LatLngBounds();
var London= new google.maps.LatLng(//London values);
var myLatLng = new google.maps.LatLng(//your values);
bounds.extend(London);
bounds.extend(myLatLng);
map.fitBounds(bounds);
Check if this serves your purpose.
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 have an overlay that is dynamically generated from user data, so I need to know how to find the center of that overlay.
Currently, I am just using the first coordinates from the overlay, but that really does not represent the center of the overlay. Therefore when I load the map, it is not centered on the overlay.
Does anyone have a good method for centering the map on the overlay, by calculating the center, not hard coding it?
var latlng = new google.maps.LatLng(38.269239, -122.276010);
var myOptions = {
zoom: 15,//Calculate this somehow?
center: latlng,// Calculate value from array of coordinates?
mapTypeId: google.maps.MapTypeId.HYBRID
};
If you have a list of coordinates, you can loop over them and add them to a LatLngBounds object. Here is a example for the V3 API, but the concept in V2 is similar:
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < coordinates.length; i++) {
bounds.extend(coordinates[i]);
}
After that, you can get the center with:
bounds.getCenter();
Or alternatively, you can call map.fitBounds() directly, which will center the map around the center of the bounds and adjust the zoom, so that the whole bounds will fit exactly into the view port.
map.fitBounds(bounds);
Based on #tux21b,
var bounds = new google.maps.LatLngBounds();
polyline.getPath().forEach(function(e){//can't do polyline.getPath()[i] because it's a MVCArray
bounds.extend(e);
})
_map.fitBounds(bounds);