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>

Geolocation Change Marker Position

I use geolocation and I can view map my coordinates. Then, marker put the coordinate.
I want to change marker position.
My code here:
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='100%';
var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
This code get my location coordinates. How can i change marker position?

I am sorry Eren about the my previous answer.I misunderstood.I think , this is correct one what you needed.
Display latitude and longitude on marker movement
Refer this site

I found a solution in this page. My problem is solved with this.
refer this
and this site
var map;
var myCenter = new google.maps.LatLng(37, 35);
var markersArray = [];
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
function initialize() {
var mapProp = {
center: myCenter,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
google.maps.event.addListener(map, 'click', function (event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
clearOverlays();
var marker = new google.maps.Marker({
position: location,
map: map,
});
markersArray.push(marker);
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', initialize);

moveBus() is getting called before initialize(). Try putting that line at the end of your initialize() function. Also Lat/Lon 0,0 is off the map (it's coordinates, not pixels), so you can't see it when it moves. Try 54,54. If you want the center of the map to move to the new location, use panTo().
Demo: http: //jsfiddle.net/ThinkingStiff/Rsp22/
HTML:
<script src = "http://maps.googleapis.com/maps/api/js?sensor=false" > </script> <div id = "map-canvas"> </div>
CSS:
#map-canvas {
height: 400 px;
width: 500 px;
}
Script:
function initialize() {
var myLatLng = new google.maps.LatLng(50, 50),
myOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
marker.setMap(map);
moveBus(map, marker);
}
function moveBus(map, marker) {
marker.setPosition(new google.maps.LatLng(0, 0));
map.panTo(new google.maps.LatLng(0, 0));
};
initialize();

google map api V3 markers

I am having a problem with google maps, I cant put markers on some location. My idea was to find my location and to put marker on it, then to put markers on other locations but the markers on other locations are not showing on a map.
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '550px';
mapcanvas.style.width = '960px';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Vasa lokacija"
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
var locations = [
['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4],
['Tuzla', 44.532841000000000000, 18.670499999999947000, 5],
['Zenica', 44.203439200000000000, 17.907743200000027000, 3],
['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2],
['Mostar', 43.333333300000000000, 17.799999999999954000, 1]
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}

The main problem with your function is that your marker adding loop is outside success function, so it never gets called. You also had an extra }at the end of your code. Here is a full solution jsfiddle
var map;
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '550px';
mapcanvas.style.width = '960px';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Vasa lokacija"
});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
var locations = [
['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4],
['Tuzla', 44.532841000000000000, 18.670499999999947000, 5],
['Zenica', 44.203439200000000000, 17.907743200000027000, 3],
['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2],
['Mostar', 43.333333300000000000, 17.799999999999954000, 1]
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
} //success fn ENDS
var position = {
coords: {
latitude: 44.766666699999990000,
longitude: 17.183333299999960000
}
};
success(position);

the main problem with your code is you are plotting the marker before the map is loaded because it is out side of your function success.try this:I have use static value for center you can change it as per your code.
$(document).ready(function () {
success(position);
});
var position = { // suppose this is your position
coords: {
latitude: 44.666666699999990000,
longitude: 17.183333299999960000
}
};
var map;
var marker, i;
var locations = [
['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4],
['Tuzla', 44.532841000000000000, 18.670499999999947000, 5],
['Zenica', 44.203439200000000000, 17.907743200000027000, 3],
['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2],
['Mostar', 43.333333300000000000, 17.799999999999954000, 1]
];
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '550px';
mapcanvas.style.width = '960px';
document.getElementById('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 8,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapcontainer"), options);
marker = new google.maps.Marker({
position: coords,
map: map,
title: "Vasa lokacija"
});
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', function (marker, i) {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
});
}
}

Saving a marker on Google Maps API on restart/refresh, after it's been dragged by user

below is my code, where I've created a geolocation marker and a marker which the user can drag around the map.
I'm wondering what I need to do in order to keep the location of the dragged marker, if the user refreshes. Below is my code:
function initialize() {
var locations = [
['Your Hostel Is Here', 54.911615,-1.377025,],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(54.911615,-1.377025),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
draggable: true
});
localStorage.setItem('marker', marker);
var retrievedmarker = localStorage.getItem('marker');
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
// Check if user support geo-location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var geolocpoint = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 8,
center: geolocpoint,
mapTypeId: google.maps.MapTypeId.HYBRID
}
// Place a marker
var geolocation = new google.maps.Marker({
position: geolocpoint,
map: map,
title: 'Your geolocation',
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
});
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);

You need to store the lat long value of a marker object in string, rather than the object. Furthermore, your need to listen to the marker mouseup event to store the marker value for later display.
Add this event:
//Record the new marker position
google.maps.event.addListener(marker, 'mouseup', function() {
localStorage.setItem('marker', marker.position.lat() + "," + marker.position.lng());
var retrievedmarker = localStorage.getItem('marker');
});
Edit the following code section:
//Get the last recorded marker position for display
var retrievedmarker = localStorage.getItem('marker');
mylatlng = retrievedmarker.split(",");
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
//position: new google.maps.LatLng(locations[i][1], locations[i][2]),
position: new google.maps.LatLng(mylatlng[0], mylatlng[1]),
map: map,
draggable: true
});
Note: I didn't check for the localStorage key existence, please make sure you check for it before the value retrieval.

google maps and geolocation with markers javascript

i want to make a google maps that shows the current location of the user and it should also be possible that the user can click on the map to add markers. i can do them separately but it fails when i try to combine them.
this is my code for the geolocation
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '500px';
mapcanvas.style.width = '600px';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title:"You are here!"
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
and this is my code to add markers to the map.
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), 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
});
map.setCenter(location);
}

check out the folllowing link..the example in it will help you surely.worked for me too.
http://www.codeproject.com/Articles/291499/Google-Maps-API-V3-for-ASP-NET