如何在Google Maps 添加多个标记
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 添加多个标记的更多相关文章
- 如何在Google Map中处理大量标记(ASP.NET)(转)
如何在Google Map中处理大量标记(ASP.NET)(原创-翻译) Posted on 2010-07-29 22:04 Happy Coding 阅读(8827) 评论(8) 编辑 收藏 在你 ...
- google maps js v3 api教程(2) -- 在地图上添加标记
原文链接 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 我们在创建地图 ...
- Google Maps API V3 之绘图库 信息窗口
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- Google maps library的使用
公司的项目中用到了google地图API, 使用Google API开发就会用到Marker, 用来在google 地图上标注位置 但是google marker使用过程中也有个问题,就是如果在goo ...
- 如何在 Google 地图中添加标记和说明
JS如下: (function() { window.onload = function() { // Creating an object literal containin ...
- Google Maps API V3 之 图层
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- Google Maps API V3 之 路线服务
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- google maps js v3 api教程(3) -- 创建infowindow
原文地址 前面我们学习了地图和标记的创建.那么今天我们来学习怎样在地图上显示一个窗口(infowindow) infowindow构造函数为:InfoWindow(opts?:InfoWindowOp ...
- Google Maps API显示地图的小示例
来源:http://www.ido321.com/1089.html 效果(新版Firefox中测试): 代码: <!DOCTYPE> <html> <head> ...
随机推荐
- Photon Server LoadBalancing搭建
准备:申请3台Windows虚拟机. 3台虚拟机上都部署上Photon Server. 一.主虚拟机上部署MasterServer. (1)在第一台虚拟机中,部署的Photon Server目目录下找 ...
- Struts2的学习自我总结
Struts2是一个轻量的的开源的框架,可以实现mvc的模式,起初struts和webwork两家公司都存在,后来strus的技术要落后一些,但是使用人群比较广泛,为了避免今后struts被淘汰,st ...
- 《深入理解 Java 虚拟机》学习 -- 类加载机制
<深入理解 Java 虚拟机>学习 -- 类加载机制 1. 概述 虚拟机把描述类的数据从 Class 文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的 J ...
- 怎样判断浏览器是否支持canvas
1. 如果网页必须使用canvas, 则需要告知用户更换或更新浏览器. 这时可以通过在<canvas>标签之间添加替代元素进行 <canvas id="c1"&g ...
- mysql索引实现原理
什么是索引: 索引是一种高效获取数据的存储结构,例:hash. 二叉. 红黑. Mysql为什么不用上面三种数据结构而采用B+Tree: 若仅仅是 select * from table where ...
- regex 正则分割字符串
string _content=adak.sjdkajskj爱25教:师的656教案时; string en=@"\.|56|25";//单个[asj]分别以a,s,j为分隔符. ...
- 关键字：for_each
std::for_each 先贴cppreference中对for_each的概述: template< class InputIt, class UnaryFunction > //此处 ...
- EF的导航属性
在EF中,外键被称为导航属性. 在EF core中,查询的时候默认是只查自身而不会去查询外键表的.如果想要让查询结果包含外键实体,则需要使用include方法来让查询结果包含外键实体.如 db.Stu ...
- 基于AccessToken方式实现API设计
一.举例说明: 需求: A.B机构需要调用X服务器的接口,那么X服务器就需要提供开放的外网访问接口. 分析: 1.开放平台提供者X,为每一个合作机构提供对应的appid.app_secret. 2.a ...
- 安装CDH5.11.2集群
master 192.168.1.30 saver1 192.168.1.40 saver2 192.168.1.50 首先,时间同步 然后,ssh互通 接下来开始: 1.安装MySQL5.6. ...