Integrating GoogleMap with Multiple Location Markers in Your Website

In your website,Their may arise situation to show multiple locations in your Contact  Google map. May be  you want to show all the branches of the corresponding companies in it.

So In this post I will explain How to do that.

Include this script in your header:-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <script type="text/javascript">     $(document).ready(function() { initialize(); });
    function initialize() {        var map_options = {            center: new google.maps.LatLng(24.4667,54.3667),            zoom: 13,            mapTypeId: google.maps.MapTypeId.ROADMAP        };
        var google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);
        var info_window = new google.maps.InfoWindow({            content: 'loading'        });
        var t = [];        var x = [];        var y = [];        var h = [];

//add latitude,longitude of locations here 

        t.push('Location Name 1');        x.push(24.4667);        y.push(54.3667);        h.push('<p><strong>Location Name 1</strong><br/>Address 1</p>');
        t.push('Location Name 2');        x.push(24.4690);        y.push(54.3690);        h.push('<p><strong>Location Name 2</strong><br/>Address 2</p>');
 t.push('Location Name 3');        x.push(24.4700);        y.push(54.3700);        h.push('<p><strong>Location Name 2</strong><br/>Address 2</p>');
 t.push('Location Name 4');        x.push(24.4800);        y.push(54.3800);        h.push('<p><strong>Location Name 2</strong><br/>Address 2</p>');

        var i = 0;        for ( item in t ) {            var m = new google.maps.Marker({                map:       google_map,                animation: google.maps.Animation.DROP,                title:     t[i],                position:  new google.maps.LatLng(x[i],y[i]),                html:      h[i]            });
            google.maps.event.addListener(m, 'click', function() {                info_window.setContent(this.html);                info_window.open(google_map, this);            });            i++;        }    }</script> 

After that  include

<div id="map_canvas" style="width:auto;height:400px;">Google Map</div> 

this above line in the place where you want to show your map.

ENJOY !!!! Have a Great day!!!!