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 API click url event not working

I created some markers on google maps and want to open the country's php page when I click on it(marker) but I don't know why it doesn't do that. Here is the layout of my code:
<script>
function initMap() {
var germany = {lat: 51.268917, lng: 9.591616};
var russia = {lat: 55.765237, lng: 37.582553};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: germany
});
var marker = new google.maps.Marker({
position: germany,
map: map,
title:'Germany',
url:'Germany.php',
animation:google.maps.Animation.DROP
});
var marker = new google.maps.Marker({
position: russia,
map: map,
title:'Russia',
animation:google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', function()
{window.location.href = marker.url;});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?
key=My_API_Key&callback=initMap">
</script>

I can't actually add comments, but you can try this. I have working for mine. You can tidy it up too.
<script>
function callMyUrl(element){
alert('I am from ' + element.title);
}
function initMap() {
var germany = {lat: 51.268917, lng: 9.591616};
var russia = {lat: 55.765237, lng: 37.582553};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: germany
});
var location = [
{title: 'Germany', lat: 51.268917, lng: 9.591616 },
{title: 'Russia', lat: 55.765237, lng: 37.582553 }
]
location.forEach(function(element){
var marker;
marker = new google.maps.Marker({
position: new google.maps.LatLng(element.lat, element.lng),
title: element.title,
map: map
});
return google.maps.event.addListener(marker, 'click', function() {
callMyUrl(element);
});
});
}
</script>

Google map API : apply MarkerClusterer only to a category of specific markers

Using MarkerClusterer, I would like to cluster only a category of markers.
I have here 10 markers. I want to cluster only 8 of them, using a "type" variable, that is either "cluster", or "nocluster".
Sounds simple, but I didn't find any tip to do that...
Any idea?
Thank you
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {
lat: 48.371310,
lng: 7.593634
},
gestureHandling: 'cooperative'
});
var markers1 = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
type: location.type
});
});
// Add a marker clusterer to manage the markers.
var mcOptions = {gridSize: 50, maxZoom: 10, styles: [{
anchor:[0,0],
textSize: 14,
height: 50,
width: 50
}]
};
var markerCluster = new MarkerClusterer(map, markers1, mcOptions);
} /* end FUNCTION initMap */
var locations = [
{num: '1', type: 'cluster', lat: 49.050288, lng: 7.950412},
{num: '2', type: 'cluster', lat: 48.929413, lng: 7.852254},
{num: '3', type: 'cluster', lat: 48.926529, lng: 7.361955},
{num: '4', type: 'cluster', lat: 48.892072, lng: 7.655839},
{num: '5', type: 'cluster', lat: 48.887685, lng: 7.785195},
{num: '6', type: 'cluster', lat: 48.857382, lng: 7.321078},
{num: '7', type: 'cluster', lat: 48.856634, lng: 7.319182},
{num: '8', type: 'cluster', lat: 48.761871, lng: 7.967141},
{num: '9', type: 'nocluster', lat: 48.736924, lng: 7.709988},
{num: '10', type: 'nocluster', lat: 48.749944, lng: 7.340100}
];
google.maps.event.addDomListener(window, "load", initMap);
</script>
<script src="js/markerclusterer.js"></script>

It's easy - if you want a marker to be clustered, then add it to markerCluster, otherwise, just use marker.setMap(map).
google.maps.Marker will ignore the type key that you are passing in because it doesn't do anything with it (moreover, there's no mechanism to retrieve it) so you should probably just create two sets of markers:
var markersToCluster = [];
var markersToNotCluster = [];
locations.forEach(function(location, i) {
var marker = new google.maps.Marker({position:location});
location.type === 'something' ? markersToCluster.push(marker) : markersToNotCluster.push(marker);
});
var markerCluster = new MarkerClusterer(map, markersToCluster, mcOptions);
markersToNotCluster.forEach(function(m) { m.setMap(map); });

Polygon with hole in react-google-maps

I'm using tomchentw/react-google-maps integration component, in according with Maps JavaScript API, I've try to put inside paths prop of Polygon component an array of outerCoords and InnerCords, to show holes inside polygon:
props.zones.value.data.map( () => {
var outerCoords = [
{lat: -32.364, lng: 153.207}, // north west
{lat: -35.364, lng: 153.207}, // south west
{lat: -35.364, lng: 158.207}, // south east
{lat: -32.364, lng: 158.207} // north east
];
var innerCoords1 = [
{lat: -33.364, lng: 154.207},
{lat: -34.364, lng: 154.207},
{lat: -34.364, lng: 155.207},
{lat: -33.364, lng: 155.207}
];
var innerCoords2 = [
{lat: -33.364, lng: 156.207},
{lat: -34.364, lng: 156.207},
{lat: -34.364, lng: 157.207},
{lat: -33.364, lng: 157.207}
];
return (
<Polygon
key={zone.id}
paths={[outerCoords, innerCoords1, innerCoords2]}
onClick={props.onMapClick}
/>
);
})
The result is a polygon with inside other polygons, not holes.
Did somebody else find this issue?

The Google Maps JavaScript API documentation says the following:
To create an empty area within a polygon, you need to create two paths, one inside the other. To create the hole, the coordinates defining the inner path must be in the opposite order to those defining the outer path. For example, if the coordinates of the outer path are in clockwise order then the inner path must be counter-clockwise.
https://developers.google.com/maps/documentation/javascript/shapes#polygon_hole
In your example you should change the order for inner paths:
<Polygon
key={zone.id}
paths={[outerCoords, innerCoords1.reverse(), innerCoords2.reverse()]}
onClick={props.onMapClick}
/>
Proof of concept
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: -34.198173, lng: 151.677246},
});
var outerCoords = [
{lat: -32.364, lng: 153.207}, // north west
{lat: -35.364, lng: 153.207}, // south west
{lat: -35.364, lng: 158.207}, // south east
{lat: -32.364, lng: 158.207} // north east
];
var innerCoords1 = [
{lat: -33.364, lng: 154.207},
{lat: -34.364, lng: 154.207},
{lat: -34.364, lng: 155.207},
{lat: -33.364, lng: 155.207}
];
var innerCoords2 = [
{lat: -33.364, lng: 156.207},
{lat: -34.364, lng: 156.207},
{lat: -34.364, lng: 157.207},
{lat: -33.364, lng: 157.207}
];
// Construct the polygon, including both paths.
var bermudaTriangle = new google.maps.Polygon({
paths: [outerCoords, innerCoords1.reverse(), innerCoords2.reverse()],
strokeColor: '#FFC107',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FFC107',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap">
</script>
I hope this helps!

How do i access all my google maps markers

I am not seeing it i'll think if one of you looks at it can immediately tell me what i have to do. Now i resize my marker but it only takes the last marker of the array.
here the code I'll loop trough the array of object markers:
var locations = [
[{id: 1, lat: 51.523229192354066, lng: 5.139241042480535, content: 'Title A'}],
[{id: 2, lat: 51.52309568310267, lng: 5.139251771316594, content: 'Title B'}],
[{id: 3, lat: 51.5229888754197, lng: 5.139434161529607, content: 'Title C'}],
[{id: 4, lat: 51.52284868995566, lng: 5.139487805709905, content: 'Title D'}],
[{id: 5, lat: 51.522715179588666, lng: 5.139670195922918, content: 'Title E'}],
[{id: 6, lat: 51.52258166883027, lng: 5.1397989419556325, content: 'Title F'}],
[{id: 7, lat: 51.52242813097418, lng: 5.139927687988347, content: 'Title G'}],
[{id: 8, lat: 51.52227793039666, lng: 5.139927687988347, content: 'Title H'}],
[{id: 9, lat: 51.522625059869696, lng: 5.138688507423467, content: 'Title I'}]
];
for (i = 0; i < locations.length; i++) {
var myLatLng = {lat: locations[i][0].lat, lng: locations[i][0].lng};
marker = new google.maps.Marker({
position: myLatLng,
icon: icon1,
map: map
});
map.addListener('zoom_changed', function() {
if (map.getZoom() === 17) {
marker.icon.scaledSize = new google.maps.Size(32, 32);
marker.icon.size = new google.maps.Size(32, 32);
marker.setMap(map);
}
if (map.getZoom() === 18) {
console.log(marker[i]);
marker.icon.scaledSize = new google.maps.Size(90, 90);
marker.icon.size = new google.maps.Size(90, 90);
marker.setMap(map);
}
});
If i try to access marker[i].icon it is undefined. Please can somebody help me out to use size ALL the markers.
Here is a fiddle for a better view zoom in and out to see what happens only one marker change in size:
https://jsfiddle.net/sylvanR/a8z0yyeq/10/

The problem is this: you're looping over all your markers, adding a new event listener for the map's zoom_changed event. In each of those event listeners, you're referring to the variable marker. This event listener function doesn't get executed at the moment you define it, it only happens when the zoom changes obviously. So at that point, the variable marker will equal whatever it was at the very last iteration of your for loop.
Instead you need to change how you setup this event listener, something like this:
for (i = 0; i < locations.length; i++) {
var myLatLng = {lat: locations[i][0].lat, lng: locations[i][0].lng};
marker = new google.maps.Marker({
position: myLatLng,
icon: icon1,
map: map
});
setMarkerSize(marker);
}
function setMarkerSize(marker) {
var icon = marker.icon;
map.addListener('zoom_changed', function() {
if (map.getZoom() === 16) {
icon.scaledSize = new google.maps.Size(15, 15);
icon.size = new google.maps.Size(15, 15);
marker.setIcon(icon);
console.log(marker.icon.size);
}
if (map.getZoom() === 17) {
icon.scaledSize = new google.maps.Size(32, 32);
icon.size = new google.maps.Size(32, 32);
marker.setIcon(icon);
console.log(marker.icon.size);
}
if (map.getZoom() === 18) {
icon.scaledSize = new google.maps.Size(90, 90);
icon.size = new google.maps.Size(90, 90);
marker.setIcon(icon);
console.log(marker.icon.size);
}
});
}
In this case, marker inside the setMarkerSize function is a local variable that will be different each time you call the function.