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>

 

效果如下：

在Google Maps 上点击标签后显示说明的更多相关文章

  1. 在Google Maps 上点击标签显示说明并保持不消失

    JS如下: (function() {     window.onload = function() {         // Creating an object literal containin ...

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

    MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白,症状例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVVAxOT ...

  3. HTML5获取地理位置信息并在Google Maps上显示

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  4. google浏览器打开新的标签页显示http://www.google.com.hk/url?sa=p&hl=zh-CN&……

    chrome的版本:51.0.2704.106 m使用该版本的chrome后,每次打开新标签页,都会提示“无法访问此网站”.并自动跳转到一个地址“http://www.google.com.hk/ur ...

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

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

  6. Google Maps API V3 之绘图库 信息窗口

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  7. Google maps library的使用

    公司的项目中用到了google地图API, 使用Google API开发就会用到Marker, 用来在google 地图上标注位置 但是google marker使用过程中也有个问题,就是如果在goo ...

  8. ［Google Maps API 3］Marker从Clusterer中分离及Marker置于Cluster上一层的解决办法

    在Google Maps API的使用中,经常用到Clusterer来避免过密的Marker显示.但仔细看一下Clusterer的设置参数中并没有直接将某些Marker除外的方法,那遇到这样的需求,怎 ...

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

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

随机推荐

  1. js中的三目运算符详解

    判断 javascript中的三目运算符用作判断时,基本语法为: expression ? sentence1 : sentence2 当expression的值为真时执行sentence1,否则执行 ...

  2. [OpenBenchMarking] AMD CPU 的性能简单对比

    来源: https://openbenchmarking.org/result/1710193-AL-EPYC7351P64 1. 2. 3. 4.

  3. 我学会了正确的dinic

    以前写Isap的时候,总是被卡,然后学了一发Isap的当前弧优化,好像可以水过很多题 但是一直没明白为啥Isap会走一个环??? 然后写dinic了,听说不容易被卡(来自去年九省联考的指导) 然而-- ...

  4. java如何读写json文件

    在实际项目开发中,有时会遇到一些全局的配置缓存,最好的做法是配置redis数据库作为数据缓存,而当未有配置redis服务器时,读取静态资源文件(如xml.json等)也是一种实现方式,但是这有一个弊端 ...

  5. Thinkphp自定义生成缩略图尺寸的方法

    Thinkphp自定义生成缩略图尺寸的方法,本实例中生成两张不同尺寸的图片:第一张是大图350*350,第二张 50*50的缩略图 Image类是Thinkphp系统自带的,可以研究下,这个缩略图类很 ...

  6. 浅谈后缀数组SA

    这篇博客不打算讲多么详细,网上关于后缀数组的blog比我讲的好多了,这一篇博客我是为自己加深印象写的. 给你们分享了那么多,容我自私一回吧~ 参考资料:这位dalao的blog 一.关于求Suffix ...

  7. Java并发与多线程教程(2)

    Java同步块 Java 同步块(synchronized block)用来标记方法或者代码块是同步的.Java同步块用来避免竞争.本文介绍以下内容: Java同步关键字(synchronzied) ...

  8. Python实现字符的冒泡排序——说实话，两个数兑换的方法震惊了我，一天比一天感受到了Python的强大

    import random M= lettList=[] for i in range(M): lettList.append(chr(random.randrange(,))) for lett i ...

  9. 设计模式风格<二>；消息总线

    以前开发的动车模拟驾驶系统,有好几个软件(不在一台机器上),他们互相之间通信,因此每个软件要配置每个模块的IP和端口,就是每个模块都要知道别的模块的端口和IP. 这样有个重复的地方,B模块和C模块都要 ...

  10. JS基础_函数的返回值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...