7 September 2016

Multiple Markers Google Map V3 API WordPress Tutorial

I’m going to explain how we can create Custom Multiple Markers in Google Maps using V3 API, creating Multiple Markers is as simple as creating a simple marker using google maps API. First I’ll show you an example of how we can create a simple map on our page, if you are using WordPress then make sure to paste script under TEXT Tab, if you will write it under Visual Text tab the WordPress will encode your script tags and it will appear as plain text on your page.

Create a Simple Google Map

First of all, we will create a simple HTML Tag where our Map will appear and provide it 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&amp;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, make sure the is no empty lines in between script lines otherwise some error will occur and map will not render. Now if the map is rendered successfully we will add our first marker to it.

Google Map
Simple Google Map

Add Multiple Marker to Our Google Map

Adding marker to map is really simple with our provided code, I have summarized the code including 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>
map with marker
Map with Single Marker

Now after adding above code if you want to add multiple markers you just have to write this 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 coordinate provided.

Create InfoWindow for Our Markers

To Create InfoWindow we will add a simple function to our existing code that will add InfoWindow 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 pass our content of 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 complete code looks 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,'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> 
Marker with InfoWindow
Marker With InfoWindow

Add Our Custom Images to Marker

Adding custom image is pretty simple thanks to Google API, we can simply Add custom image to our marker by adding few lines of code, 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);
}

By this modification we have to provide marker image at the time of creating marker on our map, so for example if my image is default.png, I’ll write 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 is no empty line because wordpress add in empty lines that will break you code and map will not appear, the final code with multiple custom markers and infoWindow 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);
       //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> 


Leave a Reply

Your email address will not be published. Required fields are marked *