原文地址

google maps javascript官方文档：https://developers.google.com/maps/documentation/javascript/

在创建地图之前，我们进入 Google Developers Console创建一个key，用于我们开发地图的身份验证（当然，没有key也可以进行接下来的教程）

创建一个简单的地图：

<!DOCTYPE html>

<html>

  <head>

    <title>Simple Map</title>

    <meta name="viewport" content="initial-scale=1.0">

    <meta charset="utf-8">

    //地图的样式

    <style>

      html, body {

        height: 100%;

        margin: 0;

        padding: 0;

      }

      #map {

        height: 100%;

      }

    </style>

  </head>

  <body>

    <div id="map"></div>

    <script>

      var map;

      function initMap() {

	//创建一个地图

        map = new google.maps.Map(document.getElementById('map'), {

          //设置地图的中心点经纬度

          center: {lat: 34, lng: 112},

          //设置地图的缩放级别(0~21)

          zoom: 8

        });

      }

    //google maps javascript API,如果已经创建了key,则可将key后边的YOUR_API_KEY替换为你所得到的key，
    //如果没有key，则可以将 "key=YOUR_API_KEY&callback=initMap"这段代码去掉即可

    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"

    async defer></script>

  </body>

</html>

使用上述代码，则可以创建一个地图了。

如果因为网络问题，无法访问google服务器，则可以将“maps.googleapis.com/maps/api/js”换为“maps.google.cn/maps/api/js”试一下

创建地图的构造函数原型：Map(mapDiv:Node,opts?:MapOptions)

上述代码中的center和zoom就是MapOptions中的两个属性，比较常用的还有：

draggable：bool类型，控制地图是否可以拖动

mapTypeId：HYBRID／ROADMAP／SATELLITE／TERRAIN，四种地图的类型，可以自己动手试下效果

mapTypeControl：bool类型，是否显示可以改变地图类型的控件

maxZoom：设置地图最大缩放等级

minZoom：设置地图最小缩放等级

zoomControl：bool类型，是否显示可以改变地图大小的控件

google maps js v3 api教程(1) -- 创建一个地图的更多相关文章

  1. google maps js v3 api教程(3) -- 创建infowindow

    原文地址 前面我们学习了地图和标记的创建.那么今天我们来学习怎样在地图上显示一个窗口(infowindow) infowindow构造函数为:InfoWindow(opts?:InfoWindowOp ...

  2. google maps js v3 api教程(2) -- 在地图上添加标记

    原文链接 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 我们在创建地图 ...

  3. 使用 ADD-ON SDK 开发 基于 Html JQuery 和 CSS 的 firefox 插件入门教程1: 创建一个简单的 Add-on

    [本文转载自http://sixpoint.me/942/implementing-simple-addon/] 实现一个简单的插件 教程的这个部分带你使用 SDK 来实现, 运行并打包一个插件. 这 ...

  4. 2.4使用属性在 ASP.NET Web API 2 路由创建一个 REST API

    Web API 2 支持一种新型的路由,称为属性路由.属性路由的一般概述,请参阅属性路由 Web API 2 中.在本教程中,您将使用属性路由创建一个 REST API 集合的书.API 将支持以下操 ...

  5. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

  6. （7）nehe教程1 创建一个OpenGL窗口:

    不要用那个nehe ndk了 误人子弟! 转自: 一个窗口,代码可真多啊 http://www.yakergong.net/nehe/ 在这个教程里,我将教你在Windows环境中创建OpenGL程序 ...

  7. js只需5分钟创建一个跨三大平台纯原生APP

    DeviceOne之前介绍过了,现在来介绍一下DeviceOne快速开发到什么程度 使用js只需要5分钟就可以打出垮Android.ios.windows三大平台的纯原生UI的安装包. 只需要6个小时 ...

  8. EF Code First教程-01 创建一个简单的Code First程序

    1 从nuget中搜索并添加EF 2 在app.config或web.config中添加数据库连接 <connectionStrings> <add name="conns ...

  9. 【Leafletjs】1.创建一个地图

    code: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <l ...

随机推荐

  1. Linux Kernel中获取当前目录方法(undone)

    目录 . 引言 . 基于进程内存镜像信息struct mm_struct获取struct path调用d_path()获取当前进程的"绝对路径" . 基于文件描述符(fd).tas ...

  2. VMware 11安装Mac OS X 10.11.5虚拟机以及优化心得

    随着苹果WWC大会退出了MAC最新版的10.11.5,本着一颗“极客”的心情,在第一时间用VMWARE虚拟机装上了.然后各种卡顿这里分享一下优化mac虚拟机的心得. 1 从Dock上移除Dashboa ...

  3. tmux 快捷键

    ctrl+b , 修改窗口名称 ctrl+b ' 快速按名字切换窗口 ctrl+b w 列出窗口列表 Ctrl+b 激活控制台:此时以下按键生效 系统操作 ? 列出所有快捷键:按q返回 d 脱离当前会 ...

  4. Laravel教程 八：queryScope 和 setAttribute

    Laravel教程 八:queryScope 和 setAttribute 此文章为原创文章,未经同意,禁止转载. Laravel Eloquent Database 直接就是按照上一节所说的那样,我 ...

  5. 整理时下流行的浏览器User-Agent大全

    总结整理时下流行的浏览器User-Agent大全 此文章转至:http://www.360doc.com/content/12/1012/21/7662927_241124973.shtml 用于学习 ...

  6. UISearchBar和 UISearchDisplayController的使用

    感觉好多文章不是很全面,所以本文收集整合了网上的几篇文章,感觉有互相补充的效果. 如果想下载源码来看:http://code4app.com/search/searchbar .本源码与本文无关 1. ...

  7. iOS-Auto property synthesis will not synthesize property 'delegate'; it will be implemented by its super

    今天在XCode6.3上面重写TabBar的时候,自定义tabBar的代理遇到的一个问题 在重写tabBar的代理的时候遇到了一个警告. 解决方法: 在.m文件中 警告消失.

  8. 浏览器兼容性小整理和一些js小问题(后面会继续更新)

    最近在啃jQuery的源码,估计会啃到很多浏览器兼容性的问题,所以整理一下 1,IE下的内存泄露. 在IE中不在DOM树中的独立节点有javascript变量引用它的时候不会被回收. 解决:手动将该j ...

  9. [原] Android performClick无效，UI线程理解

    原因 开发过程中遇到button.performClick()无效,原因是View.performClick()需要再UI线程中调用才会有效执行. 响应系统调用的方法(比如报告用户动作的onKeyDo ...

  10. javascript trigger触发事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...