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'}
)

How to add markers on top of a polygon using Google Maps Javascript API?

I'm using the Google Maps Javascript API, and I've defined a polygon and attached it to a map:
const region = new google.maps.Polygon({
map: map,
paths: [
{ lat: 40.5577151228437, lng: -74.15980859374997 },
{ lat: 40.599436503265856, lng: -74.27516503906247 },
{ lat: 40.67030312529891, lng: -74.25319238281247 },
{ lat: 40.72548139969253, lng: -74.26079167357881 },
],
});
I have a click handler that adds a marker on it when the user clicks:
google.maps.event.addListener(map, 'click', function (e) {
const marker = new google.maps.Marker({
map: map,
position: e.latLng,
});
});
I see the marker when I click on areas outside of the polygon, but I don't see the marker when I click inside the polygon.
I've tried hard-coding a zIndex on each, but no luck. Any ideas?

Two options:
add a click listener to the polygon
google.maps.event.addListener(region, 'click', function (e) {
const marker = new google.maps.Marker({
map: map,
position: e.latLng,
});
});
proof of concept fiddle
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
const region = new google.maps.Polygon({
map: map,
paths: [
{ lat: 40.5577151228437, lng: -74.15980859374997 },
{ lat: 40.599436503265856, lng: -74.27516503906247 },
{ lat: 40.67030312529891, lng: -74.25319238281247 },
{ lat: 40.72548139969253, lng: -74.26079167357881 },
],
});
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < region.getPath().getLength(); i++) {
bounds.extend(region.getPath().getAt(i));
}
map.fitBounds(bounds);
function addMarker(e) {
const marker = new google.maps.Marker({
map: map,
position: e.latLng,
});
}
google.maps.event.addListener(map, 'click', addMarker);
google.maps.event.addListener(region, 'click', addMarker);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
make the polygon not capture clicks (clickable: false);
const region = new google.maps.Polygon({
map: map,
clickable: false,
paths: [
{ lat: 40.5577151228437, long: -74.15980859374997 },
{ lat: 40.599436503265856, long: -74.27516503906247 },
{ lat: 40.67030312529891, long: -74.25319238281247 },
{ lat: 40.72548139969253, long: -74.26079167357881 },
],
}
proof of concept fiddle
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
const region = new google.maps.Polygon({
map: map,
clickable: false,
paths: [
{ lat: 40.5577151228437, lng: -74.15980859374997 },
{ lat: 40.599436503265856, lng: -74.27516503906247 },
{ lat: 40.67030312529891, lng: -74.25319238281247 },
{ lat: 40.72548139969253, lng: -74.26079167357881 },
],
});
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < region.getPath().getLength(); i++) {
bounds.extend(region.getPath().getAt(i));
}
map.fitBounds(bounds);
google.maps.event.addListener(map, 'click', function(e) {
const marker = new google.maps.Marker({
map: map,
position: e.latLng,
});
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

How to display a Google map with Knockout js and html

I am new to js and know very little about Knockout. I have tried some tutorials but it still makes no sense. Anyway, I want to know how I would get the same results as the HTML below using Knockout.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 100%;
height: 800px;
}
</style>
</head>
<body>
<h3>Map</h3>
<div id="map"></div>
<script type='text/javascript' src='knockout-3.3.0.js'></script>
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 39.962386, lng: -82.999563},
zoom: 14
});
var marker1 = new google.maps.Marker({
position: {lat: 39.969819, lng: -83.01012},
animation: google.maps.Animation.BOUNCE,
map: map,
title: 'EXPRESS LIVE!'
});
var marker2 = new google.maps.Marker({
position: {lat: 39.969424, lng: -83.005915},
animation: google.maps.Animation.BOUNCE,
map: map,
title: 'Nationwide Arena'
});
var marker3 = new google.maps.Marker({
position: {lat: 39.964425, lng: -82.987804},
animation: google.maps.Animation.BOUNCE,
map: map,
title: 'Columbus Museum of Art'
});
var marker4 = new google.maps.Marker({
position: {lat: 39.959688, lng: -83.007202},
animation: google.maps.Animation.BOUNCE,
map: map,
title: 'COSI'
});
var marker5 = new google.maps.Marker({
position: {lat: 39.969161, lng: -82.987289},
animation: google.maps.Animation.BOUNCE,
map: map,
title: 'Columbus State College'
});
var marker6 = new google.maps.Marker({
position: {lat: 39.946266, lng: -82.991023},
animation: google.maps.Animation.BOUNCE,
map: map,
title: "Schmidt's Sausage Haus und Restaurant"
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAzDEepTI6qMIoZ3OGMe03ZWpmrIakZCwc&callback=initMap">
</script>
</body>
</html>
I have looked at multiple posts on this site on the topic but I cannot get any of the answers to work for me.

I would make a binding handler that did all the referencing to the external library and template manipulation.
/**
* Decorates a div with a map and adds marker points
*/
ko.bindingHandlers.googleMap = {
init(mapDiv, valueAccessor) {
let bindingData = ko.unwrap(valueAccessor()) || {},
map = new google.maps.Map(mapDiv, {
center: {
lat: bindingData.centerX,
lng: bindingData.centerY
},
zoom: bindingData.zoom
}),
markers = _.map(bindingData.markers,function (data) {
return new google.maps.Marker(data);
});
// do some more stuff or hook into markers
// you might want to subscribe to the markers collection
// if you make it an observable array
}
};
Referencing it in the template would be something like:
<html>
<body>
<div class='map-div' data-bind="googleMap:googleMapData"></div>
</body>
</html>
Then in the viewModel specify something like:
var ViewModel = function() {
this.googleMapData = ko.observable({
centerX: 39.962386,
centerY: -82.999563,
zoom: 14,
markers: [{
position: {lat: 39.964425, lng: -82.987804},
animation: google.maps.Animation.BOUNCE,
map: map,
title: 'Columbus Museum of Art'
},
...
]
});
}
ko.applyBindings(new ViewModel());
Added a Fiddle to help - just replace your API key in the maps API library included.

Google Maps stops loading when the code is moved to my JS file from script tags in index.html

My map worked fine when I had it in the script tags on my index page, however when I tried to move it to my js file so that I could use a variable in it, nothing worked.
Any help is appreciated, thanks
HTML
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD9utzeckd8pV-IwFik5jVgTtG84QhDjfI&callback=" type="text/javascript"></script>
<script type="text/javascript" src="js/index.js"></script>
JavaScript
var im = 'http://i.imgur.com/aCONaAI.png';
function initMap(position) {
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
zoom: 16,
center: {
lat: 43.4678683,
lng: -79.7006069
},
mapTypeId: google.maps.MapTypeId.SATELLITE,
}
var userMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: im,
scaledSize: new google.maps.Size(50,50)
});
var stageIcon = {
url: 'http://s31.postimg.org/i1fox68uz/bathroomicon.png',
scaledSize: new google.maps.Size(50,50)
}
var stage1 = new google.maps.Marker({
position: { lat: 43.469222,
lng: -79.698804},
map: map,
title: 'Stage 1',
icon: stageIcon
});
}

When you use "defer" you need to use it on all the scripts that are dependent on each other. If you defer loading the Google Maps Javascript API, you need to defer the loading of the scripts that are dependent on it.
working example (your code)
HTML:
<div id="map"></div>
<script async defer type="text/javascript" src="scripts/SO_20160419.js"></script>
<script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=initMap" type="text/javascript"></script>
CSS:
html, body, #map {
height: 100%;
width: 100%;
}
Javascript (contents of scripts/SO_20160419.js):
var im = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
var default_position = {coords: {latitude:42, longitude: -72}};
function initMap(position) {
if (!position) position = default_position;
var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
zoom: 16,
center: {
lat: 43.4678683,
lng: -79.7006069
},
mapTypeId: google.maps.MapTypeId.SATELLITE,
}
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
var userMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: im,
scaledSize: new google.maps.Size(50,50)
});
var stageIcon = {
url: 'http://maps.google.com/mapfiles/ms/micons/green.png',
scaledSize: new google.maps.Size(50,50)
}
var stage1 = new google.maps.Marker({
position: { lat: 43.469222,
lng: -79.698804},
map: map,
title: 'Stage 1',
icon: stageIcon
});
}

Take a look at this one -> fiddle
var map;
(function() {
'use strict';
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
document.add
}
initMap();
})();

Google Maps grey screen in bootstrap modal

I have a function to show a google map:
function initMapSA(lat, ln) {
var myLatLng = { lat: lat, lng: ln };
var opt = {
center: myLatLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
};
map2 = new google.maps.Map(document.getElementById('map_canvas_agent'), opt);
var markerSa = new google.maps.Marker({
position: myLatLng,
map: map2,
title: 'Hello World!'
});
}
In #modal-body I add <div id="map_canvas_agent"></div>
I trigger it via a form button click event:
$(".sa-location").click(function () {
var id = $("#ServiceAgent").val(); //combobox value
$.get("#Url.Action("GetServiceAgentLocation")", { id: id }, function (data) {
initMapSA(data.Lat, data.Ln);//Initialize google maps
}, "json");
});
The Goole Map is showing but it is just a grey screen rather than an actual map. How do I fix that?

Force trigger a resize on the map:
google.maps.event.trigger(map, 'resize');