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. 单镜头视觉系统检测车辆的测距方法
  2. [原]LVM管理问题解决
  3. Filter学习(一)
  4. 屌丝程序员的返京历险记
  5. 明日之后抄袭rust_古人怎么抄袭?何法盛偷窃原著,宋之问压杀外甥,班固参考史记...
  6. Session id的存储
  7. File类获取功能的方法
  8. python去重且顺序不变_Python中list去重且保持原顺序不变的方法
  9. String(字符串) 比较大小 如果有A+BB+A 则AB
  10. 命令行快速部署Exchange2010
  11. codevs 1388 砍树
  12. json mysql 字段 默认值_MySQL JSON 类型数据操作
  13. STL总结之list
  14. 优词词根词典mdx_中外英语词典223种(Txt格式)免费分享
  15. 网易邮箱接收ibm的邮件_在IBM Integration Bus中发送和接收带有大型附件的SOAP消息
  16. 音视频技术开发周刊 | 164
  17. 计算机专业必看!10天用Flutter撸了个高仿携程App,好文推荐
  18. 对于DES的S盒 计算随机变量的偏差
  19. Linux系统安装与使用基础之第二篇熟悉Linux操作系统
  20. 你真的了解“药品追溯码”吗?

热门文章

  1. 按ESC关闭当前窗口
  2. Visual Studio 2005 移植 (札记之一)
  3. [react] props.children.map和js的map有什么区别?为什么优先选择react的?
  4. React开发(229):react删除的实现
  5. 学会使用ant design封装一个锚点组件
  6. [html] 页面布局时你使用最多的标签是什么?div吗?在什么情况下会使用到div?
  7. [html] DOM节点的根节点是不是body?
  8. 前端学习(2875):原生js模块化+入口模块和子类的编写
  9. [css] 说出至少十条你理解的css规范
  10. 工作341:uni-表头不显示