Map With Different location pins and mouse activity disabled

This is for advanced users, just shared the code. You can use it in your site by changing the Pin Location name and address. Applicable for wordpress, html and php based sites. Feel free to do comments if you have any question regarding this.

<style type="text/css">
    .link_css {
        margin: 0 0 28px !important;
    }
    </style>    <style>
	#map-canvas {
		height: 450px;
	}
	#iw_container .iw_title {
		font-size: 16px;
		font-weight: bold;
	}
	.remove_op #map_canvas{
    	pointer-events: none;
	}
	.iw_content {
		padding: 15px 15px 15px 0;
	}
</style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAaQ30B1mQCYWzcbhR5yobGjelfZVYKzNM&sensor=false"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($){
    
    $('.remove_op .wpb_wrapper').click(function () {
    $('#map_canvas').css("pointer-events", "auto");
	});

	$( ".remove_op .wpb_wrapper" ).mouseleave(function() {
	  $('#map_canvas').css("pointer-events", "none"); 
	});
       
    });
     jQuery(function() {
    
    //jQuery(window).load(function(){
       if (window.location.hash) {
            jQuery('html,body').animate({scrollTop: 0}, 500);
            setTimeout(function(){
              
              //Executed on page load with URL containing an anchor tag.
	            if (jQuery(location.href.split("#")[1])) {

	                var target = jQuery('#' + location.href.split("#")[1]);

	                if (target.length) {
                        //jQuery('html,body').animate({scrollTop: 0}, 1500);
	                    jQuery('html,body').animate({scrollTop: target.offset().top - 120}, 1000);

	                    return false;

	                }

	            } 
            }, 200);    
            
               
            

                 

        }
        //});	
    });
    
    </script>
<div class="remove_op">
<div class="wpb_wrapper">
<div id="map_canvas" style="width:100%; height:545px;"></div></div></div>
<style>
#map-canvas {
   height: 460px;
}
#iw_container .iw_title {
   font-size: 16px;
   font-weight: bold;
}
#map-canvas {
        margin: 0;
        padding: 0;
   
}
.iw_content {
   padding: 15px 15px 15px 0;
}
</style>
<script>
var locations = [
    ['SINGAPORE HQ', '7 Kian Teck Ave Singapore 628897'],
    ['SHANGHAI', 'Room 2102, ShenXin Building, No. 200 NingHai(East) Road, Shanghai 200021'],
    ['GUANGZHOU', 'Room 2217, Baiyun Building, 111 Baiyun Road, Guangzhou 510100'],
    ['SHUNDE', 'No.8 Wei Ye Rd, Beijiao Industrial Park, Beijiao Town, Shunde 528311'],

];

var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();

function initialize() {
    map = new google.maps.Map(
    document.getElementById("map_canvas"), {
       center: new google.maps.LatLng(1.469771,103.8088943),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    geocoder = new google.maps.Geocoder();

    for (i = 0; i < locations.length; i++) {


        geocodeAddress(locations, i);
    }
}
google.maps.event.addDomListener(window, "load", initialize);

function geocodeAddress(locations, i) {
    var title = locations[i][0];
    var address = locations[i][1];
    var url = locations[i][2];
    geocoder.geocode({
        'address': locations[i][1]
    },

    function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                icon: url,
                map: map,
                position: results[0].geometry.location,
                title: title,
                animation: google.maps.Animation.DROP,
                address: address,
                url: url
            })
            infoWindow(marker, map, title, address, url);
            bounds.extend(marker.getPosition());
            map.fitBounds(bounds);
        } else {
            alert("geocode of " + address + " failed:" + status);
        }
    });
}

function infoWindow(marker, map, title, address, url) {
   google.maps.event.addListenerOnce(map, 'tilesloaded', function() {



        var html = "<div>" + title + "<p>" + address + "<br></div></div>";
        iw = new google.maps.InfoWindow({
            content: html,
            //maxWidth: 350
        });
        iw.open(map, marker);
    });
}

function createMarker(results) {
    var marker = new google.maps.Marker({
        icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
        map: map,
        position: results[0].geometry.location,
        title: title,
        animation: google.maps.Animation.DROP,
        address: address,
        url: url
    })
    bounds.extend(marker.getPosition());
    map.fitBounds(bounds);
    infoWindow(marker, map, title, address, url);
    return marker;
}
initialize();
</script>