WordPress Tricks

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>

1 thought on “Map With Different location pins and mouse activity disabled”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s