Create links over google map

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>

<script>
var map;
var gurgaon = new google.maps.LatLng(28.4595,77.0266);
var delhi = new google.maps.LatLng(28.6139,77.2090);

// Add a Gurgaon control that returns the user to Gurgaon
function GurgaonControl(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'green';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to Gurgaon';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.color='white';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Gurgaon<b>'
controlUI.appendChild(controlText);

// Setup click-event listener: simply set the map to Gurgaon
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(gurgaon)
});
}

// Add a Delhi control that returns the user to Delhi
function DelhiControl(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'green';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to Delhi';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.color='white';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Delhi<b>'
controlUI.appendChild(controlText);

// Setup click-event listener: simply set the map to Delhi
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(delhi)
});
}

function initialize() {
var mapDiv = document.getElementById('googleMap');
var myOptions = {
zoom: 12,
center: delhi,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, myOptions);
// Create a DIV to hold the control and call HomeControl()
var gurgaonControlDiv = document.createElement('div');

var delhiControlDiv = document.createElement('div');

var gurgaonControl = new GurgaonControl(gurgaonControlDiv, map);

var delhiControl = new DelhiControl(delhiControlDiv, map);
// homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(gurgaonControlDiv);

map.controls[google.maps.ControlPosition.RIGHT_TOP].push(delhiControlDiv);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:1000px;height:640px;"></div>
</body>
</html>

Share This:

Leave a Reply

Your email address will not be published. Required fields are marked *