An ASP.NET web control wrapping Google Maps API
I'm developing the new version of my real estate web site (http://www.vendercasa.it/) and I would to enrich it with the possibility of browsing the database trough a map, so I decided of interfacing my site with Google Maps; I think the best way to obtain it is to make a web control wrapping a sub-group of Google Maps APIs so I realised a web control, CalSoft.GoogleMaps, that offers methods, properties and events (at the end of the post you can find a reference) useful for interfacing to the Google Maps APIs.
How to use the control in an "ASP.NET Ajax-Enabled Web Site Project":
(note: the control works only in an Ajax project inside an update panel)
1 - Insert as first line of the HTML code the DOCTYPE tag: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2 - Insert in the <HEAD> of the HTML code: <script src="http://maps.google.com/maps?file=api&v=2&key=GOOGLE_MAPS_KEY" type="text/javascript"></script> where GOOGLE_MAPS_KEY depends on the URL of your site and you can get it here.
3 - Copy gmap.js in your web site space and insert in the <HEAD> of the HTML code: <script src="./gmaps.js" type="text/javascript"></script> where "gmaps.js" is the file with the javascript client library needed by the control
4 - In the body tag insert onload="GLoad()" onunload="GUnload()"
5 - Insert in your aspx page a ScriptManager and an UpdatePanel. Put outside the UpdatePanel a DIV control and fill it Id property (for example 'MYMAP') and set the dimensions of the control
6 - Add the CalSoft.GoogleMaps control to the toolbox (right click over the toolbox, 'choose items...' and browse the CalSoft DLL), insert a GoogleMaps control in the UpdatePanel, fill the Control property with the Id of the control where you want the map would appear (in previous example "MYMAP"). Set the other properties according to your needs.
Problems/To do:
PanTo doesn't work right
Setting "navigation map controls" properties doesn't work in runtime mode
Test multiple controls in a single page
Impossible to change the 'Control' property at runtime
Implement StringBuilder where possible and useful
Methods, properties and events reference
Methods:
SetCenter(Single sLat, Single sLng, int iZoom)
Set the centre of the map and the zoom factor.
PanTo(Single sLat, Single sLng, int iMillisec)
Pan the map to the specified position in the specified time (milliseconds).(at the moment doesn't work right)
Properties:
bool ZoomChanged
bool MapTypeChanged
bool CoordinatesChanged
These 3 read-only properties warn over a value change.
(respectively zoom, map type and coordinates)
bool GLargeMapControl
bool GSmallMapControl
bool GSmallZoomControl
bool GScaleControl
bool GMapTypeControl
bool GOverviewMapControl
They activate the visualization of the standard navigation controls on the map.
They are valid only at design time, changing them during runtime is useless.
int Zoom
Zoom level.
Single Latitude
Latitude of the centre of the map.
Single Longitude
Longitude of the centre of the map.
string Control
Id of the control (usually a DIV) where the map is displayed.
GMMapType MapType
Map type, the value is an enum:
enum GMMapType { Normal, Satellite, Hybrid, Default }
Single NELatitude
Single NELongitude
Single SWLatitude
Single SWLongitude
Latitudes and longitudes of the north-east and south-west corner of the map. They are read-only.
Events:
OnGMClick(object sender, Single lat, Single lng)
Fired every time the user click on the map.
Lat e lng are the coordinates (latitude and longitude) of the clicked point.
OnGMMove(object sender, string arg)
Fired when the map change (in position, appearance or zoom).
The properties reflect the changes of the map.(The 'arg' argument at the moment isn't implemented and give back only the string 'move').
You can download the control (with all the needed files - source, compiled dll and js library) by clicking here or test it here.
1 commento:
Posta un commento