I’m going to explain how we can create multiple custom markers in Google Maps using V3 API. Furthermore, creating multiple markers is as simple as creating a simple marker using Google Maps API.
Firstly, I’ll show you an example of how we can create a simple map on our page. Moreover, if you are using WordPress then make sure to paste the script under the “Text” tab. If you will write it under the “Visual Text” tab then WordPress will encode your script tags and it will appear as plain text on your page.
Create a Simple Google Map
Firstly, we will create a simple HTML tag where our map will appear and provide its width and height.
<div id="map-1" style="width: 500px; height: 500px;"></div>Now before putting our simple script to render the map on your page, we have to put a Google API link before the script tag, then our script to render Google Maps.
Google API Script
<script src="//maps.googleapis.com/maps/api/js?libraries=places,drawing&key=YOURAPIKEY" type="text/javascript"></script>Code to Render Google Map
<script type="text/javascript">
var temp_map = new google.maps.Map(document.getElementById('map-1'),map_options);
</script>The above code will appear like this in your WordPress editor. After saving the post with the above script you will see a Google Map appearing on your page. Furthermore, make sure there are no empty lines in between script lines otherwise some errors will occur. In addition, the map will not render.
Now if the map is rendered successfully we will add our first marker to it.
Add Multiple Markers to Our Google Map
Adding markers to the map is simple with our provided code. In addition, I have summarized the code, including the above code, it will appear like this:
<script type="text/javascript">
var map_options = {
zoom : 5,
center : new google.maps.LatLng(40.178342, -98.085937),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions : {
mapTypeIds : ['aerial', google.maps.MapTypeId.ROADMAP],
style : google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl : true
};
var my_map = null;
var drawing_instance = {
markers:[],
initialize: function(){
//Map Initialize
my_map = new google.maps.Map(document.getElementById('map-1'),map_options);
//Write Line for Marker with Coordinates
this.create_marker(40.178342, -98.085937);
},
//To CREATE Simple Marker
create_marker: function(_lat,_lng) {
var myLatLng = {lat: _lat, lng: _lng};
var marker_ = new google.maps.Marker({
position: myLatLng,
map: my_map
});
}
};
//This will Load the Map
google.maps.event.addDomListener(window, 'load', function(){
drawing_instance.initialize();
});
</script>
Now after adding the above code if you want to add multiple markers you just have to write the below line to create multiple markers.
this.create_marker(40.178342, -98.085937);
this.create_marker(42.178342, -98.085937);If we will write it two times it will create two markers on the provided coordinates(Lat/Lng), you can repeat this line for as many markers as you want with the right coordinates provided.
Create Info Window for Our Markers
To create an info window we will add a simple function to our existing code that will add an info window to our markers.
infoWindow: function(_marker,_content) {
var infowindow = new google.maps.InfoWindow({
content: _content
});
google.maps.event.addListener(_marker, 'mouseover', function() {
infowindow.open(my_map, _marker);
});
google.maps.event.addListener(_marker, 'mouseout', function() {
infowindow.close();
});
}We will paste the content of the marker on the same line where we added the marker, like this:
this.create_marker(40.178342, -98.085937,'Marker A');
this.create_marker(42.178342, -98.085937,'Marker B');
this.create_marker(42.178342, -97.085937,'Marker C');Our updated and complete code looks as shown below.
<script type="text/javascript">
var map_options = {
zoom : 5,
center : new google.maps.LatLng(40.178342, -98.085937),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions : {
mapTypeIds : ['aerial', google.maps.MapTypeId.ROADMAP],
style : google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl : true
};
var my_map = null;
var drawing_instance = {
markers:[],
initialize: function(){
//Map Initialize
my_map = new google.maps.Map(document.getElementById('map-1'),map_options);
//Write Line for Marker with Coordinates
this.create_marker(40.178342, -98.085937,'Marker A');
this.create_marker(42.178342, -98.085937,'Marker B');
this.create_marker(42.178342, -97.085937,'Marker C');
},
//To CREATE Simple Marker
create_marker: function(_lat,_lng,_content) {
var myLatLng = {lat: _lat, lng: _lng};
var marker_ = new google.maps.Marker({
position: myLatLng,
map: my_map
});
if(_content)
this.infoWindow(marker_,_content);
},
infoWindow: function(_marker,_content) {
var infowindow = new google.maps.InfoWindow({
content: _content
});
google.maps.event.addListener(_marker, 'mouseover', function() {
infowindow.open(my_map, _marker);
});
google.maps.event.addListener(_marker, 'mouseout', function() {
infowindow.close();
});
}
};
//This will Load the Map
google.maps.event.addDomListener(window, 'load', function(){
drawing_instance.initialize();
});
</script>Add Our Custom Images to Markers
Adding a custom image is pretty simple thanks to Google API, we can simply add a custom image to our marker by adding a few lines of code, and we will update our create_marker function for it and the way we call it.
create_marker: function(_lat,_lng,_content,_icon) {
var myLatLng = {lat: _lat, lng: _lng};
var marker_ = new google.maps.Marker({
position: myLatLng,
map: my_map,
icon: _icon
});
if(_content)
this.infoWindow(marker_,_content);
}For this modification, we have to provide a marker image at the time of creating a marker on our map. For example, if my image is default.png, I’ll write a create_image line like this.
this.create_marker(40.178342, -98.085937,'Marker A','http://mysitename.com/imagepath/imageName.png');
this.create_marker(42.178342, -98.085937,'Marker B','http://mysitename.com/imagepath/imageName.png');
this.create_marker(42.178342, -97.085937,'Marker C','http://mysitename.com/imagepath/imageName.png');Please make sure there are no empty lines because WordPress will add in the empty lines, and that will break your code and the map will not appear. The final code with multiple custom markers and info window appears like this.
<script type="text/javascript">
var map_options = {
zoom : 5,
center : new google.maps.LatLng(40.178342, -98.085937),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions : {
mapTypeIds : ['aerial', google.maps.MapTypeId.ROADMAP],
style : google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl : true
};
var my_map = null;
var drawing_instance = {
markers:[],
initialize: function(){
//Map Initialize
my_map = new google.maps.Map(document.getElementById('map-1'),map_options);
//CREATE First Marker with Coordinates
this.create_marker(40.178342, -98.085937,'Marker A','https://agilestorelocator.com/a.png');
this.create_marker(42.178342, -98.085937,'Marker B','https://agilestorelocator.com/b.png');
this.create_marker(42.178342, -97.085937,'Marker C','https://agilestorelocator.com/c.png');
},
//To CREATE Marker InfoBox
infoWindow: function(_marker,_content) {
var infowindow = new google.maps.InfoWindow({
content: _content
});
google.maps.event.addListener(_marker, 'mouseover', function() {
infowindow.open(my_map, _marker);
});
google.maps.event.addListener(_marker, 'mouseout', function() {
infowindow.close();
});
},
//To CREATE Simple Marker
create_marker: function(_lat,_lng,_content,_icon) {
var myLatLng = {lat: _lat, lng: _lng};
var marker_ = new google.maps.Marker({
position: myLatLng,
map: my_map,
icon: _icon
});
if(_content)
this.infoWindow(marker_,_content);
}
};
google.maps.event.addDomListener(window, 'load', function(){
drawing_instance.initialize();
});
</script> <div id="map-1" style="width: 500px; height: 500px;"> </div>