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. oracle授予权限

    CONNECT角色:    --是授予最终用户的典型权利,最基本的 CREATE    SESSION    --建立会话 RESOURCE角色:    --是授予开发人员的    CREATE    ...

  2. Linux系统忘记root密码，紧急模式下更改密码

    linux忘记密码命令概括: 1.开机按e,rd.break,ctrl+x: 2.mount  -o remount,rw /sysroot  3.chroot  /sysroot 4.passwd( ...

  3. PostgreSQL练习2

    列转行CREATE TABLE sdb.t_col_row(id int, c1 varchar(10), c2 varchar(10), c3 varchar(10)) INSERT INTO sd ...

  4. Photon Server初识(四) --- 部署自己的服务Photon Server

    准备工作: 1.一台 window 虚拟机(本机是window也行) 2.下载SDK : https://www.photonengine.com/zh-CN/sdks#server 一:SDK介绍 ...

  5. 牛客 128A 礼物 (组合计数)

    大意: n种一元的奥利奥, m种2元的奥利奥, 求花恰好k元钱购买奥利奥的方案数. 可重组合问题, 直接dp即可. #include <iostream> #include <sst ...

  6. MySQL 数据库面试题

    原文出处:https://juejin.im/post/5a9ca0d6518825555c1d1acd 作者:Java3y 本文在原文基础上进行修改,而且没有特定针对MySQL. 一.存储过程(以及 ...

  7. Redis 的订阅发布(PUB/SUB)示例

    ConnectionMultiplexer redis = ConnectionMultiplexer.Connect("127.0.0.1"); ISubscriber sub ...

  8. 4、Wepy-Redux基本使用 参考自https://blog.csdn.net/baidu_32377671/article/details/86708019

    摘抄自https://juejin.im/post/5b067f6ff265da0de02f3887 wepy 框架本身是支持 Redux 的,我们在构建项目的时候,将 是否安装 Redux 选择 y ...

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

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

  10. 5.AOP配置与应用（annotation的方式）

    步骤: a)在beans.xml文件中加上对应的xsd文件 spring-aop.xsd b)加上<aop:aspectj-autoproxy>,使用aspectj来完成aop <! ...