How to add multiple custom markers on google map
In this article, you will learn to display multiple custom markers on google map. The multiple markers allow us to set multiple destination addresses, drives, walks, weather forecasting, We are using Google maps API to display multiple markers on map just like we used in displaying single marker on google map.
1. Get your api key
For showing google map in webpage, we need to generate Google API. For this, first login to your gmail account, go to 'Google API Console' and follow the instructions and get an API key.
2. Create an HTML page and load the Google Map Javascript API into your web page.
First, create a div element and give some ID to load the google map.
<div id="map_container"> </div>Next, create Javascript function initialize_map() to initialize the map and give the central latitude and longitude of the map.
function initialize_map() {
var mapDiv = document.getElementById('map_container');
var map = new google.maps.Map(mapDiv, {
center: {lat: 28.7041, lng: 77.1025},
zoom: 10
});
}Next, take a Javascript variable markerlocations and assign all the markers latitude, longitude and marker icons.
var markerlocations = [
[26.846694, 80.946166, 'Cloudy Sunny', 'icons/cloudysunny.png'],
[28.613939, 77.209021, 'Rainy', 'icons/rainy.png'],
[32.7218, 74.8577, 'Snowy', 'icons/snowy-2.png'],
[23.259933, 77.412615, 'Thunderstorm', 'icons/thunderstorm.png'],
[23.610181, 85.279935, 'Sunny', 'icons/sunny.png'],
[22.986757, 87.854976, 'Storm', 'icons/storm.png'],
];To show all the markers on the map, loop over the above variable and specifies the initial properties of the marker using google.maps.Marker constructor.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markerlocations[i][0], markerlocations[i][1]),
map: map,
icon: markerlocations[i][3]
});To display the marker address in info window uses the InfoWindow constructor.
var infowindow = new google.maps.InfoWindow({
content: address
});Complete Code: Show multiple markers on google map
<!DOCTYPE html>
<html>
<head>
Google map api with marker
</head>
<body>
<div id="map_container" style="width: 50%; height: 350px;"> </div>
<script>
function initialize_map() {
var mapDiv = document.getElementById('map_container');
var map = new google.maps.Map(mapDiv, {
center: {lat: 28.7041, lng: 77.1025},
zoom: 10
});
var markerlocations = [
[26.846694, 80.946166, 'Cloudy Sunny', 'icons/cloudysunny.png'],
[28.613939, 77.209021, 'Rainy', 'icons/rainy.png'],
[32.7218, 74.8577, 'Snowy', 'icons/snowy-2.png'],
[23.259933, 77.412615, 'Thunderstorm', 'icons/thunderstorm.png'],
[23.610181, 85.279935, 'Sunny', 'icons/sunny.png'],
[22.986757, 87.854976, 'Storm', 'icons/storm.png'],
];
for(i = 0; i < markerlocations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markerlocations[i][0], markerlocations[i][1]),
map: map,
icon: markerlocations[i][3]
});
var address = '<div><p><b>markerlocations[i][2]</b></p></div>';
var infowindow = new google.maps.InfoWindow({
content: address
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initialize_map">
</script>
</body>
</html>
In the above example, replace the API_KEY with your api key. When you will open this in the browser, it shows the map like this -
Output
Simple File Upload Script in PHP
How to add google map on your website with marker
