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】【基础知识】【模块】【random】【使用random创造一个随机数】

    Random介绍: 输出随机数. 快照: #!/usr/bin/python # -*- coding: UTF-8 -*- import random #生成 10 到 20 之间的随机数 prin ...

  2. Facebook推荐算法模型DLRM解读

    参考:https://mp.weixin.qq.com/s/mUNjLuOG2UvztCEP3wyPPw 代码:https://github.com/facebookresearch/dlrm

  3. Django新手入门必看

    pip install django==2.1.7 (现在Django3.0出来,推荐大家可以使用一下Django3.0) pip list查看

  4. 使用 backdoor 工具注入ShellCode

    backdoor-factory 顾名思义,直接翻译过来就是后门工厂的意思.其利用打补丁的方式编码加密PE文件,可以轻松的生成win32PE后门程序,从而帮助我们绕过一些防病毒软件的查杀,达到一定得免 ...

  5. MySQL 聚合函数（一）聚合（组合）函数概述

    MySQL版本:5.7+ 本节介绍对值的集合进行操作的组合(聚合)函数.翻译自:Aggregate (GROUP BY) Function Descriptions 一.MySQL 5.7中的聚合函数 ...

  6. 补充第11期作业：Long.fastUUID与UUID.toString之间的关系

    一 UUID.toString方法与Long.fastUUID方法的关联 UUID类 public final class UUID implements java.io.Serializable, ...

  7. 尝试 javascript 一对多 双向绑定器

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

  8. JSP读取properties文件变量

    1.jsp代码 <%ResourceBundle res = ResourceBundle.getBundle("properties文件名"); %> 2.js代码 ...

  9. fastclick插件学习（一）之用法

    原理 在检测到touchend事件后, 会通过dom自定义事件模拟一个click事件,并把浏览器300ms之后真正触发的点击事件屏蔽掉,fastclick是不会对PC浏览器添加监听事件 使用 1.引入 ...

  10. JS基础_返回值的类型

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...