JS如下：

(function() {

    window.onload = function() {

        // Creating an object literal containing the properties

        // we 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 that 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));

        // Looping through the places array

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

            // Adding the marker as usual

            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() {

                    var infowindow = new google.maps.InfoWindow({

                        content: 'Place number ' + i

                    });

                    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 contain ...

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

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

  3. Google Maps API显示地图的小示例

    来源:http://www.ido321.com/1089.html 效果(新版Firefox中测试): 代码: <!DOCTYPE> <html> <head> ...

  4. Google Maps API V3 之 图层

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

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

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

  6. Google maps library的使用

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

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

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

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

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

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

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

随机推荐

  1. Cacls和ICacls

    解释:  Cacls:显示或修改文件的访问控制列表(ACL) ICACLS:显示或修改自由访问控制表(Dacl) 上指定的文件,并指定目录中的文件应用于存储的 Dacl. 总结:显示或修改文件访问控制 ...

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

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

  3. Java多线程（十）：BlockingQueue实现生产者消费者模型

    BlockingQueue BlockingQueue.解决了多线程中,如何高效安全"传输"数据的问题.程序员无需关心什么时候阻塞线程,什么时候唤醒线程,该唤醒哪个线程. 方法介绍 ...

  4. MongoDB实战读书笔记（一）：JavaScript shell操作MongoDB

    1 基本增删改查 基本概念: 数据库:同关系型数据库 集合:类似关系型数据库的表 文档:类似关系型数据库的行 字段:类似关系型数据库的列 操作: insert:新增,若新增数据的主键已经存在,则会抛异 ...

  5. 作业1：java虚拟机内存模型图示

    看了很多篇文章,整理成一幅图,但仍然有许多不解的地方,以后再接着完善,哪位大神看到不正确的地方,请指出,谢谢.

  6. IoC框架介绍

    转载自:http://blog.csdn.net/wanghao72214/article/details/3969594 1 IoC理论的背景    我们都知道,在采用面向对象方法设计的软件系统中, ...

  7. excel 导入

    public static DataTable ExcelToDataTable(string fileName, string sheetName, bool isFirstRowColumn) { ...

  8. 张小龙用这8句话表达了NB产品的一切(转)

    1.一个好的产品应该是用完即走 真正好的产品,应该是让用户提高效率而不是消磨时光.但现在大部分用户使用微信的时间让我们很担忧. 包括我们自己的同事,在开会的时候,有同事隔两分钟就看一下手机,我觉得他们 ...

  9. **表示python中的意思

    **表示python中的意思 **表示python中的电源操作传递参数和定义参数时(所谓的参数是调用函数时传入的参数,参数是定义函数时定义函数的参数),还可以使用两个特殊语法:“`*`**”. 调用函 ...

  10. springboot 服务端获取前端传过来的参数7种方式

    下面为7种服务端获取前端传过来的参数的方法  1.直接把表单的参数写在Controller相应的方法的形参中,适用于GET 和 POST请求方式 这种方式不会校验请求里是否带参数,即下面的userna ...