一、加载Google maps API

<script type="text/javascript"

src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"></script>

您可以到http://code.google.com/intl/zh-CN/apis/maps/signup.html注册申请自己的API

二、加载简单的Google地图

1、  加载Google地图

//声明一个GMap2全局变量

var map;

function load()

{

//检查浏览器的兼容性.

if (GBrowserIsCompatible())

{

map = new GMap2(document.getElementById("map")); //加载地图

map.addControl(new GLargeMapControl()); //增加全功能控件

map.addControl(new GMapTypeControl()); //设置地图类型

map.enableScrollWheelZoom(); //设置地图支持滚轮

map.setCenter(new GLatLng(39.990168, 116.295304), 10); //设置地图的中心坐标

map.enableDoubleClickZoom(); //开启双击google map会自动放大.

map.enableScrollWheelZoom(); //开启滚动鼠标自动放大和缩小.

//

}

}

2、  添加一个创建GMarker的方法

function createMarker(baseIcon, point, html)

{

var icon = new GIcon(baseIcon);

var marker = new GMarker(point, icon);

GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });

return marker;

}

3、  调用这个GMarker方法

var icon = new GIcon(G_DEFAULT_ICON);

var point = new GPoint(116.429114, 39.934322);

var html = '<div ><font color="blue">HelloWorld！</font></div>';

var marker = createMarker(icon, point, html);

map.addOverlay(marker);

这样一个简单的HelloWorld就显示出来了

通过这个例子我们可以了解到GMap2、GMarker、GIcon这几个核心类的基本应用

最后看看我截得图：

源文件下载

这几天整理了一下V3的版本，V3相比V2还是有很大进步的，比如烦人的api引用，发布的时候非常不爽；清爽的api对象，比以前精简不少对象，但是功能却没有打折扣……还有很多等着我们去挖掘，总之是

用的非常爽，废话不多说了，实现同样的功能V3的代码如下：

<html>

<head>

<title></title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

var map;

function load() {

var myLatlng = new google.maps.LatLng(39.934322, 116.429114);

var myOptions = {

//这里的参数可以为多个参数，具体参考MapOptions对象

zoom: 5,

center: myLatlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

map = new google.maps.Map(document.getElementById("map"), myOptions);

var marker = new google.maps.Marker({

//可以为多个参数，具体参考MarkerOptions对象

map: map,

position: myLatlng

});

google.maps.event.addListener(marker, 'click', function(event) {

//这里的infoWindow的参数可以为多个对象，具体可以参考InfoWindowOptions对象

var html = '<div ><font color="blue">HelloWorld!</font></div>';

var infowindow = new google.maps.InfoWindow({ content: html });

infowindow.open(map, marker);

});

}

</script>

</head>

<body onload="load()">

<table border="2" id="table1" bordercolor="#FF0000">

<tr>

<td>

<div id="map" style="width:800px; height:480px"></div>

</td>

</tr>

</table>

</body>

</html>

Google maps API开发（一）(转)的更多相关文章

  1. Google maps API开发

    原文:Google maps API开发 Google maps API开发(一) 最近做一个小东西用到google map,突击了一下,收获不小,把自己学习的一些小例子记录下来吧 一.加载Googl ...

  2. Google maps API开发（二）(转)

    这一篇主要实现怎么调用Google maps API中的地址解析核心类GClientGeocoder: 主要功能包括地址解析.反向解析.本地搜索.周边搜索等, 我这里主要有两个实例: 实例一.当你搜索 ...

  3. Google Maps API V3 之绘图库 信息窗口

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  4. Google Maps API V3 之 图层

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  5. Google Maps API V3 之 路线服务

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  6. Google Maps API Web Services

    原文:Google Maps API Web Services 摘自:https://developers.google.com/maps/documentation/webservices/ Goo ...

  7. google maps api申请的问题

    现在已经改由统一的GOOGLE API控制台进行所有GOOGLE API的管理了. 方法是使用Google帐号登入 https://code.google.com/apis/console. 然后在所 ...

  8. Google Maps API Key申请办法（最新）

    之前的Google Maps Api的API Key很容易申请,只需要按照一个简单的表单提交部署的网站地址即可,自动生成API Key并给出引用的路径. 但是最近在处理另外一个项目的时候发现之前的这种 ...

  9. 如何插入谷歌地图并获取javascript api 秘钥--Google Maps API error: MissingKeyMapError

    参考:https://blog.csdn.net/klsstt/article/details/51744866 Google Maps API error: MissingKeyMapError h ...

随机推荐

  1. [swustoj 1095] 挖金子

    挖金子(1095) 题目描述 你在一个N*M的区域中,一开始在(1,1)的位置,每个位置有可能有金子,也有可能不能到达,也有可能有传送门.你只能往右或者下走,不能走出这个区域.当你位于传送门时,传送门 ...

  2. android studio 安装总结

    Android Studio 的安装和配置篇(Windows篇<转> http://www.jianshu.com/p/fc03942548cc# 中间gradle下载比较慢:解决方法 需 ...

  3. ShopNc商城修改详情

    1. 修改400电话.(400.png) a.位置:在页面顶部搜索的后面. b.修改文件: t/layout/home_layout.php 增标签 <img border=0 src=&quo ...

  4. c语言中较常见的由内存分配引起的错误_内存越界_内存未初始化_内存太小_结构体隐含指针

    1.指针没有指向一块合法的内存 定义了指针变量,但是没有为指针分配内存,即指针没有指向一块合法的内浅显的例子就不举了,这里举几个比较隐蔽的例子. 1.1结构体成员指针未初始化 struct stude ...

  5. 《深入Java虚拟机学习笔记》- 第18章 finally子句

    本章主要介绍字节码实现的finally子句.包括相关指令以及这些指令的使用方式.此外,本章还介绍了Java源代码中finally子句所展示的一些令人惊讶的特性,并从字节码角度对这些特征进行了解释. 1 ...

  6. python 网络编程（一）---基础

    1.理解TCP 1.1 寻址 首先任何基于TCP/IP的网络,每台机器都有唯一的IP地址,只需要知道接受者机器的IP地址,信息就可以传送过去. 其次,TCP通过使用端口号来知道机器究竟是哪个程序应该接 ...

  7. python 网络编程（三）---TCP 服务器端客户端实现

    客户端 客户端主要有4个步骤: 1)创建一个socket以连接服务器. socket = socket.socket(family, type),family参数代表地址家族,可为AF_INET(包括 ...

  8. input子系统 KeyPad-Touch上报数据格式与机制

    -----------------------------------------------------------------------本文系本站原创,欢迎转载!转载请注明出处:http://b ...

  9. bzoj 1058 [ZJOI2007]报表统计（set）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1058 [题意] 一个序列,提供插入,查询相邻最小差值,查询任意最小差值的操作. [思路 ...

  10. Hive基础介绍

    HIVE结构 Hive 是建立在 Hadoop 上的数据仓库基础构架.它提供了一系列的工具,可以用来进行数据提取转化加载(ETL),这是一种可以存储.查询和分析存储在 Hadoop 中的大规模数据的机 ...