Adding Custom Markers on Map using Google Maps Javascript API
by Vincy. Last modified on July 9th, 2022.
Adding custom marker on the map layer will be useful to show custom information with iconic representation as per the user interest. For example, if the user wants to mark census data then the custom markers can be used instead of the default map markers to show the variations in the population strength.
In this tutorial, I have marked the countries location with the custom icon. I have used the countries flag as the custom markers to locate the country.
In a previous tutorial, I have added an example for adding default map markers for the list of countries by using Google Maps JavaScript API. In this example, it has a database table with a list of countries and custom markers.
I retrieve the database result and iterate to plot the countries location on the map layer with custom markers.
This screenshot shows the output after adding custom markers on the map layer using Google Maps Javascript API.
Javascript Code for Map initialization and Adding Custom Markers
The following code will show how to initialize a map object of Google Map API. In this code, I request the geo-coordinates by sending the country name to the Google GeoCoder service.
While initializing the Google map Marker, the latitude and the longitude coordinates are used for positioning the countries on the map. Also, the path of the custom markers stored in the database is used to set the “icon” option to replace the default marker.
<script
src="https://maps.googleapis.com/maps/api/js?key=<?php echo API_KEY; ?>&callback=initMap"
async defer></script>
<script>
var map;
var geocoder;
function initMap() {
var mapLayer = document.getElementById("map-layer");
var centerCoordinates = new google.maps.LatLng(40.4637, 3.7492);
var defaultOptions = {
center : centerCoordinates,
zoom : 2
}
map = new google.maps.Map(mapLayer, defaultOptions);
geocoder = new google.maps.Geocoder();
<?php
if (! empty($countryResult)) {
foreach ($countryResult as $k => $v) {
?>
geocoder.geocode({
'address' : '<?php echo $countryResult[$k]["country_name"]; ?>'
}, function(LocationResult, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = LocationResult[0].geometry.location.lat();
var longitude = LocationResult[0].geometry.location.lng();
}
new google.maps.Marker({
position : new google.maps.LatLng(latitude, longitude),
map : map,
title : '<?php echo $countryResult[$k]["country_name"]; ?>',
icon : 'marker/<?php echo $countryResult[$k]["marker"]; ?>'
});
});
<?php
}
}
?>
}
</script>
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.