Develop Reference

Google Maps Javascript API: infowindow opens at same position, although multiple markers

I set up a map with multiple markers using Google Maps Javascript API. If a marker is clicked, an infowindow opens. However, while the content is correct (different for each marker), the infowindow opens above one and the same marker, no matter which one is clicked.
To fix this, I tried to explicitly set the correct position (long/lat) in the eventlistener function. According to console log output, the values for long and lat are correct. But the infowindows still opens at the wrong, identical position.
Here is the code; placeMarker is called from within a loop through all locations:
var activeInfoWindow;
function placeMarker(map, lat, lng, markerurl, title, contentString) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
icon: markerurl,
map: map,
title: title,
});
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
// close other active infowindows
if (activeInfoWindow) {
activeInfoWindow.set("marker", null);
activeInfoWindow.close();
}
// added to explicitly set new position:
infowindow.setPosition(new google.maps.LatLng(lat, lng));
// check: console log shows on click: lat and long correct (different for each clicked marker)
console.log(lat+' '+lng+' '+title);
infowindow.open(map, marker);
activeInfoWindow = infowindow;
});
}
Any idea what I am missing?
Thanks!

Solved. Simply needed to add "var" before "marker":
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
icon: markerurl,
map: map,
title: title,
});

Off-setting a Google Map Icon using JavaScript API

I have a Google Map on my website and I am also using a Custom marker to mark the location of the business. I want to bring the icon about 100px to the left as it's currently center of the map... How can I do this?
My code:
function initMap() {
var LatLng = {
lat: REMOVED, lng: REMOVED
};
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 15,
center: LatLng
});
var image = 'REMOVED';
var customMarker = new google.maps.Marker({
position: LatLng,
map: map,
icon: image
});
}

You've almost done. The problem is that you are centering the map in the same position than your marker.
So, set another LatLang for your marker or center the map in another position.
var markerLatLang={lat: WHATEVER, lng: WHATEVER}
var customMarker = new google.maps.Marker({
position: markerLatLang,
map: map,
icon: image
});
Checkout this for further information.

google maps marker stop

this is my google maps code
ı want to google maps marker stop
help me please !!!
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// initialize marker
var marker = new google.maps.Marker({
position: map.getCenter(),
draggable: true,
map: map
});
//marker.forEach(function (marker) {
// marker.setMap(null);
//});
//marker = [];
// intercept map and marker movements
window.google.maps.event.addListener(map, "idle", function() {
marker.setPosition(map.getCenter());
var latitude = map.getCenter().lat().toFixed(6);
var longitude = map.getCenter().lng().toFixed(6);
window.google.maps.event.trigger(map, "resize");
getLocationAdressName(latitude, longitude);
marker.dragging.disable();
});

As dev8080 answered, if you want your marker to be not draggable at all then you should go with his answer.
But if you want your marker stop being draggable after some event replace
this:
marker.dragging.disable();
with this:
marker.setDraggable(false);

Initialize the pointer with draggable:false. To set the marker's center, you need not enable it's draggable attribute.
var marker = new google.maps.Marker({
position: map.getCenter(),
draggable: false,
map: map
});

Google maps javascript - Marker array, how do I get the lat/lon?

I have a code that allows the user to place four markers.
Each marker is placed on the map with this code:
var path = poly.getPath();
path.push(event.latLng);
var marker = new google.maps.Marker({
position: event.latLng,
draggable:true,
title: '#' + path.getLength(),
map: map
});
markers.push(marker);
And on the last row the marker is placed in a array.
Now I need to use the lat/lon from two of the markers, how do i access them?
marker.latLng.lat();
Does not work.
Do I need a second array to keep track of the locations?

You have an array of markers which you can use.
e.g. to get the first marker:
var yourMarker = markers[0];
To get its position:
var position = markers[0].getPosition();
If you need to get the individual lat and lng elements of the marker's position, then use position.lat() and position.lng()

You can get the latitude and longitude onclick of the marker.
//Add listener
google.maps.event.addListener(marker, "click", function (event) {
var latitude = this.position.lat();
var longitude = this.position.lng();
alert(this.position);
});
//end addListener

Google Maps: add multiple map markers

My setup currently I have a custom map marker for multiple points on my map, but I want to add different map markers for different markers on the map dependant on their type attribute. My current setup as follows:
HTML
<div class="marker" data-lat="LATITUDE_GOES_HERE" data-lng="LONGITUTE_GOES_HERE" type="library">
jQuery (just the marker function)
function add_marker( $marker, map ) {
// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
// create marker
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon: iconBase + 'schools_maps.png'
});
// add to array
map.markers.push( marker );
// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
}
}
This works great, but how would I had a different marker icon for different markers on the map, dependant on the type attribute they have (if possible)?
Any suggestions would be greatly appreciated!

You mean something like.....
var iconName = "";
var type = $marker.attr("type");
if (type == "library")
iconName = "library.png";
else if (type == "school")
iconName = "school.png";
// ...etc...
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon: iconBase + iconName;
});
Of course, you would have to provide (and probably host) the icons yourself...