在Google Maps 上点击标签后显示说明

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如下：

<head>

<title>My first map</title>

</head>

<body>

<h1>My first map</h1>

</body>

</html>

效果如下：

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

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

MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白
MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白,症状如下: 解决方案如下:
解决在工具栏Chrome图标上点击右键会显示“常去网站”和“最后关闭网站”的问题
解决在工具栏Chrome图标上点击右键会显示"常去网站"和"最后关闭网站"的问题参考文章: (1)解决在工具栏Chrome图标上点击右键会显示"常去 ...
解决在工具栏Chrome图标上点击右键会显示“常去网站”和“最后关闭网站”的问题...
在工具栏Chrome图标上点击右键,可以"打开新窗口"或"打开新的隐身窗口"很方便,但是在其他电脑上尝试该操作时,发现有些情况下还会显示"常去网站&q ...
My97DatePicker日历的平面显示，不是文本框点击事件后显示
二. 功能及示例 2. 特色功能平面显示日期控件支持平面显示功能,只要设置一下eCont属性就可以把它当作日历来使用了,无需触发条件,直接显示在页面上示例2-1 平面显示演示 <div i ...
swift 如何实现点击view后显示灰色背景
有这样一种场景,当我们点击view的时候,需要过0.几秒显示一个灰色或者别的颜色的背景用button来实现,只有按下去的时候才会出现,往往在快速按下,快速抬起的时候是看不出这个变化的下边是解决方案 ...
Google maps javascript api v3 叠加层（Overlays）介绍
很多人尝试google maps api的开发,通常会涉及到在Google maps上进行标注功能的开发.Helloj2ee学习一项技术通常不在看书,而是多以帮助为主.当我看完之后,我将Overlay ...
Google Maps JavaScript API V3 叠加层
注意:以下网页中提到的 Google Maps JavaScript API 第 3 版现在是正式的 JavaScript API 版本.该 API 的第 2 版已根据我们的弃用政策正式弃用.欢迎您将 ...
Google Maps JavaScript API V3的使用(四)
Google Maps JavaScript API V3 叠加层叠加层概述叠加层是地图上与纬度/经度坐标绑定的对象,会随您拖动或缩放地图而移动.叠加层表示的是"添加"到地图中 ...
怎么在谷歌地图上画图_如何在Google地图上规划具有多个目的地的公路旅行
怎么在谷歌地图上画图 Whether you're planning a day out on the town, or want to orchestrate the perfect road tr ...

在Google Maps 上点击标签后显示说明

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

最新文章

热门文章