本文实现google maps API主要的函数库
html:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Chapter11index.aspx.cs"
Inherits="GoogleMaps.Chapter11index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>地图搜索</title>
<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
@import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
/*common*/div, p, a, span
{
font-size: 13px;
margin: 0;
padding: 0;
border: 0;
}
.wrapper
{
width: 100%;
padding: 2px;
border: 1px solid #979797;
}
/*map-container*/.map-container
{
width: 640px;
height: 500px;
}
.result-panel
{
display: none;
}
/*info-window*/.info-title
{
width: 100%;
padding: 2px 5px;
font-weight: bolder;
font-size: 1.1em;
}
.info-paragraph
{
width: 220px;
float: left;
margin-top: 5px;
}
.info-tip
{
font-size: 0.9em;
color: #666;
margin-bottom: 3px;
}
/*tab*/.tab-head
{
width: 100%; /*height:1.5em;
background-color:#cfcfcf;*/
overflow: auto;
border-bottom: solid #CCD9F2 1px;
}
.tab-item
{
text-align: center;
float: left;
padding: 1px 5px;
cursor: pointer;
color: #0000FF;
}
.active-tab
{
/*border:solid #666666 1px;
border-bottom:solid #FFF 1px;
background-color:#FFF;*/
color: #000;
font-weight: bold;
text-decoration: none;
}
.tab-content
{
padding-top: 5px;
display: none;
}
.wrapper .gmls
{
width: 100%;
}
.wrapper .gmls-app
{
border: none;
}
.wrapper .gmls-search-form
{
padding: 2px;
margin: 0;
}
.info-button, .traffic-button
{
border: #000000 solid 1px;
background-color: #FFF;
padding: 1.5px 4px;
cursor: pointer;
}
.wrapper .googledir, .wrapper .googledir table, .wrapper .googledir td, .wrapper .googledir div
{
font-size: 12px;
margin: 0;
padding: 0;
}
</style>
<!-- 添加如下的引用,则可以使用goolge命名空间中的很多对象 -->
<script src="http://www.google.com/jsapi?hl=zh-CN&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<script src="http://ditu.google.cn/?file=api&v=2.x&hl=zh-CN&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script></