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. TCP的socket连接

    package newtest; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStre ...

  2. HTTPS 简单学习

    1. HTTP缺点 使用明文通信,内容可能会被窃听: 通信加密:使用SSL和TLS: 内容加密: 不验证通信方的身份,因此可能会遭到伪装: SSL提供加密和证书: 无法证明报文的完整性,因此会遭到修改 ...

  3. shell如果文件夹不存在则创建

    #!/bin/bash build_dir="build" if [ ! -d "$build_dir" ]; then mkdir $build_dir fi ...

  4. webpack打包时删除console.log，和debugger

    开发过程中我们不可避免的需要console.log调试,然而在上线时如果不删除这些console.log可能会造成内存泄漏,因为console.log出来的变量是不会被GC的,webpack给我们提供 ...

  5. MySQL 索引的优化

    一.MySQL如何使用索引(index) 1.1 索引概述 索引用于快速查找具有特定列值的行. 如果不使用索引,MySQL必须从表的第一行开始,然后扫描整个表来寻找符合条件的行.这种情况下,表越大,扫 ...

  6. Python的.sort()方法和sorted（）比较总结

    1,.sort()方法 使用方式是:列表.sort(),作用是将原来的列表正序排序,所以它是对原来的列表进行的操作,不会产生一个新列表,例如: import random numList=[] pri ...

  7. 基于C#实现与新大陆扫码枪通信

    随着工业互联的发展,扫码枪在很多场合都有所应用,超市.商场以及一些智能工厂.今天主要讲如何通过C#实现与新大陆扫码枪(OY10)进行通信,对于扫码枪的配置,这里就不多说了,结合说明书就可以实现.这里值 ...

  8. C# enum枚举知识总结

    C#中除了简单的变量类型外,还提供了三种较为复杂的变量类型,包括枚举.结构和数组.本文主要讲述枚举相关的知识. 枚举类型(也称为枚举),提供了一种有效的方式,来定义可能分配给变量的一组已命名的整数常量 ...

  9. IE各版本处理XML的方式

    一.支持DOM2级的方式我们知道,现阶段支持DOM2的主流浏览器有IE9+.Firefox.Opera.Chrome和Safari.1.1.创建XML//实际上,DOM2级在document.impl ...

  10. 项目构建工具之gradle

    groovy的高级特性: 可选的类型定义 def.assert.括号是可选的.字符串 .集合API.闭包: 构建脚本 项目project : group name version apply depe ...