Here is an example which loads Google Maps, displays a marker, a circle and a polyline.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Maps Test</title>
<link class="jeasycss" rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css" />
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var gmap, locMarker, locCircle, locPath;
var mapDiv = document.getElementById('myMap');
options = {
center: new google.maps.LatLng(-34.8, 138.6),
scaleControl: true,
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true,
navigationControl: true,
disableDoubleClickZoom: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
};
gmap = new google.maps.Map(mapDiv, options);
gmap.setOptions({
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID
]
}
});
locMarker = new google.maps.Marker({
position: new google.maps.LatLng(-34.8, 138.6),
map: gmap,
title: "A marker"
});
locCircle = new google.maps.Circle({
visible: true,
map: gmap,
radius: 5000,
center: new google.maps.LatLng(-34.6, 138.4),
fillColor: '#0055ff',
fillOpacity: 0.2,
strokeColor: '#0055ff',
strokeOpacity: 0.8,
strokeWeight: 1
});
var polyCoordinates = [
new google.maps.LatLng(-34.2, 138.0),
new google.maps.LatLng(-34.4, 138.1),
new google.maps.LatLng(-34.5, 138.3)
];
locPath = new google.maps.Polyline({
path: polyCoordinates,
strokeColor: "#0072BC",
strokeOpacity: 0.8,
strokeWeight: 5
});
locPath.setMap(gmap);
});
</script>
</head>
<body class="easyui-layout" style="font-family:Arial,Trebuchet MS,verdana;">
<div region="north" style="height:42px;">
Some heading, logo and menu
</div>
<div region="center" style="overflow:hidden;">
<div id="L_centerTabs" class="easyui-tabs" fit="true" border="false">
<div id="mapTab" title="My Map" style="padding:1px;overflow:hidden;">
<div id="myMap" style="height:100%">
</div>
</div>
<div id="otherTab" title="Other" style="padding:1px;overflow:hidden;">
Some other tab
</div>
</div>
</div>
</body>
</html>
