第一部分 获取地图key
1、访问 https://code.google.com/apis/console 并登录您的google账户。
2、点击左侧的 Services 菜单。
3、激活 Google Maps API v3 服务。
4、点击左侧的API Access 菜单链接. 从API Access 页，在Simple API Access 部分让你的key变为可用. 然后就可以开发浏览器地图应用了.
您可以看到如下信息：
Key for browser apps (with referers)
API key: AIzaSyCzu9hrVrqYM_RxhupnP7yrqXFw8ksQNnc
Referers: http://admin.gps000.com/
Activated on: Jan 13, 2013 7:20 PM
Activated by: *@gmail.com – you
Key for browser apps (with referers) API key: AIzaSyAY-HsXXPsBUqsbQLDFO8kpNWLANwH0E7k
Referers: Any referer allowed
Activated on: Jan 13, 2013 6:48 PM
Activated by: *@gmail.com – you
第二部分 googleJS地图特性
1、支持HTML5：<!DOCTYPE html>
2、提供函数库：https://developers.google.com/maps/documentation/javascript/libraries
3、提供快速通道示例：
Developer’s Guide
https://developers.google.com/maps/documentation/javascript/tutorial#api_key,
https://developers.google.com/maps/documentation/javascript/examples/?hl=zh-CN
4、HTTPS请求（API加载）地图：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE" type="text/javascript"></script>
5、地图配置：
var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP};
6、地图种类：
mapTypeId: google.maps.MapTypeId.ROADMAP
ROADMAP 基本地图，默认为2D瓦片图层
SATELLITE 显示图片摄影图层
HYBRID 突出显示道路目标的图片底图层
TERRAIN 物理图层，显示河流山脉等等
注：使用基本地图包含了以上所有您想知道的信息。
7、地图标签：
<div id="map_canvas" style="width: 100%; height: 100%"></div>
8、支持异步加载API：
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map =
new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
function loadScript() {
var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize"; document.body.appendChild(script);
}
9、展示地图
/**
* GOOGLE地图使用帮助类
* @version javascript_API V3
* @author PengJunlin
* @write-date 2013-1-14
*/
(function(){
/**
* 创建命名空间
*/
window.com={};
com.gmap={};
com.gmap.map={};
var map={};
/**
* 初始化参数
*/
com.gmap.map.constant={
//地图容器
DIV:"map_canvas",
//地图KEY
KEY:"AIzaSyAY-HsXXPsBUqsbQLDFO8kpNWLANwH0E7k",
//允许使用传感器
SENSOR:false
}
com.gmap.map.Util={
//默认显示成都市地图
init:function(){
var mapOptions ={
center: new google.maps.LatLng(30.68734343, 104.002308),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById(com.gmap.map.constant.DIV),mapOptions);
},
//异步加载地图
asyncLoadMap:function(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key="+com.gmap.map.constant.KEY+"&sensor="
+com.gmap.map.constant.SENSOR+"&callback="+this.init();
document.body.appendChild(script);
}
};
})();
$(document).ready(function(){
com.gmap.map.Util.init();//加载地图
//com.gmap.map.Util.asyncLoadMap();//异步加载地图API
});
分享到：
相关推荐
Google Maps API V3 中文参考文档（JavaScript） Google Maps API V3 是 Google Maps 提供的一款强大的地图应用程序接口，允许开发者在网站或应用程序中轻松嵌入谷歌地图。该 API 的 JavaScript 版本提供了丰富的...
谷歌地图 Google Map API V3 是一个基于 JavaScript 的 API，允许开发者在自己的网站或应用程序中嵌入谷歌地图。该 API 提供了一个强大的地图引擎，支持多种类型的地图、标记、路线规划、地标显示等功能。 在谷歌...
在本文中，我们将深入探讨Google Maps API的第三版（V3），主要关注V3地图搜索、地图标注以及多点标注的实现。Google Maps API V3是Google提供的一个强大的JavaScript库，用于在网页上嵌入交互式地图，进行地理位置...
**谷歌地图API V3详解** 谷歌地图API（Google Maps API）是谷歌提供的一套用于在网页上嵌入交互式地图的开发工具。V3版本是其一个重要的更新，旨在提高性能、简化API接口并减少对JavaScript库的依赖。这篇博文将...
Google Maps Javascript API V3 Reference 适用于页面调用谷歌地图，弹出窗口等功能
Google Maps API V3 是谷歌为开发者提供的一个强大工具，用于在网站或应用程序中集成交互式地图功能。这个API允许开发人员自定义地图显示的内容、样式以及交互方式，从而构建出各种基于地理位置的应用。在Google ...
在实际应用中，"puerMap"可能是一个包含这些离线地图资源的目录或者文件名，它可能包含了不同缩放级别的地图瓦片图片，以及必要的JavaScript库和配置文件，用于驱动Google Map V3的离线功能。开发者可能需要编写额外...
### 谷歌地图v3案例详解 #### 一、背景介绍 谷歌地图API是开发者常用的工具之一，它为网站提供了强大的地图功能。随着技术的发展，谷歌地图API也经历了多个版本的迭代。其中，v2版本曾广泛使用，但随着时间推移，...
Google Maps JavaScript API V3 是一个功能强大且灵活的地图服务接口，允许开发者轻松地将交互式地图集成到他们的网站或应用中。相比于之前的版本，V3 提供了更多增强功能，并优化了性能，使其成为目前最流行的地理...
**Google Map V3 API**是谷歌提供的一种用于在网页中集成地图功能的接口，它允许开发者利用JavaScript语言创建交互式的地图应用。这个API是Google Maps API的第三个主要版本，提供了更多的功能、更好的性能以及更...
Google Maps JavaScript API V3 是一款强大的工具，允许开发者在网页中集成互动式地图，为用户提供丰富的地理位置体验。API 的第三版相较于第二版进行了更新和优化，提供了更多功能，同时也废弃了一些旧有的接口。在...
Google Maps JavaScript API V3是Google提供的一套用于在网页上集成和操作地图的JavaScript库。这个API允许开发者利用JavaScript编程语言，为网站构建高度定制化的地图功能，包括但不限于显示地图、标记位置、路径...
谷歌地图JavaScript API V3是谷歌提供的用于在网页中嵌入交互式地图的服务。这个API允许开发者通过JavaScript编程语言创建各种地图应用，包括自定义标记、信息窗口、路线规划、地理编码、以及各种地图样式和控件。V3...
JavaScript调用Google Map API V3是一项常见的Web开发任务，它允许开发者在网页中嵌入交互式地图，并根据需求进行自定义。以下是对这个经典教程的详细解析： 1. **目标** - 整个教程旨在教会读者如何利用...
谷歌地图V3离线实例是基于谷歌地图API V3版本的一个功能展示，它允许开发者在没有网络连接的情况下依然可以使用地图服务。这个实例演示了如何结合离线地图数据和谷歌地图API来创建一个本地化的地图体验。下面我们将...
总之，Google Maps JavaScript API V3 是一个强大且易于使用的工具，它提供了丰富的地图操作功能，同时优化了移动设备上的用户体验。开发者可以通过学习和实践，利用这个 API 创建出各种创新的地理位置应用。如果在...
### Google Maps API V3 开发必备知识点 ...无论是简单的地图展示还是复杂的地图交互，Google Maps API V3 都能够提供所需的功能和支持。对于开发者而言，熟悉这些API是构建高质量地图应用的基础。
Google API V3，全称Google Maps JavaScript API V3，是Google提供的一套用于在网页上嵌入地图并进行交互操作的JavaScript库。这个API允许开发者通过JavaScript编程来控制Google地图的功能，实现地图显示、标记定位...
Google Maps JavaScript API V3 是一种用于集成交互式地图到网站上的工具。它提供了丰富的功能集，包括地图显示、位置搜索、路线规划等。与之前的版本相比，V3 版本更加灵活且易于扩展，同时也更加强调模块化设计。 ...