<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default12.aspx.cs" Inherits="Default12" %> <%@ Register TagPrefix="ajaxToolkit" Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Google Maps JavaScript API Example</title> <script type="text/javascript"> function OpenModalPopup(ModalId, xParam, yParam, divID) { var popup = $find(ModalId); popup.show(); load(xParam, yParam, divID); } function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl()); map.setCenter(new GLatLng(0,0),0); // create bounds object used for calculating the zoom level and center dynamicaly var bounds = new GLatLngBounds(); // Creates a marker at the given point with the details function createMarker(point, description) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(description); }); return marker; } //iterate trough the location and descriptions for (var i = 0; i < descriptions.length; i++) { var lat = parseFloat(coordinates[i*2]); var lon = parseFloat(coordinates[(i*2) + 1]); var point = new GLatLng(lat, lon); var d = descriptions[i] //extend the bounds with the current point bounds.extend(point); map.addOverlay(createMarker(point, descriptions[i])); } //finaly set the zoom level and center acording to the markers set on the map map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); } } var coordinates = new Array('61.8052','21.6417','61.6052','21.8417', '61.4052','22.0417','61.2052','22.2417', '61.0052','22.4417','60.8052','22.6417', '60.6052','22.8417','60.4052','23.0417', '60.2052','23.2417','60.0052','23.4417'); var descriptions = new Array('<div><strong>Point 1<strong></div>', '<div><strong>Point 2<strong></div>', '<div><strong>Point 3<strong></div>', '<div><strong>Point 4<strong></div>', '<div><strong>Point 5<strong></div>', '<div><strong>Point 6<strong></div>', '<div><strong>Point 7<strong></div>', '<div><strong>Point 8<strong></div>', '<div><strong>Point 9<strong></div>', '<div><strong>Point 10<strong></div>'); </script> <style type="text/css"> .modalBackground { background-color: #000; filter:alpha(opacity=50); opacity:0.5; } .modalPopup { background-color:#ffffdd; border-width:3px; border-style:solid; border-color:Gray; } </style> </head> <body onunload="GUnload()"> <form id="default" runat="server"> <asp:ScriptManager ID="ScriptManager" runat="server" /> <asp:HyperLink ID="HiddenButton" runat="server" /> <asp:HyperLink ID="Hyperlink1" runat="server" NavigateUrl="#" onclick="javascript:OpenModalPopup('ModalPopup', '72.0052', '21.4417', 'map');">Open Map</asp:HyperLink> <div id="mapContainer" runat="server" class="modalPopup"> <div id="mapHeader" style="cursor: move; width: 600px; height: 30px;"> <div> <p> Google Map Results: <asp:LinkButton ID="CloseMapButton" runat="server" Text="Close Map" /></p> </div> </div> <div id="map" style="width: 600px; height: 500px; position: relative;" /> </div> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="HiddenButton" PopupControlID="mapContainer" BackgroundCssClass="modalBackground" CancelControlID="CloseMapButton" DropShadow="false" BehaviorID="ModalPopup" PopupDragHandleControlID="mapHeader" /> </form> </body> </html>
using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class Default12 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Page_Init(object sender, EventArgs e) { if (!Page.IsStartupScriptRegistered("googleMapScript")) { // Register Startup Script for Google Maps API string myScript = "<script type=\"text/javascript\" src=\"" + ConfigurationManager.AppSettings["localhost"] + "\"></script>"; this.Page.ClientScript.RegisterStartupScript(typeof(Page), "googleMapScript", myScript); } } }
2 comments:
This doesn't work. The modal popup extended does appear, but not the Google map.
The reason the example as published doesn't work is because there's no reference to the Google Maps site! Add the following *inside a script tag* inside the head section near the top of the listing, right after the title tag.
Don't forget to include the closing tag.
src="http://maps.google.com/maps?file=api&v=2&key=abcdef&sensor=false"
type="text/javascript"
When you run the example, you'll see a hyperlink that says "Open Map". When you click it, what will come up is a Google map with markers at the coordinates defined in the coordinates array. These fall in a diagonal line across southwestern Finland.
Jim Collier
cross-comp.com
Los Angeles (coords: 34 N, -118 W)
Post a Comment