`
PBFox
  • 浏览: 68023 次
  • 性别: Icon_minigender_1
  • 来自: China
文章分类
社区版块
存档分类
最新评论

google maps api

GoogleASPJavaScriptCSS 
阅读更多
接boss通知，要做个google maps 的api。查了半天资料才做完。记录下来。
<html>
<head>
<title>test api</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">




<link href="Master_css/MainText.css" rel="stylesheet" type="text/css">






<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAJD2Snk25Y9uAaQTw7Kcw5hRVONFdgXKkercVFY95QYcMiLDUeRSjVyzAndJy9DVVirA4zWs0k45ArA"
type="text/javascript"></script>








</head>

<body onUnload="GUnload()" onResize="javascript:location.reload();" background="../Master_Images/sp.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad=";P7_autoHide('Auberge','Boat','Cabopino','CaimanIslands','CampoReal','CasaVelhadoPalheiro','CasteldeBellvigne','CotswoldHouse','ElLagos','Experience','Hacienda','LaPerla','LinthwaiteHouse','Members','MontTremblant','MontedeCasel','Morocco','Palheiro','SaBassaRotja','T5','VillarsGryon','abouts','uk') ">

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="0" align="center" valign="middle">
<table width="929" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="0" valign="bottom"><div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="54%" valign="bottom">&nbsp;</td>
<td width="46%"><div align="right"></div></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td height="30">&nbsp;</td>
</tr>
<tr>
<td height="0"> <table width="929" border="0" cellpadding="0" cellspacing="0" background="../Master_Images/Destinations_Back.gif">
<tr>
<td width="269" height="385" valign="top"> <table width="269" height="384" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="269" height="50"><img src="../Master_Images/Destinations_Head.gif" alt="Dhead" width="269" height="50"></td>
</tr>
<tr>
<td height="0" align="left" valign="top"><div align="center">
<table width="226" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1">&nbsp;</td>
<td width="225">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><font color="#CCCCCC" size="2" face="Verdana, Arial, Helvetica, sans-serif">Where
are you inderested in going to?</font></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><form name="my_form">
<select class=d name=qty1 size=1 onChange="hmm(selectedIndex)">
<option selected value="0">Select A Region
</option>
<option value="1">Europe</option>
<option value="2">world</option>

</select>
</form>


</td>
</tr>
</table>
</p>
<div align="left"></div>
<table width="226" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" valign="top">&nbsp;</td>
<td width="225"><font color="#CCCCCC" size="2" face="Verdana, Arial, Helvetica, sans-serif">What
type of holiday do you want? </font></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><form name="my_form2">
<select class=d name=select size=1 onChange="hss(selectedIndex)">
<option selected value="0">All </option>
<option value="1">Villas & Apartments</option>
<option value="2">Hotel</option>
<option value="2">Specialist Holidays</option>
<option value="2">In Development</option>
</select>
</form></td>
</tr>
</table>




<p>
</p>
<p>&nbsp; </p>
</div></td>
</tr>
<tr>
<td height="0" valign="middle">&nbsp;</td>
</tr>
</table></td>
<td width="660" height="0" align="center" valign="middle"> <div align="center">
<div id="map" style="width: 630px; height: 370px"></div>
</div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="0" valign="top"><img src="../Master_Images/Footer.gif" width="929" height="4"></td>
</tr>
<tr>
<td height="0"> <img src="../Master_Images/sp.gif" width="6" height="19"></td>
</tr>
<tr>
<td height="30"><div align="center">
<p class="MasterTextFoRFoorty">&nbsp;</p>
</div></td>
</tr>
</table>
</td>
</tr>
</table>

<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>


<script type="text/javascript">
//<![CDATA[

if (GBrowserIsCompatible()) {

var baseIcon = new GIcon();
baseIcon.iconSize=new GSize(12, 20);
baseIcon.shadowSize=new GSize(30,10);
baseIcon.iconAnchor=new GPoint(10,34);
baseIcon.infoWindowAnchor=new GPoint(16,0);


var villas_apartmentas = new GIcon(baseIcon, "http://labs.google.com/ridefinder/images/mm_20_red.png", null, "http://maps.google.com/mapfiles/kml/pal2/icon27s.png");
var hotel = new GIcon(baseIcon, "http://labs.google.com/ridefinder/images/mm_20_blue.png", null, "http://maps.google.com/mapfiles/kml/pal2/icon56s.png");
var newresorts = new GIcon(baseIcon, "http://labs.google.com/ridefinder/images/mm_20_green.png", null, "http://maps.google.com/mapfiles/kml/pal5/icon14s.png");
var SpecialistHolidays = new GIcon(baseIcon, "http://labs.google.com/ridefinder/images/mm_20_black.png", null, "http://maps.google.com/mapfiles/kml/pal5/icon14s.png");
var ishow=0;



function createMarker(point,html,icon, tooltip) {
var marker = new GMarker(point,{icon:icon, title:tooltip});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}



// Display the map, with some controls and set the initial location
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 20.303418,-0.351562), 2);



// zoom
var europePoint = new GLatLng( 44.71, 10.28 );
var worldPoint = new GLatLng( 20.303418,-0.351562);




<!--
function hmm(n){switch (n)
{
case 1 :
{ map.setZoom( 3 ); map.panTo( europePoint ); return false; };

break

case 2 :
{ map.setZoom( 2); map.panTo( worldPoint ); return false; };

}

}


<!--add a function for selectbox-->

function hss(n){
map.clearOverlays();
switch (n)
{
case 0 :
{
showVillas();
showHotels();
showSpecialistHolidays();
showNewresorts();
break;
};

case 1 :
{ showVillas(); break;};
case 2 :
{showHotels(); break;};
case 3 :
{ showSpecialistHolidays(); break;};
case 4 :
{ showNewresorts(); break;};

}

}


// -->


//show category of villas_apartmentas
function showVillas()
{
// Spain -----------------------------------------------------------------------------------------


//Los Flamingos Tee 5 //villas_apartmentas
var point = new GLatLng(36.476316,-5.051326);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA=W_LosFlamingosTee5"><img src="../Master_Images/Destinations_t5.gif" width="169" height="192" border="0"></a></div>', villas_apartmentas, 'Los Flamingos Tee 5')
map.addOverlay(marker);

//El Lago Costa del Sol, Spain //villas_apartmentas
var point = new GLatLng(36.470614,-5.051361);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA=W_ElLagoLosFlamingos"><img src="../Master_Images/Destinations_ElLago.gif" width="169" height="192" border="0" > </a></div>', villas_apartmentas, 'El Lago')
map.addOverlay(marker);

//The Landings:
var point = new GLatLng(51.668014,-1.913895);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA=W_TheLandings"><img src="../Master_Images/Destinations_TheLandings.gif" width="169" height="192" border="0" ></a></div>', villas_apartmentas, 'The Landings')
map.addOverlay(marker);

//France -----------------------------------------------------------------------------------------

//Chalet Grassonets Chamonix, France //villas_apartmentas
var point = new GLatLng( 45.968810,6.915550);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA=""><img src="../Master_Images/Destinations_ChaletGrassone.gif" width="169" height="192" border="0" ></a></div>', villas_apartmentas, 'Chalet Grassonets')
map.addOverlay(marker);


//South Africa -----------------------------------------------------------------------------------------

//Blueviews Penthouse Camps Bay, Cape Town, //villas_apartmentas
var point = new GLatLng(-33.960211,18.375277);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA="><img src="../Master_Images/Destinations_SA.gif" width="169" height="192" border="0" ></a></div>', villas_apartmentas, 'Tranquility')
map.addOverlay(marker);

//Carribean -----------------------------------------------------------------------------------------

//Hawksbill House Tobabago, Carribean
var point = new GLatLng(11.225214,-60.774993);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA="><img src="../Master_Images/Destinations_HawksbillHouse.gif" width="169" height="192" border="0" ></a></div>', villas_apartmentas, 'Hawksbill House')
map.addOverlay(marker);


//Crete -----------------------------------------------------------------------------------------

//Pleiades Villa Aghios Nikolaos, Crete
var point = new GLatLng(35.150793,25.724487);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA="><img src="../Master_Images/Destinations_PleiadesVilla.gif" width="169" height="192" border="0" ></a></div>', villas_apartmentas, 'Pleiades Villa')
map.addOverlay(marker);

// Mallorca -----------------------------------------------------------------------------------------

// La Perla Camp de Mar
var point = new GLatLng(39.541923,2.421836);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA=W_LaPerlaCampdeMar"><img src="../Master_Images/Destinations_LaPerla.gif" width="169" height="192" border="0" ></a></div>', villas_apartmentas, 'La Perla')
map.addOverlay(marker);

//Campo Real
var point = new GLatLng(39.032652,-9.238815);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA=W_CampoReal"><img src="../Master_Images/Destinations_CampoReal.gif" width="169" height="192" border="0" ></a></div>', villas_apartmentas, 'Campo Real')
map.addOverlay(marker);


// Corfu -----------------------------------------------------------------------------------------
//Amphithea //villas_apartmentas
var point = new GLatLng(39.724088,19.894180);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA="><img src="../Master_Images/Destinations_Amphithea.gif" width="169" height="192" border="0" ></a></div>', villas_apartmentas, 'Amphithea')
map.addOverlay(marker);

// Portugal -----------------------------------------------------------------------------------------
//Sotavento //villas_apartmentas
var point = new GLatLng(37.036406,-8.024654);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA="><img src="../Master_Images/Destinations_Sotavento.gif" width="169" height="192" border="0" ></a></div>', villas_apartmentas, 'Sotavento')
map.addOverlay(marker);
};
//show category of hotel
function showHotels()
{
// Spain -----------------------------------------------------------------------------------------


//Hacienda San Jose Costa del Sol, Spain //Hotels
var point = new GLatLng(36.548845,-4.717855);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA=W_HaciendaSanJose"><img src="../Master_Images/Destinations_HaciendaSanJos.gif" width="169" height="192" border="0"></a></div>', hotel, 'Hacienda San Jose')
map.addOverlay(marker);




// uk -----------------------------------------------------------------------------------------

//Cotswold House Hotel
var point = new GLatLng(52.050494,-1.781925);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA=W_Cotswold%20House"><img src="../Master_Images/Destinations_CotswoldHouse.gif" width="169" height="192" border="0" ></a></div>', hotel, 'Cotswold House')
map.addOverlay(marker);


//Linthwaite House:
var point = new GLatLng(54.352804,-2.913608);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA=W_LinthwaiteHouse"><img src="../Master_Images/Destinations_Linthwaite-Hou.gif" width="169" height="192" border="0" ></a></div>', hotel, 'Linthwaite House')
map.addOverlay(marker);





//L'Auberge, Chateau de Berne // hotel
var point = new GLatLng(43.524219,6.330957);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA="><img src="../Master_Images/Destinations_LAubergeChatea.gif" width="169" height="192" border="0" ></a></div>', hotel, 'L Auberge Chateau de Berne')
map.addOverlay(marker);






//Sa Bassa Rotja Porreres
var point = new GLatLng(39.493472,3.045551);
var marker = createMarker(point,'<div style="width:170px"><a href="Brochure.asp?UA=W_SaBassaRotja"><img src="../Master_Images/Destinations_Sa-Bassa-Rotja.gif" width="169" height="192" border="0" ></a></div>', hotel, 'Sa Bassa Rotja')
map.addOverlay(marker);


//Marrakech -----------------------------------------------------------------------------------------
// La Sultana La Sultana,
var point = new GLatLng(31.616962,-7.988756 );
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA=W_LaSultana"><img src="../Master_Images/Destinations_La-Sultana.gif" width="169" height="192" border="0" ></a></div>', hotel, 'La Sultana')
map.addOverlay(marker);


//Portugal-----------------------------------------------------------------------------------------
//Monte do Casal Algarve,
var point = new GLatLng(37.084203,-7.873952);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA=W_MontedoCasal"><img src="../Master_Images/Destinations_MontedoCasal.gif" width="169" height="192" border="0" ></a></div>', hotel, 'Monte do Casal')
map.addOverlay(marker);


// Quebec -----------------------------------------------------------------------------------------
// Ermitage DU Lac Mont Tremblant,
var point = new GLatLng(46.769968,-74.663086);
var marker = createMarker(point,'<div style="width:180px"> <a href="Brochure.asp?UA=W_ErmitageduLac"><img src="../Master_Images/Destinations_Ermitage-du-La.gif" width="169" height="192" border="0" ></a></div>', hotel, 'Ermitage Du Lac' )
map.addOverlay(marker);


// Turks and Caicos Islands -----------------------------------------------------------------------------------------
//Grace Bay Club
var point = new GLatLng(21.7994467,-72.172757);
var marker = createMarker(point,'<div style="width:180px"> <a href="Brochure.asp?UA=W_GraceBayClub"><img src="../Master_Images/Destinations_Grace-Bay-Club.gif" width="169" height="192" border="0" ></a></div>', hotel, 'Grace Bay Club')
map.addOverlay(marker)


// Madeira -----------------------------------------------------------------------------------------




//Casa Velha do Palheiro
var point = new GLatLng(32.650369,-16.867328);
var marker = createMarker(point,'<div style="width:180px"><a href=""><img src="../Master_Images/Destinations_CasaVelhadoPal.gif" width="169" height="192" border="0" ></a></div>', hotel, 'Casa Velha do Palheiro')
map.addOverlay(marker);

};
//show category of Specialist Holidays
function showSpecialistHolidays()
{
// Spain -----------------------------------------------------------------------------------------



//Canal du Midi // Specialist Holidays
var point = new GLatLng(43.683764,4.526367);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA="><img src="../Master_Images/Destinations_CanalduMidi.gif" width="169" height="192" border="0" ></a></div>', SpecialistHolidays, 'Canal du Midi' )
map.addOverlay(marker);




// Prague -----------------------------------------------------------------------------------------
//Eastern Europe Tour newresorts
var point = new GLatLng(50.083582,14.420929);
var marker = createMarker(point,'<div style="width:180px"> <a href="Brochure.asp?UA="><img src="../Master_Images/Destinations_EasternEuropeT.gif" width="169" height="192" border="0" ></a></div>', SpecialistHolidays, 'Eastern Europe Tour' )
map.addOverlay(marker);


// Kenya -----------------------------------------------------------------------------------------
//African Tour //newresorts
var point = new GLatLng(-1.340209,36.826171);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA="><img src="../Master_Images/Destinations_AfricanTour.gif" width="169" height="192" border="0" ></a></div>', SpecialistHolidays, 'African Tour')
map.addOverlay(marker);



};
//show category of In Development
function showNewresorts()
{
// Spain -----------------------------------------------------------------------------------------


//Castel de Bellevigne// In Development
var point = new GLatLng(44.895707,-0.155782);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA="><img src="../Master_Images/Destinations_CasteldeBellev.gif" width="169" height="192" border="0" ></a></div>', newresorts, 'Castel de Bellevigne')
map.addOverlay(marker);


// Madeira -----------------------------------------------------------------------------------------


//Palheiro Village //In Development
var point = new GLatLng(32.656647,-16.859765);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA="><img src="../Master_Images/Destinations_PalheiroVillag.gif" width="169" height="192" border="0" ></a></div>', newresorts, 'Palheiro Village')
map.addOverlay(marker);



// Adriatic Base -----------------------------------------------------------------------------------------
//Sealine Motor Yacht // newresorts
var point = new GLatLng(43.460893,16.439667);
var marker = createMarker(point,'<div style="width:180px"><a href="Brochure.asp?UA="><img src="../Master_Images/Destinations_SealineMotorYa.gif" width="169" height="192" border="0" ></a></div>', newresorts, 'Sealine Motor Yacht')
map.addOverlay(marker);



};

showVillas();
showHotels();
showSpecialistHolidays();
showNewresorts();

}

// display a warning if the browser was not compatible
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}

//</XMLCDATA>

</script>
</body>
</html>
<%
Recordset1.Close()
Set Recordset1 = Nothing
%>
<!-- This page was Last Update : 25/11/07 -->



















分享到：
| rubyonrails:生成PDF文档
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Google Maps API编程资源大全

    Google Maps API是Google提供的一项强大的服务，允许开发者在自己的应用程序中集成地图功能，进行地理位置相关的开发。这个"Google Maps API编程资源大全"包含了丰富的资料，帮助开发者深入理解和使用这一技术。 ...

    图书Google Maps API开发大全的各章源码

    《图书Google Maps API开发大全》是一本深入探讨Google Maps API技术的专业书籍，旨在帮助开发者全面理解和熟练运用这一强大的地图服务接口。源码文件名为"code"，包含了书中各个章节的示例代码，使得读者能够通过...

    Google Maps API开发大全

    《Google Maps API开发大全》是针对开发者们深入学习和应用Google Maps API的重要参考资料。Google Maps API是Google提供的一项强大服务，允许开发者将地图功能集成到自己的网站或应用程序中，实现地图展示、定位、...

    Google Maps API开发大全code

    《Google Maps API开发大全code》是一份详尽的资源，旨在帮助开发者深入理解和熟练运用Google Maps API进行地图应用的开发。Google Maps API是Google提供的一项服务，允许开发者将地图功能集成到自己的网站或应用...

    Google Maps API v3 (3.16.2) 离线开发包

    **Google Maps API v3 (3.16.2) 离线开发包** Google Maps API（应用程序编程接口）是Google提供的一项服务，允许开发者在自己的网页或应用中嵌入交互式地图。版本3，也称为V3，是Google Maps API的最新版本，它...

    Google Maps API V3 中文参考文档(JavaScript)

    Google Maps API V3 中文参考文档（JavaScript） Google Maps API V3 是 Google Maps 提供的一款强大的地图应用程序接口，允许开发者在网站或应用程序中轻松嵌入谷歌地图。该 API 的 JavaScript 版本提供了丰富的...

    Google Maps API.pdf

    ### Google Maps API 知识点概述 #### 一、Google Maps API 概念与功能介绍 Google Maps API 是一种强大的工具集，它允许开发者在自己的网站或应用中嵌入并定制 Google 地图。该 API 提供了一系列的功能，使得...

    Google Maps API Android and Javascript Demo

    Google Maps API android demo Eciplse project source code and javacript version Google Maps API and Place Search example html.

    Google maps api

    【Google Maps API】是Google提供的一项服务，允许开发者在自己的网站上嵌入和自定义Google Maps功能。这个API为Web开发者提供了丰富的工具，使他们能够创建互动式、个性化地图，集成到自己的应用程序或网站中。以下...

    Google_Maps_API_V3.rar_Google Maps api v3_谷歌地图

    Google Maps API V3 是谷歌为开发者提供的一个强大工具，用于在网站或应用程序中集成交互式地图功能。这个API允许开发人员自定义地图显示的内容、样式以及交互方式，从而构建出各种基于地理位置的应用。在Google ...

    Google Maps API示例CHM文档

    Google Maps API示例CHM文档下载

    获取Google Maps APIKey

    获取 Google Maps API Key 在 Android 开发中，获取 Google Maps API Key 是一个重要的步骤，特别是对于初学者来说。下面将详细介绍如何获取 Google Maps API Key。 获取证书指纹（SHA1） 在获取 Google Maps API...

    Google Maps API开发大全 (华章原创精品) - 陈育春.mobi

    Google Maps API开发大全 (华章原创精品) - 陈育春.mobi

    Google Maps API 开发大全

    《Google Maps API 开发大全》是一本全面深入探讨Google Maps API技术的专著，旨在帮助开发者充分利用这个强大的工具集来创建交互式地图应用。书中详细介绍了如何集成Google Maps API到各种项目中，从基础概念到高级...

    Google Maps API深度历险

    ├─07 Google Maps API深度历险 │ ├─7.1 导入Google Maps API库 │ │ ├─7.1.2 导入不同语言的Google Maps API库文件 │ │ └─7.1.3 在不同URL地址下使用Google Maps API │ ├─7.2 挖掘Google Maps API中...

    Google Maps API开发大全 （华章原创精品）.azw3

    Kindle资源，Google Maps API开发大全。可使用Kindle PC端的软件阅读。

    基于Google Maps API的网络地图服务系统的研究与应用.pdf

    "基于Google Maps API的网络地图服务系统的研究与应用" 摘要：本文研究了基于Google Maps API的网络地图服务系统的设计与实现。Google Maps API是一种开放式、低成本和易用的API，能够快速构建小型的WebGIS服务。...

    基于GOOGLE MAPS API的课程设计作业

    在本课程设计作业中，你将使用GOOGLE MAPS API来构建一个WebGIS应用，它主要功能包括浏览地图、查询地标以及路线规划。这是一次深入理解和应用谷歌地图API的好机会，同时也涉及到Web开发的基本技术和GIS（地理信息...

    google maps api PHP版本

    Google Maps API 是一款强大的开发工具，它允许开发者在自己的网站或应用中集成地图功能，提供定位、导航、地理编码、路线规划等服务。本压缩包包含的是 Google Maps API 的 PHP 版本，使得开发者能够在 PHP 后端...

Magicbox
Global site tag (gtag.js) - Google Analytics