JS如下：

(function() {

    window.onload = function() {

        // Creating an object literal containing the properties

        // we want to pass to the map

        var options = {

            zoom: 12,

            center: new google.maps.LatLng(40.7257, -74.0047),

            mapTypeId: google.maps.MapTypeId.ROADMAP

        };

        // Creating the map

        var map = new google.maps.Map(document.getElementById('map'), options);

        // Adding a marker to the map

        

        // 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++) {

                    // Creating a new marker

                    var marker = new google.maps.Marker({

                        position: places[i],

                        map: map,

                        title: 'Place number '
+ i

                    });

                }

    };

})();

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 Map中处理大量标记(ASP.NET)(转)

    如何在Google Map中处理大量标记(ASP.NET)(原创-翻译) Posted on 2010-07-29 22:04 Happy Coding 阅读(8827) 评论(8) 编辑 收藏 在你 ...

  2. google maps js v3 api教程(2) -- 在地图上添加标记

    原文链接 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 我们在创建地图 ...

  3. Google Maps API V3 之绘图库 信息窗口

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  4. Google maps library的使用

    公司的项目中用到了google地图API, 使用Google API开发就会用到Marker, 用来在google 地图上标注位置 但是google marker使用过程中也有个问题,就是如果在goo ...

  5. 如何在 Google 地图中添加标记和说明

    JS如下: (function() {     window.onload = function() {         // Creating an object literal containin ...

  6. Google Maps API V3 之 图层

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  7. Google Maps API V3 之 路线服务

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  8. google maps js v3 api教程(3) -- 创建infowindow

    原文地址 前面我们学习了地图和标记的创建.那么今天我们来学习怎样在地图上显示一个窗口(infowindow) infowindow构造函数为:InfoWindow(opts?:InfoWindowOp ...

  9. Google Maps API显示地图的小示例

    来源:http://www.ido321.com/1089.html 效果(新版Firefox中测试): 代码: <!DOCTYPE> <html> <head> ...

随机推荐

  1. java源码--ArrayList

    1.1.ArrayList概述 1)ArrayList是可以动态增长和缩减的索引序列,它是基于数组实现的List类. 2)该类封装了一个动态再分配的Object[]数组,每一个类对象都有一个capac ...

  2. （八）动态 sql

    目录 什么是动态 sql sql 片段 foreach 标签 什么是动态 sql 我们之前在映射文件中,配置 sql 的时候,其实都是静态的 : <!--复杂查询--> <selec ...

  3. python中requests库使用方法详解

    目录 python中requests库使用方法详解 官方文档 什么是Requests 安装Requests库 基本的GET请求 带参数的GET请求 解析json 添加headers 基本POST请求 ...

  4. 计算两个坐标点的距离(高德or百度)

    /// <summary> /// 获取两个坐标之间的距离 /// </summary> /// <param name="lat1">第一个坐 ...

  5. javascript数字格式化通用类——accounting.js使用

    简介 accounting.js 是一个非常小的JavaScript方法库用于对数字,金额和货币进行格式化.并提供可选的Excel风格列渲染.它没有依赖任何JS框架.货币符号等可以按需求进行定制. 代 ...

  6. Javascript中new的作用

    关于js中new关键字的理解,先来看个例子:像这样创建实例时使用new与不使用new有什么区别????function ParasiticPerson(name, age, job) {    var ...

  7. javaIO——BufferedWriter

    [环境] jdk1.8 前面学习过 BufferedReader,是缓冲字符输入流.那么今天来学习对应的缓冲字符输出流类:BufferedWriter.跟 BufferedReader 同理,它也是一 ...

  8. 检查一个string是否包含List<string>中的任意一个

    bool b = listOfStrings.Any(s=>myString.Contains(s)); 应用在where子句中的示例: //获取路径 var groupPaths = grou ...

  9. Python诞生以来意义菜谱

    自Python诞生以来,它被誉为最简单的编程语言.进入人工智能时代后,它逐渐成为编程领域的主导语言. Python是一种快速.强大.高效和灵活的编程语言家常菜做法大全.学习后,无论您是想进入数据分析菜 ...

  10. Node.js Express项目搭建

    讲干货,不啰嗦,Express 是一个简洁而灵活的 node.js Web应用框架,使用 Express 可以快速地搭建一个完整功能的网站.本教程介绍如何从零开始搭建Express项目. 开发环境:w ...