Develop Reference

How to add markers in Google maps? [duplicate]

This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed 5 years ago.
Please help me How can I add multiple markers in this code? I searched a lot but I don't know how to add markers in this code? I am new in Google maps API. and sorry if I made any grammatical or spelling mistake in this question.
JS Code:
function initialize() {
var mapCenter = new google.maps.LatLng(52.5167, 13.3833);
$('#user_latitude').val(52.5167);
$('#user_longitude').val(13.3833);
var mapOptions = {
zoom: 3,
center: mapCenter,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
minZoom: 3,
scrollwheel: false
};
var infowindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

You can define an array inside your initialize function with all your marker:
var locations = [
['Marker 1', 41.0, 12.4],
['Marker 2', 47.0, 15.4],
...
];
First value can be the title, second the latitude and third longitude
Then you can create a loop to add markers
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
});
Example:
function initialize() {
var locations = [
['Marker 1', 41.0, 12.4],
['Marker 2', 47.0, 15.4],
];
var mapCenter = new google.maps.LatLng(52.5167, 13.3833);
$('#user_latitude').val(52.5167);
$('#user_longitude').val(13.3833);
var mapOptions = {
zoom: 3,
center: mapCenter,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
minZoom: 3,
scrollwheel: false
};
var infowindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
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
});
}
}
references: Simple markers | Google maps api, Adding multiple markers to Google Map

I want to display two map on same page. But map-canvas is displaying and map-canvas-2 is not displaying

I want to display two map ion same page. The problem is "map-canvas" is displaying properly but map-canvas-2 is not displaying at all. What should I do now Please Help...
Here is my HTML code...
<div class="google-map wow fadeInDown col-sm-6" data-wow-duration="500ms">
<div id="map-canvas"></div>
</div>
<div class="google-map wow fadeInDown col-sm-6" data-wow-duration="500ms">
<div id="map-canvas-2"></div>
</div>
Here is my JAVASCRIPT code
function initialize() {
var myLatLng = new google.maps.LatLng(19.0285, 73.0586);
var myLatLng2 = new google.maps.LatLng(23.344101, 85.309563);
var mapOptions = {
zoom: 14,
center: myLatLng,
disableDefaultUI: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeControlOptions: {
mapTypeIds: google.maps.MapTypeId.ROADMAP
}
};
var mapOptions2 = {
zoom: 14,
center: myLatLng2,
disableDefaultUI: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeControlOptions: {
mapTypeIds: google.maps.MapTypeId.ROADMAP
}
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var map2 = new google.maps.Map(document.getElementById('map-canvas-2'), mapOptions2);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'img/location-icon.png',
title: 'Kharghar',
});
var marker2 = new google.maps.Marker({
position: myLatLng2,
map: map2,
icon: 'img/location-icon.png',
title: 'Ranchi',
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var map2 = new google.maps.Map(document.getElementById('map-canvas-2'), mapOptions2);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'img/location-icon.png',
title: 'Kharghar',
});
var marker2 = new google.maps.Marker({
position: myLatLng2,
map: map2,
icon: 'img/location-icon.png',
title: 'Ranchi',
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map2, marker2);
});
var styledMapOptions = {
name: 'US Road Atlas'
};
var usRoadMapType = new google.maps.StyledMapType(
roadAtlasStyles, styledMapOptions);
map.mapTypes.set('roadatlas', usRoadMapType);
map.setMapTypeId('roadatlas');
}
google.maps.event.addDomListener(window, "load", initialize);
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map2, marker2);
});
var styledMapOptions = {
name: 'US Road Atlas'
};
var usRoadMapType = new google.maps.StyledMapType(
roadAtlasStyles, styledMapOptions);
map.mapTypes.set('roadatlas', usRoadMapType);
map.setMapTypeId('roadatlas');
}
google.maps.event.addDomListener(window, "load", initialize);
});
Thanks in advance:-)

Place Google Map Marker icon using javascript taking images from Image asset in iOS

Hi I am trying to set marker icon in Google Map using javascript. My image is in Images.xcassets. Right now I am doing this to set icon. But its not working for me. What I am doing is this:
setMarkerWithIcon('/Images/MapScreen/MapviewIcon/MapviewIcon');
function initialize(latitude, longitude, maxzoom) {
var styles = [{
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}];
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var mapOptions = {
zoom: initialZoomLevel,
center: new google.maps.LatLng(latitude + LatLngDeltas[ randomIntFromInterval(0, LatLngDeltas.length) ],
longitude + LatLngDeltas[ randomIntFromInterval(0, LatLngDeltas.length) ] ),
disableDefaultUI: true,
disableDoubleClickZoom: false,
minZoom: initialZoomLevel,
maxZoom: maxzoom,
scrollwheel: false,
scaleControl: false,
rotateControl:true,
rotateControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
mapTypeControl: false,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
google.maps.event.addListener(map, 'click', function(event) {
addMarker(map, event.latLng);
});
}
function addMarker(mapObject, location) {
deleteMarkers();
var marker = new google.maps.Marker({
position: location,
draggable:true,
animation: google.maps.Animation.DROP,
map: mapObject,
icon:markerPath
});
setTimeout(function() {infowindow.open(mapObject,marker);}, 500);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(mapObject,marker);
});
markers.push(marker);
}
function setMarkerWithIcon(myIcon) {
markerPath = myIcon;
}
Any help is highly appreciated.

Markers are not visible in google map

I'm trying to display google map with markers and circles. The map and the circle is displaying correctly but the marker are not visible on the map.
Please suggest what changes i should make in my code.
<div id="mapview" style="width: 100%; height: 700px;">
</div>
<script>
var map;
var info_window;
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(51.561918, -0.31237799999996696),
mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false
};
map = new google.maps.Map(document.getElementById('mapview'), mapOptions);
var image = '../Image/salemarker.png';
var user = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(51.561918, -0.31237799999996696),
animation: google.maps.Animation.DROP, icon: image
});
var circle = new google.maps.Circle({
map: map,
radius: 1609.344, // 10 miles in metres
strokeColor: '#08355A;',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#fffff',
fillOpacity: 0.2,
});
info_window = new google.maps.InfoWindow({
content: 'loading'
});
user.setMap(null);
function addMarkersc() {
createLocationOnMap('4 bed semi detached For sale', new google.maps.LatLng(51.5661728, 51.5661728), '<p>48, The fairway, wembley, HA..</p>');
}
addMarkersc();
circle.bindTo('center', user, 'position');
map.fitBounds(circle.getBounds());
}
google.maps.event.addDomListener(window, 'load', initialize);
var image1 = '../Image/salemarker.png';
function createLocationOnMap(titulo, posicao, conteudo) {
var m = new google.maps.Marker({
map: map,
title: titulo,
icon: image1,
position: posicao,
html: conteudo
});
google.maps.event.addListener(m, 'mouseover', function () {
info_window.setContent(this.html);
info_window.open(map, this);
});
}
</script>

Your marker is out of view. It is at 51.5661728,51.5661728:
createLocationOnMap('4 bed semi detached For sale', new google.maps.LatLng(51.5661728,51.5661728), '<p>48, The fairway, wembley, HA..</p>');}
Your map is centered at 51.561918,-0.31237799999996696
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(51.561918,-0.31237799999996696),
mapTypeId: google.maps.MapTypeId.ROADMAP,scrollwheel: false
};
working fiddle

You can try this
function InitializeMap1() {
geocoderMap = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(48.856614, 2.352222);
var myOptions =
{
zoom: 12,
minZoom: 12, // panControl: false, zoomControl: false, scaleControl: false, streetViewControl: true, //
center: latlng,
streetViewControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var arrayMain = [];
var markerLatLng = new google.maps.LatLng(48.856614, 2.352222);
var marker = new google.maps.Marker({
map: map,
position: markerLatLng,
center: markerLatLng
});
arrayMain.push(marker);
}

Try like this:
<div id="mapview" style="width: 100%; height: 700px">
<script>
var map;
var info_window;
function addMarkersc() {
var titulo = '4 bed semi detached For sale';
var posicao = new google.maps.LatLng(51.5661728,51.5661728);
var conteudo = '<p>48, The fairway, wembley, HA..</p>';
var image = '../Image/salemarker.png';
var m = new google.maps.Marker({
map: map,
title: titulo,
icon: image,
position: posicao,
html: conteudo
});
google.maps.event.addListener(m, 'mouseover', function () {
info_window.setContent(this.html);
info_window.open(map, this);
});
}
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(51.561918,-0.31237799999996696),
mapTypeId: google.maps.MapTypeId.ROADMAP,scrollwheel: false
};
map = new google.maps.Map(document.getElementById('mapview'),mapOptions);
var image = '../Image/salemarker.png';
var user = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(51.561918,-0.31237799999996696),
animation: google.maps.Animation.DROP,
icon: image
});
var circle = new google.maps.Circle({
map: map,
radius: 1609.344, // 10 miles in metres
strokeColor: '#08355A;',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#fffff',
fillOpacity: 0.2,
});
info_window = new google.maps.InfoWindow({
content: 'loading'
});
user.setMap(null);
circle.bindTo('center', user, 'position');
map.fitBounds(circle.getBounds());
addMarkersc();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Google maps marker doesn't show up javascript

I am struggling with the marker on a custom map. The map centers on the right place, but the marker doesn't show up on that place. Someone has the same problem already solved?
Thank you a lot for your help!
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
scrollwheel: false,
zoom: 16,
center: new google.maps.LatLng(51.840164,4.33244),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
}
}
var map = new google.maps.Map(map_canvas, map_options)
}
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: 'locationpointer.png',
map: map_canvas
});
}
var features = [
{
position: new google.maps.LatLng(51.840164,4.33244),
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
google.maps.event.addDomListener(window, 'load', initialize);

You need to call your addMarker function in the initialize function so the markers are added after the map is initialized, not before. You have 2 options for initializing the map property of the marker either 1. make it global or 2. pass it in to the addMarker function (as below). Also note that map_canvas is a HTML DOM element, not a google.maps.Map, the name of that variable is "map".
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
scrollwheel: false,
zoom: 16,
center: new google.maps.LatLng(51.840164,4.33244),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
}
}
var map = new google.maps.Map(map_canvas, map_options)
var features = [
{
position: new google.maps.LatLng(51.840164,4.33244),
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature, map);
}
}
function addMarker(feature, map) {
var marker = new google.maps.Marker({
position: feature.position,
icon: 'locationpointer.png',
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);

You are missing to add the marker to the map.
Either use marker.setMap(map) or pass it via marker properties as you try to do.
But in your code the map and map_canvas variables are not in the global scope, this means your addMarker function cannot add it and map: map_canvas is null
var marker = new google.maps.Marker({
position: feature.position,
icon: 'locationpointer.png',
**map: map_canvas**
});
You would have to slightly change your code to pass the map into the addMarker function.