<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="" dir="ltr">
<head lang="" dir="ltr">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry"></script>
<script>
function initialize() {
if(jQuery('#address1').val()!=''){
var position = jQuery('#address1').val().split(",");
var g_lat1= parseFloat(position[0]);
var g_long1=parseFloat(position[1]);
}
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(g_lat1,g_long1),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(
document.getElementById('info'));
if(jQuery('#address1').val()!=''){
var position = jQuery('#address1').val().split(",");
var lat1= parseFloat(position[0]);
var long1=parseFloat(position[1]);
marker1 = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(lat1.toFixed(2),long1.toFixed(2))
});
}else{
marker1 = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(geoip_latitude(),geoip_longitude())
});
}
if(jQuery('#address1').val()!=''){
var iw = new google.maps.InfoWindow({
content: '<div style="overflow:hidden">'+jQuery('#content1').val()+'</div>'
});
}else{
var iw = new google.maps.InfoWindow({
content: '<div style="overflow:hidden">'+geoip_city()+','+geoip_region_name()+','+geoip_country_name()+'</div>'
});
}
google.maps.event.addListener(marker1, "click", function (e) { iw.open(map, this); });
if(jQuery('#address2').val()!=''){
var position1 = jQuery('#address2').val().split(",");
var lat2= parseFloat(position1[0]);
var long2= parseFloat(position1[1]);
marker2 = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(lat2.toFixed(2),long2.toFixed(2))
});
}else{
marker2='';
}
var iw1 = new google.maps.InfoWindow({
content: '<div style="overflow:hidden">'+jQuery('#content2').val()+'</div>'
});
google.maps.event.addListener(marker2, "click", function (e) { iw1.open(map, this); });
var bounds = new google.maps.LatLngBounds(marker1.getPosition(),
marker2.getPosition());
map.fitBounds(bounds);
zoomChangeBoundsListener =
google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
if (this.getZoom()){
this.setZoom(4);
var LatLngList = [new google.maps.LatLng (lat1,long1), new google.maps.LatLng (lat2,long2)];
var bounds = new google.maps.LatLngBounds ();
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
bounds.extend (LatLngList[i]);
}
map.fitBounds (bounds);
}
});
setTimeout(function(){google.maps.event.removeListener(zoomChangeBoundsListener)}, 1000);
var geodesicOptions = {
strokeColor: '#CC0099',
strokeOpacity: 1.0,
strokeWeight: 3,
geodesic: true,
map: map
};
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeOpacity: 1,
scale: 2
};
geodesicPoly = new google.maps.Polyline({
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
map: map
});
update();
}
function update() {
var path = [marker1.getPosition(), marker2.getPosition()];
geodesicPoly.setPath(path);
var heading = google.maps.geometry.spherical.computeHeading(path[0],
path[1]);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width:600px;height:600px;"></div>
<input type="hidden" id="address1" value="23.070611,72.621646">
<input type="hidden" id="address2" value="1.3644202,103.99153079999996">
<input type="hidden" id="content1" value="Ahmedabad, India (AMD)">
<input type="hidden" id="content2" value="Changi Airport Singapore (SIN), Airport Boulevard, Singapore">
</body>
</html>
