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. PL/SQL developer 11.0注册码

    PL/SQL developer 11.0注册码:product key:lhsw85g33x4p7leqk63hy8q28ffxzzvbxlserial No:193085password:xs37 ...

  2. Linux命令中dd的作用

    Linux命令中用vi编辑文本时dd的作用是删除整行文本的信息.

  3. ThreadLocal，Lock的事儿

    ThreadLocal作用 防止线程间的干扰 public interface Sequence { int getNumber(); } public class ClientThread exte ...

  4. Symfony 服务配置 看这一篇就够了

    对于刚接触 Symfony 的新手来说,如何配置服务是一件很困难的事情.虽然在 Symfony 的新版本的框架中加入了自动加载(autowire),基本上满足了一般的需求,但是如果你想深入了解“服务” ...

  5. npm—入门指导

    npm npm是什么? NPM(node package manager),通常称为node包管理器.顾名思义,它的主要功能就是管理node包,包括:安装.卸载.更新.查看.搜索.发布等. npm的背 ...

  6. windows下安装mongoDB（zip版）

    windows下安装mongoDB(zip版) 下面说明如何在win10下用zip包安装好mongoDB数据库 首先要先从网上下载mongoDB的zip包 http://dl.mongodb.org/ ...

  7. docker部署redis

    镜像获取 docker pull redis:4.0 ##当前最新版本 docker images 启动 docker run --name redis-huiyuan -p : -v $PWD/da ...

  8. 命令行发送SMTP协议邮件（163邮箱）

    这里我们用163邮箱为例子,借助命令行发送smtp邮件 1.连接服务器 在终端上输入:telnet smtp.163.com 25 回车,然后就连接了服务器的25端口,成功会输出 220 163.co ...

  9. 【原创】大叔问题定位分享（36）openresty(nginx+lua)中获取不到post数据，ngx.req.get_body_data返回nil

    openresty(nginx+lua)中获取不到post数据,ngx.req.get_body_data返回nil This function returns nil if the request ...

  10. canvas-八卦图和时钟实现

    八卦图: <body> canvas id="></canvas> <script> //获取到画布元素 let myCanvas = docume ...