Google Maps Js API V3 - Simple Multiple Marker Example

Google Maps JS API v3 - Simple Multiple Marker Example

This is the simplest I could reduce it to:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>

<script type="text/javascript">
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});

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]),
map: map
});

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>

‍ Edit/fork on a Codepen →

SCREENSHOT

Google Maps Multiple Markers

There is some closure magic happening when passing the callback argument to the addListener method. This can be quite a tricky topic if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction if it is the case:

❯ Mozilla Dev Center: Working with Closures

How to add Multiple markers on javascript google maps?

See the comments...

function loadMap() {

var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];

let mapOptions = {
center: new google.maps.LatLng(-33.92, 151.25),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

// Moved this line up here
this.map = new google.maps.Map(document.getElementById('map'), mapOptions); // changed the "native element" to a standard DOM element for the sake of this example

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]),
map: this.map // You are using this.map here so it needs to be created before
});

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(Map, marker);
}
})(marker, i));
}
}

loadMap();
#map {
height: 180px;
}
<div id="map"></div>
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

Google Maps Simple Multiple Marker Example more the 6 markers not working

Fixed it, it was the missing "," at the end of the var. SORRY

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>Google Maps Multiple Markers</title>

<script src="http://maps.google.com/maps/api/js?sensor=false"

type="text/javascript"></script>

</head>

<body>

<div id="map" style="width: 500px; height: 400px;"></div>

<script type="text/javascript">

var locations = [

['Bondi Beach', -33.890542, 151.274856, 4],

['Coogee Beach', -33.923036, 151.259052, 5],

['Cronulla Beach', -34.028249, 151.157507, 3],

['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

['Maroubra Beach', -33.950198, 151.259302, 1]

];

var map = new google.maps.Map(document.getElementById('map'), {

zoom: 10,

center: new google.maps.LatLng(-33.92, 151.25),

mapTypeId: google.maps.MapTypeId.ROADMAP

});

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]),

map: map

});

google.maps.event.addListener(marker, 'click', (function(marker, i) {

return function() {

infowindow.setContent(locations[i][0]);

infowindow.open(map, marker);

}

})(marker, i));

}

</script>

</body>

</html>

Google Maps JS API v3 - Simple Multiple Marker Example with Custom Markers

Here is a simple JSFiddle Demo showing a custom marker created with the following codes.
You can customize the icon of your marker with the icon parameter when creating a marker. For instance:

var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: 'http://www.kjftw.com/gmap/images/icons/numeric/red10.png',
zIndex: Math.round(latlng.lat() * -100000) << 5
});

You can set the icon param with the location of your custom marker image. Or in your case something like this:

for(var i=0; i<locations.length; i++){
myGlobalMarker.push(new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][4],
title: locations[i][0]
});
}

Where assuming locations[i][1] is the lat and locations[i][2] is the lng. This is not tested, but it's a base for what you can do to create custom icon. myGlobalMarker is a global variable array that holds all markers. I am not 100% sure if absolute URL or relative URL is needed for the icon location. However, in my Google Map app i was able to use relative path to display custom icon on my marker. This is the final result:
Sample Image

Auto-center map with multiple markers in Google Maps API v3

There's an easier way, by extending an empty LatLngBounds rather than creating one explicitly from two points. (See this question for more details)

Should look something like this, added to your code:

//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();

for (i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});

//extend the bounds to include each marker's position
bounds.extend(marker.position);

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}

//now fit the map to the newly inclusive bounds
map.fitBounds(bounds);

//(optional) restore the zoom level after the map is done scaling
var listener = google.maps.event.addListener(map, "idle", function () {
map.setZoom(3);
google.maps.event.removeListener(listener);
});

This way, you can use an arbitrary number of points, and don't need to know the order beforehand.

Demo jsFiddle here: http://jsfiddle.net/x5R63/

Google maps API V3 - multiple markers on exact same spot

Take a look at OverlappingMarkerSpiderfier.

There's a demo page, but they don't show markers which are exactly on the same spot, only some which are very close together.

But a real life example with markers on the exact same spot can be seen on http://www.ejw.de/ejw-vor-ort/ (scroll down for the map and click on a few markers to see the spider-effect).

That seems to be the perfect solution for your problem.



Related Topics



Leave a reply



Submit