We Keep Coding

How to add multiple markers in Gmap3?

I am trying to add multiple marker in gmap3. but it can't work.
If anybody any idea how to add multiple location in gmap3 API.
var contactmap = {
lat: 24.091328,
lng: 38.037067
};
$('#tm-map')
.gmap3({
zoom: 13,
center: contactmap,
scrollwheel: false,
mapTypeId: "shadeOfGrey",
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, "shadeOfGrey"]
}
})
.marker({
position: contactmap,
icon: 'assets/img/map-marker.gif'
})
This code is view only one marker. So how can I add multiple marker in Map?.

So finally I found the Right solution with myself so thanks to support me.
var locations = [
['Yanbu Saudi Arabia', 24.091328, 38.037067, 1],
['Yanbu Saudi Arabia', 24.005421, 38.197395, 2]
];
var map = new google.maps.Map(document.getElementById('tm-map'), {
zoom: 10,
center: new google.maps.LatLng(24.005421, 38.197395),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var 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
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
console.log(markers[0]);

create an array of markers and then push each new marker object into that array and finally pass array into your marker()
follow this github response https://github.com/jbdemonte/gmap3/issues/123
for any future problems refer to their github page.
// this is how you create array
var multiadress = [{latLng:[1,2],content:"abcd"},{latLng:[3,4],content:"pqr"},{latLng:[6,7],content:"kbc"}]
var markers = [];
$.each(multiadress, function(key, val){
var latLng = val.latLng
markers.push({
position: latLng,
content: val.content
});
});
var contactmap = {
lat: 24.091328,
lng: 38.037067
};
$('#tm-map')
.gmap3({
zoom: 13,
center: contactmap,
scrollwheel: false,
mapTypeId: "shadeOfGrey",
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, "shadeOfGrey"]
}
})
.marker(markers)
accept answer if it helps you.

You can pass a markerList:
var markers = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 }
];
function markerSetup(markers){
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var icon = {
url: "../Content/Images/Car.png", // url
scaledSize: new google.maps.Size(50, 60), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
// alert(markers[0].lat)
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
// map.setMap(trafficLayer);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
icon: icon,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
map.setZoom(12)
});
}
It's workable code. Hope it's help you.

I do it like this:
$('#tm-map')
.gmap3({
zoom: 13,
center: contactmap,
scrollwheel: false,
mapTypeId: "shadeOfGrey",
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, "shadeOfGrey"]
}
})
.marker(
{position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'},
{position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'},
{position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'},
{position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'}
)

google maps initialize can't see map variable when adding marker

I have the following initialization for a google map:
function initialize()
{
var mapOptions = {
zoom: 15,
center: myLatLng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
scaleControl: true,
scrollwheel: true,
disableDoubleClickZoom: true,
};
var map = new google.maps.Map(document.getElementById("googleMap"),
mapOptions);
}
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
google.maps.event.addDomListener(window, "load", initialize);
};
When trying to add the marker, I get the error:
Uncaught ReferenceError: map is not defined
How can I see this map or add a marker properly to the map?

seems you don't have a proper myLatLng position for your marker try adding one eg: myLatLng = new google.maps.LatLng(45.00, 10.00);
function initialize()
{
var mapOptions = {
zoom: 15,
center: myLatLng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
scaleControl: true,
scrollwheel: true,
disableDoubleClickZoom: true,
};
var map = new google.maps.Map(document.getElementById("googleMap"),
mapOptions);
}
var myLatLng = new google.maps.LatLng(45.00, 10.00);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
google.maps.event.addDomListener(window, "load", initialize);
};

Google Maps Markers Wont Show Up

<script type="text/javascript">
function initMap() {
// Map
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.000000,-40.000000),
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false,
scrollwheel: false,
disableDefaultUI: true,
disableDoubleClickZoom: true
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Markers
var madrid = new google.maps.Marker({
position: google.maps.LatLng(40.412154, -3.704301),
map: map,
title: 'Madrid'
});
madrid.setMap(map);
}
</script>
I am trying to put some markers on the map of certain cities. I can not seem to make the makers apear. I have looked through several forums, and tried everything.
I hope this is enough information. I am still very new to stack overflow, so If I did this wrong, please let me know how to post a question more clearly.
Thank you,

You are missing the new keyword for position parameter while creating marker, please check the below code, it should work.
function initMap() {
// Map
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.000000, -40.000000),
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false,
scrollwheel: false,
disableDefaultUI: true,
disableDoubleClickZoom: true
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Markers
var madrid = new google.maps.Marker({
position: new google.maps.LatLng(40.412154, -3.704301),
map: map,
title: 'Madrid'
});
madrid.setMap(map);
}

Multiple Markers on Google Maps?

I am trying achieve multiple markers on a Google map to mark access points for a river. So far I have one marker (myLatlng) that displays and anotehr that shows after a button is clicked, however when I have tried adding more than one (accessPoint1), it will not appear. Does anyone know how to fix this? Thanks in advance.
function initialize() {
var myLatlng=new google.maps.LatLng(51.843143, -2.643555),
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: myLatlng}),
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"We are here!"
});
var accessPoint1 = new google.maps.LatLng(51.840913, -2.638603),
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: accessPoint1}),
marker = new google.maps.Marker({
position: accessPoint1,
map: map,
title:"Access Point 1"
});
map.controls[google.maps.ControlPosition.TOP_CENTER].push($("#findButton")[0]);
function successCallback(position) {
var latlng = new google.maps.LatLng( position.coords.latitude,
position.coords.longitude),
myOptions = {
zoom: 3,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
},
bounds=new google.maps.LatLngBounds(latlng);
bounds.extend(marker.getPosition());
map.setOptions(myOptions);
map.fitBounds(bounds);
new google.maps.Marker({
position: latlng,
map: map,
title:"You are here!",
icon:'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png'
});
}
function errorCallback() {
alert("I'm afraid your browser does not support geolocation.");
}
function findMe(){
$(this).hide();
if (navigator.geolocation){
navigator.geolocation
.getCurrentPosition(successCallback,errorCallback,{timeout:10000});
}
else{
alert("I'm afraid your browser does not support geolocation.");
}
}
$("#findButton").click(findMe);
}
google.maps.event.addDomListener(window,'load',initialize);

You are recreating the map for the second access point, which means you have two maps, each having one marker on it, the first of which is overwritten and not visible. You are also overwriting the marker variable (which shouldn't cause an issue):
Unless you have multiple <div>'s with maps in them, only create one map.
function initialize() {
var myLatlng = new google.maps.LatLng(51.843143, -2.643555),
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: myLatlng
}),
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "We are here!"
});
var accessPoint1 = new google.maps.LatLng(51.840913, -2.638603),
marker1 = new google.maps.Marker({
position: accessPoint1,
map: map,
title: "Access Point 1"
});
map.controls[google.maps.ControlPosition.TOP_CENTER].push($("#findButton")[0]);
function successCallback(position) {
var latlng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude),
myOptions = {
zoom: 3,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
},
bounds = new google.maps.LatLngBounds(latlng);
bounds.extend(marker.getPosition());
map.setOptions(myOptions);
map.fitBounds(bounds);
new google.maps.Marker({
position: latlng,
map: map,
title: "You are here!",
icon: 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png'
});
}
function errorCallback() {
alert("I'm afraid your browser does not support geolocation.");
}
function findMe() {
$(this).hide();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {
timeout: 10000
});
} else {
alert("I'm afraid your browser does not support geolocation.");
}
}
$("#findButton").click(findMe);
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="http://maps.google.com/maps/api/js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>

How can I prevent google maps from refreshing while setting the marker to a new position?

I'm updating the marker on my google map with new positions constantly from the server. The positions are stored in the variables called Longitude and Latitude. I managed to get the markers moving to the new positions but the map constantly refreshes. What can I do to stop this from happening? I only want the markers to move.
google.maps.visualRefresh = true;
//in my actual code the coordinates aren't var lat and lon
var myLatlng = new google.maps.LatLng(lat,lon);
var mapOptions = {
zoom: 15,
center: myLatlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.trigger(map, 'resize');
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
var latlng = new google.maps.LatLng(Latitude,Longitude);
marker.setPosition(latlng);
//map.setCenter(latlng);
//covertlisten.remove();
});
}
google.maps.event.addDomListener(window, 'load', initialize);

Get rid of
map.setCenter(latlng);