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. GitHub项目管理维护实用教程

    GitHub项目维护教程   1)注册GitHub账户并登陆: 2)在Windows cmd(或Ubuntu中的terminal)中cd到自己的工作目录,将仓库clone下来: 命令: git clo ...

  2. MYSQL SHOW 用法

    1.SHOW CHARACTER SET 显示所有可用的字符集 mysql> SHOW CHARACTER SET LIKE 'utf8'; +---------+--------------- ...

  3. 从 .NET 到 JavaScript —— 纯前端报表控件 ActiveReportsJS 焕新登场

    报表工具的发展史,最早可以追溯到微软报表SSRS(SQL Server Reporting Services)时期.最初,报表工具主要应用于报表的定制.呈现和输出.经过几十年的发展,随着各种业务系统功 ...

  4. neo4j 将一个节点的属性复制到另一个节点上

    在使用Python操作Neo4j数据库的时候,经常会遇到重复的节点,需要将一个节点的属性复制到另一个节点,之后将该节点删除. def copy_node_properties(source_node_ ...

  5. Photon Server LoadBalancing搭建

    准备:申请3台Windows虚拟机. 3台虚拟机上都部署上Photon Server. 一.主虚拟机上部署MasterServer. (1)在第一台虚拟机中,部署的Photon Server目目录下找 ...

  6. Devexpress WinForm GridControl实现单元格可编辑状态更改

    之前做项目的时候,需要实现这样的功能.在gridcontrol中,根据是否修改(checkbox)列的选中和未选中状态来联动另外一列的编辑状态.实现如下: private void gridView1 ...

  7. Linux 系统的安全加固

    Linux是一套免费使用和自由传播的类Unix操作系统,作为一个开放源代码的操作系统,Linux服务器以其安全.高效和稳定的显著优势而得以广泛应用,但如果不做好权限的合理分配,Linux系统的安全性还 ...

  8. [javascript]localStorage和sessionStorage区别

    一.sessionStorage.localStorage.cookie可查看的位置,F12=>Application: 二.cookie .sessionStorage与localStorag ...

  9. windows phone 下拉刷新

    在windows phone 中采用数据列表时为了保证用户体验常遇到加载数据的问题.这个问题普遍到只要你用到数据列表就要早晚面对这个问题. 很多人会说这个问题已经有解决方案. 其实真正问题并不在于如何 ...

  10. SQLSERVER 在PROCEDURE 中动态执行SQL语句【EXEC】并获取

    1.直接上代码 CREATE PROCEDURE [dbo].[TEST] AS BEGIN DECLARE )='N8-4F', --構建SQL需要的條件 ),--構建後的SQL語句 @cnt in ...