JS如下:

(function() {

window.onload = function() {

// Creating an object literal containing the properties

// you want to pass to the map

var options = {

zoom: 3,

center: new google.maps.LatLng(37.09, -95.71),

mapTypeId: google.maps.MapTypeId.ROADMAP

};

// Creating the map

var map = new google.maps.Map(document.getElementById('map'), options);

// Creating an array which will contain the coordinates

// for New York, San Francisco and Seattle

var places = [];

// Adding a LatLng object for each city

places.push(new google.maps.LatLng(40.756, -73.986));

places.push(new google.maps.LatLng(37.775, -122.419));

places.push(new google.maps.LatLng(47.620, -122.347));

// Creating a variable that will hold the InfoWindow object

var infowindow;

// Looping through the places array

for (var i = 0; i < places.length; i++) {

// Adding the markers

var marker = new google.maps.Marker({

position: places[i],

map: map,

title: 'Place number ' + i

});

// Wrapping the event listener inside an anonymous function

// that we immediately invoke and passes the variable i to.

(function(i, marker) {

// Creating the event listener. It now has access to the values of

// i and marker as they were during its creation

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

if (!infowindow) {

infowindow = new google.maps.InfoWindow();

}

// Setting the content of the InfoWindow

infowindow.setContent('Place number ' + i);

// Tying the InfoWindow to the marker

infowindow.open(map, marker);

});

})(i, marker);

}

};

})();

CSS如下:

body {

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size: small;

background: #fff;

}

#map {

width: 100%;

height: 500px;

border: 1px solid #000;

}

.info {

width: 250px;

}

HTML如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>My first map</title>

<link type="text/css" href="css/style.css" rel="stylesheet" media="all" />

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

<script type="text/javascript" src="js/map.js"></script>

</head>

<body>

<h1>My first map</h1>

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

</body>

</html>

效果如下:

转载于:https://www.cnblogs.com/my4piano/p/5327140.html

在Google Maps 上点击标签后显示说明相关推荐

  1. MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白

    MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白,症状如下: 解决方案如下:

  2. 解决在工具栏Chrome图标上点击右键会显示“常去网站”和“最后关闭网站”的问题

    解决在工具栏Chrome图标上点击右键会显示"常去网站"和"最后关闭网站"的问题 参考文章: (1)解决在工具栏Chrome图标上点击右键会显示"常去 ...

  3. 解决在工具栏Chrome图标上点击右键会显示“常去网站”和“最后关闭网站”的问题...

    在工具栏Chrome图标上点击右键,可以"打开新窗口"或"打开新的隐身窗口"很方便,但是在其他电脑上尝试该操作时,发现有些情况下还会显示"常去网站&q ...

  4. My97DatePicker日历的平面显示,不是文本框点击事件后显示

    二. 功能及示例 2. 特色功能 平面显示 日期控件支持平面显示功能,只要设置一下eCont属性就可以把它当作日历来使用了,无需触发条件,直接显示在页面上 示例2-1 平面显示演示 <div i ...

  5. swift 如何实现点击view后显示灰色背景

    有这样一种场景,当我们点击view的时候,需要过0.几秒显示一个灰色或者别的颜色的背景 用button来实现,只有按下去的时候才会出现,往往在快速按下,快速抬起的时候是看不出这个变化的 下边是解决方案 ...

  6. Google maps javascript api v3 叠加层(Overlays)介绍

    很多人尝试google maps api的开发,通常会涉及到在Google maps上进行标注功能的开发.Helloj2ee学习一项技术通常不在看书,而是多以帮助为主.当我看完之后,我将Overlay ...

  7. Google Maps JavaScript API V3 叠加层

    注意:以下网页中提到的 Google Maps JavaScript API 第 3 版现在是正式的 JavaScript API 版本.该 API 的第 2 版已根据我们的弃用政策正式弃用.欢迎您将 ...

  8. Google Maps JavaScript API V3的使用(四)

    Google Maps JavaScript API V3 叠加层 叠加层概述 叠加层是地图上与纬度/经度坐标绑定的对象,会随您拖动或缩放地图而移动.叠加层表示的是"添加"到地图中 ...

  9. 怎么在谷歌地图上画图_如何在Google地图上规划具有多个目的地的公路旅行

    怎么在谷歌地图上画图 Whether you're planning a day out on the town, or want to orchestrate the perfect road tr ...

最新文章

  1. Scrum看板工具Leangoo记录我的装修事件,hhhh
  2. docker nodejs 基本应用
  3. 《智能家居产品 从设计到运营》——第2章 技术搭台——与智能家居相关的技术...
  4. 作为SEO老人不轻易建议客户进行动态网页优化设置
  5. 基础的VueJS面试题(附答案)
  6. 阿里云服务器被挖矿病毒minerd***的解决方法
  7. 怎么样成为编程技术大牛?
  8. Linux常用命令—文件处理命令—链接命令
  9. Spark Structured : KuduException$OriginalException: Originalasynchronous stack trace
  10. 【黑马程序员】————预处理指令2-文件编译
  11. Kotlin入门(28)Application单例化
  12. Microsoft Word 段前距设置和页眉设置
  13. .gitignore中添加了忽略规则为何还是会提示版本更新,git如何清除部分文件的版本管理
  14. 数据结构和算法——堆排序
  15. JavaScript 3D实时线图
  16. 怎么判断笔记本显卡性能?笔记本显卡和台式机显卡性能差距大吗
  17. QQ截屏快速获取像素颜色
  18. 漏洞建议:实施 TLS_FALLBACK_SCSV。此外,要么完全禁用 SSLv3,要么禁用以通过 SSLv3 的 CBC 模式操作的所有密码套件
  19. createinstance.java,Activator.CreateInstance:类的动态实例化
  20. 我把视频变成链接_如何把长链接变成短链接?3个工具帮你实现

热门文章

  1. Linux 查看磁盘分区、文件系统、使用情况的命令和相关工具介绍
  2. [react] 受控组件和非受控组件有什么区别?
  3. React开发(100):3.0没有image
  4. 前端学习(2879):实现v-if和v-show设计分析 视图搭建
  5. [css] 说说CSS的优先级是如何计算的?
  6. [css] 你有使用过字体图标吗?它有什么好处?
  7. 前端学习(2853):简单秒杀系统学习之页面事件
  8. 前端学习(2447):数据筛选处理
  9. 前端学习(1967)vue之电商管理系统电商系统之切换面板获取
  10. 前端学习(1963)vue之电商管理系统电商系统之控制级联选择框的选择范围