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. 知乎Python后端面试总结

    一面 写个快速排序热热身,分析一下复杂度,如果不使用额外的空间,应该怎么写? 说一下Flask中g是怎么实现的,原理是什么? 说一下浏览器从输入url到页面渲染的过程,越详细越好: 了解web安全吗? ...

  2. 【浅析C++11】std::function和std::bind

    目录 std::function可调用对象包装器 std::function基本用法 std::function/std::bind与抽象工厂.工厂方法的一点思考 std::function可调用对象 ...

  3. fiddler笔记：filters选项卡

    Host Show only Intranet Host 只显示内网(如不带"."的主机名)的数据流. Show only Internet Host 只显示互联网(如不带&quo ...

  4. 【leetcode】153. 寻找旋转排序数组中的最小值

    题目链接:传送门 题目描述 现有一个有序数组,假设从某个数开始将它后面的数按顺序放到了数组前面.(即 [0,1,2,4,5,6,7] 可能变成 [4,5,6,7,0,1,2]). 请找出数组中的最小元 ...

  5. System.Data.EntityException: The underlying provider failed on Open.

    场景:IIS默认站点建立程序,使用Windows集成身份验证方式,连接SQLServer数据库也是采用集成身份验证.我报“System.Data.EntityException: The underl ...

  6. hdu 1068 最大子序列和变形，，，

    #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #d ...

  7. StoneTab标签页CAD插件 3.0.0

    //////////////////////////////////////////////////////////////////////////////////////////////////// ...

  8. JS中逗号运算符的用法

    逗号运算符,它将先计算左边的参数,再计算右边的参数值.然后返回最右边参数的值. 原书举的例子不太好,无法解释上面那句话,这里另外提供一个: var a = 10, b = 20; function C ...

  9. Oracle 分页语句

    ** 写法1 :采用 ROWNUM的伪列: --查询10到20之间的数据 -- SELECT * FORM ( -- SELECT * , ROWNUM rn FROM TABLE_NAME -- W ...

  10. 操作系统中堆（heap）与栈（stack）的区别

    主要区别如下: 一.空间分配: 1.堆(操作系统):一般由程序员分配释放,若程序员不释放,程序结束时可能由OS回收,分配方式类似于链表.PS:java中都是系统GC,程序员无法进行GC. 2.栈(操作 ...