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>

Map marker are not in the map on IE

This is my code..
var styles = [
{
"featureType": "landscape",
"stylers": [
{"weight": 0.1},
{"color": "#E7EDEF"}
]
},
...
{
"featureType": "poi.park",
"elementType": "labels",
"stylers": [
{"visibility": "on"}
]
}
];
var map;
function initialize() {
var centerM = new google.maps.LatLng(42.641185, 14.015790);
var iconBase = window.location.origin + Drupal.settings.basePath + 'sites/default/themes/actomedia/img/';
var mapOptions = {
zoom: 15,
center: centerM,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styles,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Map Marker & infoBox
markerOpt = {
map: map,
icon: iconBase + 'puntoEnergy_map_ico.png',
title: 'Punto Energy',
animation: google.maps.Animation.DROP
};
markerPicasso = new google.maps.Marker($.extend({position: centerM}, markerOpt));
}
google.maps.event.addDomListener(window, 'load', initialize);
And the map works fine in Chrome and Firefox but in IE the marker is not showed.
Someone know how to fix that?
I tryed to remove the marker animation, check all the commas in the code but it still don't work T_T
--- UPDATE! ---
Following Anto Jurković question I tryed to print the icon URL and I find there is a bug in the window.location.origin who return undefined to me.
I fixed it putting this code on the top of the js file (surce)1
if (!window.location.origin) {
window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}

I am Creting Marker Using below function :
createMarker(Map, legs[i].start_location, legs[i].start_address, markerletter);
function createMarker(map, latlng, html, color) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
shadow: iconShadow,
icon: getMarkerImage(color),
shape: iconShape,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
//marker.myname = label;
google.maps.event.addListener(marker, 'click', function () {
//Set Infowindow Logic
});
return marker;
}
Javascript
function initialize() {
var Lattts = document.getElementById('lat').value;
var Longgs = document.getElementById('long').value;
var myLatlng = new google.maps.LatLng(parseFloat(Lattts), parseFloat(Longgs));
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: myLatlng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
var icon = {
url: 'https://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png'
};
var contentString = 'Contents';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: icon,
zIndex: Math.round(myLatlng.lat() * -100000) << 5,
animation: google.maps.Animation.DROP
});
//marker.setAnimation(google.maps.Animation.BOUNCE);
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
});
setTimeout(function () { marker.setAnimation(google.maps.Animation.BOUNCE); }, 2000);
}
google.maps.event.addDomListener(window, 'load', initialize);

Info windows code

I have a problem. I can't put each marker with info windows, neither the description
example:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
var map
function initialize() {
var centerLatlng = new google.maps.LatLng(38.697476,-9.207047);
var myOptions = {
zoom: 12,
center: centerLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var placescoordjs = {{=XML(response.json(placescoord))}}
var marker, i;
for (i = 0; i < placescoordjs.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(placescoordjs[i][0],placescoordjs[i][1]),
map: map
});
}
}
function mymarker() {
var myLatlng = new google.maps.LatLng({{=coordenadas[0]}},{{=coordenadas[1]}});
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"My Marker!!"
});
map.setCenter(myLatlng);
marker.setMap(map);
}
var infowindow = new google.maps.InfoWindow({
content: "<html>https://pt.wikipedia.org/wiki/Lisboa</html>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
I have this code. I have a database that "puts" the markers in the map but how i can add each marker the description and a info windows?

You have to create the infoWindow, and bind it to the marker using google.maps.event.addListener...
it's all in the doc you've posted:
var infowindow = new google.maps.InfoWindow({
content: "<html>your html</html>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
try to update your initialize method to something like this:
function initialize() {
var centerLatlng = new google.maps.LatLng(38.697476,-9.207047);
var myOptions = {
zoom: 12,
center: centerLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var placescoordjs = {{=XML(response.json(placescoord))}}
var marker, i;
for (i = 0; i < placescoordjs.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(placescoordjs[i][0],placescoordjs[i][1]),
map: map
});
/* Creates the infowindow */
infowindow = new google.maps.InfoWindow({
content: "<html>your html</html>"
});
/* Bind the infowindow to the marker */
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
}

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

Google Maps v3 Terrain View By Default

I'm trying to make my google maps embed default to terrain view. Attached is my code that loads everything correctly except the map options where I set the default view to terrain. I have it set up to only limit the choices to only terrain but when you initially load the page it is on the default hybrid view.
var map, marker, latLngToPixel;
var middle_earth_MORADOR = new google.maps.LatLng(38, 0);
function initialize() {
var mapOptions = {
zoom: 2,
center: middle_earth_MORADOR,
backgroundColor: "#000",
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.TERRAIN]
},
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var locations = [
// PHP LOOP FOR FEATURED PROJECTS
];
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var styledMapOptions = {
map: map,
name: "map"
}
var build = new google.maps.StyledMapType(styledMapOptions);
map.mapTypes.set('map', build);
map.setMapTypeId('map');
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]),
icon: 'http://staging.******.com/css/images/pin.png',
map: map,
});
marker.setAnimation(google.maps.Animation.DROP);
setTimeout(function(){ marker.setAnimation(null); }, 1750);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
window.location = "http://staging.******.com/projects/" + locations[i][4];
}
})(marker, i));
}
}

I think you can disable the default UI of map by setting the property disableDefaultUI to true, and then set in the options the TERRAIN as the mapTypeId as how I did it below:
function loadMap() {
var myLatlng = new google.maps.LatLng(lat,lan);
var myOptions = {
zoom: 3,
center: myLatlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
//code
}

const map = new window.google.maps.Map(document.getElementById('Map'), {
mapTypeId: 'terrain'
});