Title: Does anyone use Easy UI with google maps?(solved)
Post by: wilfo on March 30, 2013, 11:36:25 PM
I wonder if it's possible mix EASY UI with Google Maps for GIS applications.
Title: Re: Does anyone use Easy UI with google maps?
Post by: wilfo on March 31, 2013, 12:22:58 AM
I solved myself this doubt.If you are interested , yes , it's possible mix googlemaps with easy ui.It's cool..
It's so easy to integrate and great results at short time.
Title: Re: Does anyone use Easy UI with google maps?
Post by: ClSoft on April 01, 2013, 11:21:22 PM
Hello could you please send your example at pierre.pcsoft thanks!
Title: Re: Does anyone use Easy UI with google maps?(solved)
Post by: Kevin on April 19, 2013, 08:32:50 AM
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>
|