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. SpringBoot起步

    1.SpringBoot依赖包导入 方式一:将spring-boot的依赖为父pom出现 <parent> <groupId>org.springframework.boot& ...

  2. Kubernetes组件-ReplicaSet

    ⒈简介 最初,ReplicationController是Kubernetes用于复制和在异常时重新调度节点的唯一组件,后来Kubernetes又引入了一个名为ReplicaSet的类似资源.它是新一 ...

  3. 为服务部署 Jekins的使用

    docker pull jenkinsci/jenkins docker run -d -p 8080:8080 -v E:/docker/jenkins:/var/jenkins_home --na ...

  4. 有关带scala版本的eclipse4.7的下载

    有关带scala版本的eclipse4.7的下载, 你可以直接去: http://scala-ide.org/download/sdk.html ​ 下载下来后是:scala-SDK-4.7.0-vf ...

  5. html跑马灯/走马灯效果

    实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实现,我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句,它的效果如下所示: ...

  6. visual studio 用 vs code 的 hot key

    记得 2 年多前开始用 vs code, 一开始非常不适应它的 hot key 一心想把 vs code 的 hot key 全改成 visual studio 的,但一直没有找到比较方便的办法 (总 ...

  7. 给枚举定义DescriptionAttribute

    在C#中,枚举用来定状态值很方便,例如我定义一个叫做Season的枚举 public enum Season { Spring = 1, Summer = 2, Autumn = 3, Winter ...

  8. git merge 命令的使用

    我们把dev分支的工作成果合并到master分支上: $ git merge dev Updating d46f35e..b17d20e Fast-forward readme.txt | 1 + 1 ...

  9. Node.js学习（1）-加载模块require('fs/http/.b/art-template')

    node.js既不是语言,也不是框架,它是一个平台 加载模块: 核心模块(require('fs/http')), 自定义模块(var bExport=require('./b'),exports.f ...

  10. ASE19团队项目alpha阶段model组 scrum4 记录

    本次会议于11月6日,19时整在微软北京西二号楼sky garden召开,持续50分钟. 与会人员:Jiyan He, Kun Yan, Lei Chai, Linfeng Qi, Xueqing W ...