Google Map Integrating with Multiple Locations in HTML Page
Google Map Integrating with Multiple Locations in HTML Page
The below example will help when if any company or organization has two or more branches, if they want to include these locations with help of google map in their website (Ex: in Contact page).
If suppose I have a organization call "ABC" and having branches in (BEST WESTERN, Green Valley, Arizona), (DOUBLETREE BY HILTON, Dearborn, Michigan) and (HAMPTON INN, Junction City, Kansas), I want show these locations in my website i.e. in Contact page then the following example will show how to integrate multiple locations in your HTML page.
Add below code in your HTML page Header..
[javascript]
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" >
function initialize() {
var map_options = {
center: new google.maps.LatLng(39.0095619, -96.8330728),
zoom: 4,
mapTypeId: "terrain" //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 = [];
t.push('BEST WESTERN, Green Valley, Arizona');
x.push(32.0209388);
y.push(-110.973699);
h.push('<p><strong>BEST WESTERN, Green Valley, Arizona</strong><br/>Address 1</p>');
t.push('DOUBLETREE BY HILTON, Dearborn, Michigan');
x.push(42.3146005);
y.push(-83.2134094);
h.push('<p><strong>DOUBLETREE BY HILTON, Dearborn, Michigan</strong><br/>Address 2</p>');
t.push('HAMPTON INN, Junction City, Kansas');
x.push(39.0095619);
y.push(-96.8330728);
h.push('<p><strong>HAMPTON INN, Junction City, Kansas</strong><br/>Address 2</p>');
t.push('Quality Inn, Phoenix, Arizona');
x.push(33.6054149);
y.push(-112.125051);
h.push('<p><strong>Quality Inn, Phoenix, Arizona</strong><br/>Address 2</p>');
t.push('RADISSON JFK INTERNATIONAL AIRPORT, Jamaica, New York');
x.push(40.6428936);
y.push(-73.785808);
h.push('<p><strong>RADISSON JFK INTERNATIONAL AIRPORT, Jamaica, New York</strong><br/>Address 2</p>');
var i;
var alpha = ['A', 'B', 'C', 'D', 'E']
for (i = 0; i < t.length; i++) {
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],
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + alpha[i] + '|FF0000|000000'
});
google.maps.event.addListener(m, 'click', function () {
info_window.setContent(this.html);
info_window.open(google_map, this);
});
}
}
$(function () {
initialize();
});
</script>
[/javascript]
Add below code in your HTML page body..
[html]
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<div id="map_canvas" style="width:600px;height:500px;margin: 0px auto;">Google Map</div>
[/html]
