Hello,
I am using Google maps JavaScript API.
Here is code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
font-size:10px;
margin:0;
}
#firstHeading {
font-family: Calibri;
font-size:12px;
font-weight: bold;
color: #0f9bec;
}
p {
color : #666;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(57.0442, 9.9116);
var settings = {
zoom: 15,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var companyImage = new google.maps.MarkerImage('/images/logo.png',
new google.maps.Size(100,50),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var companyShadow = new google.maps.MarkerImage('/images/logo_shadow.png',
new google.maps.Size(130,50),
new google.maps.Point(0,0),
new google.maps.Point(65, 50));
var companyPos = new google.maps.LatLng(57.0442, 9.9116);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
icon: companyImage,
shadow: companyShadow,
title:"Høgenhaug",
zIndex: 3});
var infoWindow = new google.maps.InfoWindow();
var company='<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">COMPANY</h1>'+
'<div id="bodyContent">'+
'<p>Content for company goes here.</p>'+
'</div>'+
'</div>';
google.maps.event.addListener(companyMarker, 'click', function() {
infoWindow.setContent(company);
infoWindow.open(map, companyMarker);
});
// List Go-on for other marker
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>
I have list of continent at the top of the map.
What I want is Google Maps to focus on continent which user select.
Here is an EXAMPLE of What I am looking at.
How can I achieve this within above code ?
Thanks