Develop Reference

Is there a way to add location to the label of a marker that is randomly placed in google maps with javascript?

Is it possible to add the LatLng to the label of the marker that is placed at random to show where that marker is? Also considering the infoWindow option but have not been successful yet.
var map;
var markers = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markersIndex = 0;
function initialize() {
var Wilm = new google.maps.LatLng(34.2257,-77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map-
canvas'),mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
label: markers[markersIndex++ % markers.length],
map: map
});
google.maps.event.addListener(marker, 'rightclick', function(event) {
marker.setMap(null);
});
markers.push(marker);
}
google.maps.event.addDomListener(window, 'load', initialize);

Not sure what you mean by a label.
this will add markers to the map with an info window with the latlng:
function initMap() {
var Wilm = new google.maps.LatLng(34.2257, -77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var contentString = 'Lat' + marker.getPosition().lat() + ', lng: ' + marker.getPosition().lng();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
function initMap() {
var Wilm = new google.maps.LatLng(34.2257, -77.9447);
var mapOptions = {
zoom: 12,
center: Wilm,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var contentString = 'Lat' + marker.getPosition().lat() + ', lng: ' + marker.getPosition().lng();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap">
</script>

adding marker on google map when i click button

i want to add marker on a google map where by my ng-click pass the object which have latitude and longitude so that it will put the marker to the map.....any help plz
example code
HTML
<a class="button icon icon-right ion-location" href="location.html" ng-click="search_item(item)">
call function
$scope.search_item = function (item){
lat = item.lat;
lng = item.lng
}
marker code
var myLatlng = new google.maps.LatLng(lat, long);
var mapOptions = {
zoom: 15,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});

This question seems to have been answered here and an example can be found in googles documentation here
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
}

What is not working is not clear, however...
Assuming have map loaded:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
async></script>
<script>
note async and callback=initMap, put a var map at top to allow easier later use
//add global variable for map
var map;
// Initialize and add the map mon callback when goole.map api loaded
function initMap() {
// The location of Uluru
const uluru = { lat: -25.344, lng: 131.036 };
// Create the map and store in global variable
map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
}
Then when call the function from the button it using the map varable rather than trying to create a new on
function placeMarker(myLatlng){
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!",
});
});
Then your function call code on button click.
$scope.search_item = function (item){
lat = item.lat;
lng = item.lng
latLng = new google.maps.LatLng(lat, lng);
placeMarker(latLng);
}

How to return new markers coordinates changed in separated window?

I have the following link:
choose on map
showMap accepts geocoding coordinates and shows marker at this place.
function showMap(lat,lng) {
window.open('map?lat='+lat+'&lng='+lng, 'map', 'width=600,height=400');
}
on map.jsp i have following js:
function initialize() {
var myLatlng = new google.maps.LatLng("${lat}","${lng}");
var mapOptions = {
zoom: 12,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
marker.setMap(null);
marker = new google.maps.Marker({
position: location,
map: map
});
}
}
I want to achieve that after I have changed marker position on map this change should affect showMap arguments
showMap(changedMarkerLat, changedMarkerLng)

Possible approach: instead of passing lat/lng as parameters to the function(as suggested by #esc), store these data somewhere and access them inside the function.
Example:(stores the lat/lng as attributes of the link)
<a href="#" id="context-map"
data-lat="57.8166994"
data-lng="28.33447339999998"
onclick="showMap(this)">choose on map</a>
function showMap(o) {
//you only need to open a new window when its not open yet
if(!o.map ||o.map.closed){
o.map = window.open('map?lat='+o.getAttribute('data-lat')+
'&lng='+o.getAttribute('data-lng'),
'map',
'width=600,height=400');
}
//otherwise only bring the window into front
else{
o.map.focus();
}
}
Inside the new window set the data-lat and data-lng-attributes of the link
function initialize() {
var myLatlng = new google.maps.LatLng("${lat}","${lng}");
var mapOptions = {
zoom: 12,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
try{//use a try-catch to avoid errors when the opener has been closed
var link=opener.document.getElementById('context-map');
link.setAttribute('data-lat',location.lat());
link.setAttribute('data-lng',location.lng());
}catch(e){}
//there's no need to create a new Marker,
//simply update the position of the existing Marker
marker.setPosition(location);
}
}
Demo: http://www.googledrive.com/host/0BwPgjOA-i5WyQ0VmR3JZTU9BS0U

marker dragend event doesn't work

I have this code:
the code in function() of 'dragend' event doesn't execute and the latFld and llgFld in the document doesn't update
any help ?
var map;
var marker;
function initMap()
{
var latlng = new google.maps.LatLng(-27.780577, -64.279906);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, "click", function(event) {
if (marker) {marker.setMap(null)}
marker = new google.maps.Marker({
position: event.latLng,
map: map,
draggable:true
});
// display the lat/lng in your form's lat/lng fields
document.getElementById("latFld").value = event.latLng.lat();
document.getElementById("lngFld").value = event.latLng.lng();
});
google.maps.event.addListener(marker, 'dragend', function(){
alert(marker.getPosition());
document.getElementById("latFld").value = marker.getPosition().lat();
document.getElementById("lngFld").value = marker.getPosition().lng();
});
}

Error when get lat and lng on click event in google map api?

JavaScript:
var myLatlng = new google.maps.LatLng(10.786599576864381,106.69340372085571);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("gmap"), myOptions);
marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(map, 'click', function() {
var location = map.getCenter();
document.getElementById("lat").innerHTML = location.lat();
document.getElementById("lon").innerHTML = location.lng();
placeMarker(location);
});
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
marker.setPosition(location);
}
HTML:
<center>
<div id="bd">
<div id="gmap"></div>
lat:<span id="lat"></span> lon:<span id="lon"></span><br/>
</div>
</center>
I using map.getCenter to get lat and lng, but result not found, how to fix

The location you are getting is center of the map.
You need to capture the event with the click so you can get the latLng like this:
google.maps.event.addListener(map, 'click', function(event) {
//var location = map.getCenter();
//document.getElementById("lat").innerHTML = location.lat();
//document.getElementById("lon").innerHTML = location.lng();
placeMarker(event.latLng);
})