原文:点击按钮显示谷歌地图
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication.WebForm1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title></title><script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script><script src="/maps?file=api&v=2&sensor=true&key=ABQIAAAA8B5G0MGppsCNDDpwRLRu6BQrnClq8QSrQDsyF0yBh6Nxb_fPdRRy62PSpSpNN1RgvxBBuP0b63sdXA"type="text/javascript"></script><style type="text/css">.sideDiv{z-index: 9999;margin-bottom: 3px;display: none;position: absolute;border: solid 1px #6e8bde;}.mapDiv{clear: both;}.filterDiv{color: #C7EDCC;background-color: inherit;position: absolute;top: 0px;left: 0px;filter: alpha(opacity=50);}</style><script type="text/javascript">function showDiv(id) {//加载地图 initialize();//在地图后面加一个透明度层，点击这个层的时候移出地图 $("<div id='filterDiv' style='color: #C7EDCC;background-color: inherit;position: absolute;top: 0px;left: 0px;filter: alpha(opacity=50);'></div>").width("100%").height("100%").click(function () { hideDiv(id); }).appendTo("body").fadeIn(200);//显示地图var bgdiv = $("#" + id);bgdiv.css({ "position": "fixed" }).animate({ left: "30%", top: "30%", opacity: "show" }, "slow");}function hideDiv(id) {//移出图层 $("#filterDiv").remove();$("#" + id).animate({ left: "0%", top: "0%", opacity: "hide" }, "slow");}function initialize() {if (GBrowserIsCompatible()) {//加载地图在div中显示var map = new GMap2(document.getElementById("map"));//设置中心坐标,缩放等级map.setCenter(new GLatLng(31.21552, 121.34464), 18);//控制器类型map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 10)));//加入卫星和混合地图标签map.addControl(new GHierarchicalMapTypeControl());//鼠标滑轮控制地图缩放map.enableScrollWheelZoom();//搜索控件，便于快速定位到商家地址map.enableGoogleBar();}}</script></head><body onunload="GUnload();"><form id="form1" runat="server"><input type="button" id="btnTest" value="弹出地图" onclick="showDiv('map');" /><br /><%--<div id='div-id' style="width: 550px; height: 440px; z-index: 9999; display: none;position: absolute; border: solid 1px #6e8bde;">--%><div id="map" class="mapDiv" style="width: 550px; height: 440px; z-index: 9999; display: none;border: solid 1px #6e8bde;"></div><%--</div>--%></form></body></html>
