YOUR PAGE TITLE

/***************************************************************************** * $Id: showgmap.js,v 1.1 2006/09/21 09:57:18 gerardo Exp $ * * Shows a Google map. * * DO NOT COPY THIS FILE! DO NOT KILL CULTURE! * Only soft-link this file. If you copy me in the future it will be more * difficult to update all sites and you will contribute to chaos and * piratery. * * To install a map: * * (1) Get a Google Maps license for your domain. If you don't have a Google * Maps License, or y ou are using a license for another site, Google * Maps will refuse to work. * * You can get a Google Maps License at this URL: * * http://www.google.com/apis/maps/signup.html * * NOTE: You will need a Google Account to sign up for a GMAP License. * * (2) VERY IMPORTANT: your HTML file must be in UTF-8 and XHTML. If not * google maps perhaps will refuse to work correctly. A minimal XHTML * file, with the needed scripts to work with this library, looks like * this: * * * * * YOUR PAGE TITLE * * * * * * * a XHTML 1.0 Strict document! * * * * Please note that you must substitute GMAP_URL with the license * provided by Google in the previous step. * * (2) Add a div box in your page. It *must* have an ID, width and height. * For instance: * *

* * (3) Then add this script just before : * * * * The string "mygmapbox" is the ID of the DIV block. * * Where XPOSITION and YPOSITION are the coordinates of the marker on the * map. ZOOMFACTOR is the scale of the map. * * The last parameter allows to enable/disabled the "debug" or * "development" mode. If enabled it shows a text box that makes easier * to configure the map and choose where to position the marker. You will * learn more about this parameter in the following steps. * * (4) This is the first time you configure this map, so I recommend you to * change XPOSITION, YPOSITION and ZOOMFACTOR and the last parameter by: * * GMapBox("mygmapbox", 4, 5, 6, true); * * (5) Open your web page and you will see the map (centered perhaps on * Nigeria), and one text area below. These text area will show you the * XPOSITION and YPOSITION of the marker and the current ZOOMFACTOR. You * can change the marker position only clicking on the map. This * interface is thought to help you, the designer, to configure the map. * Once you have choose the correct XPOSITION, YPOSITION and ZOOMFACTOR * wrote them down in a paper and fill the parameters on the GMapBox * constructor, and disable the development mode. For instance: * * GMapBox("mygmapbox", 11.284726847, 6.897879797889, 10, false); * * (6) Enjoy your Google Map. * * * --------------------------------------------------------------------------- * MasterASP Portable JavaScript Library * Copyright (C) 2005-2006 MasterASP S.L. * All rights reserved. * Written by Gerardo García Peña * *****************************************************************************/ function GMapBox(div_id, coordx, coordy, zoomfc, debug_mode) { var div = document.getElementById(div_id); var tb, ll; if(!div) throw "You must pass a valid DIV block id." if(GBrowserIsCompatible()) { // basic properties this.curr_marker = null; // choose a div for google maps if(debug_mode) { // create a div for google maps this.gmap_div = document.createElement("div"); this.gmap_div.style.width = div.style.width; this.gmap_div.style.height = div.style.height; div.appendChild(this.gmap_div); // create a text area for debugging messages this.textarea = document.createElement("textarea"); this.textarea.cols = 50; this.textarea.rows = 4; this.textarea.value = "Initializing...\n"; div.appendChild(this.textarea) } else this.gmap_div = div; // create the Google Map this.map = new GMap2(this.gmap_div, { draggableCursor: 'default', draggingCursor: 'default' }); // add controls and configure map behavior this.map.addControl(new GSmallMapControl()); this.map.addControl(new GMapTypeControl()); this.map.addControl(new GScaleControl()); this.map.addControl(new GOverviewMapControl()); this.map.enableDoubleClickZoom(); this.map.enableContinuousZoom(); // set event handlers if(debug_mode) { GEvent.bind(this.map, "click", this, this.onClickEvent); GEvent.bind(this.map, "zoomend", this, this.onZoomEndEvent); } // if latitude, longitude and/or zoom are not defined, // then center map on spain by default if(coordx == undefined || coordx == null) coordx = 40.044; if(coordy == undefined || coordy == null) coordy = -3.955; if(zoomfc == undefined || zoomfc == null) zoomfc = 5; // create a GLatLng object ll = new GLatLng(coordx, coordy); // center and zoom map this.map.setCenter(ll, zoomfc); // create the marker and add it to the map this.setMarkerPosition(ll); if(this.textarea) this.textarea.value = "Running!"; } } GMapBox.prototype.showMarkerCoords = function() { var p; if(this.textarea && this.curr_marker) { p = this.curr_marker.getPoint(); this.textarea.value = "lat(x) = " + p.lat() + "\n" + "lng(y) = " + p.lng() + "\n" + "zoom = " + this.map.getZoom() + "\n"; } } GMapBox.prototype.setMarkerLatLng = function(ll) { var point; this.setMarkerPosition(this.map.fromLatLngToDivPixel(ll)); } GMapBox.prototype.setMarkerPosition = function(point) { if(!this.curr_marker) { this.curr_marker = new GMarker(point); this.map.addOverlay(this.curr_marker); } else this.curr_marker.setPoint(point); this.map.panTo(point); this.showMarkerCoords(); } GMapBox.prototype.onClickEvent = function(marker, point) { var obj = this; function timeoutfunc() { if(obj.map.isLoaded() && point && (!obj.curr_marker || !point.equals(obj.curr_marker.getPoint()))) { obj.setMarkerPosition(point); obj.showMarkerCoords(); } obj.click_timeout = null; } if(this.click_timeout) { window.clearTimeout(this.click_timeout); this.click_timeout = null; } else this.click_timeout = window.setTimeout(timeoutfunc, 250); } GMapBox.prototype.onZoomEndEvent = function(oldlevel, newlevel) { obj.showMarkerCoords(); }