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. Python 解LeetCode：33. Search in Rotated Sorted Array

    题目描述:在一个旋转数组中查找给定的值,其中旋转数组中不含重复值: 思路: 第一遍二分遍历,找到数组中最小值的索引: 第二遍分别对最小值左右两边的数组进行二分查找: class Solution(ob ...

  2. Go语言学习之斐波那契数列的测试例子和定义常量方法

    ### Go语言学习之斐波那契数列的测试例子和定义常量方法 1.go语言中测试文件必须以test.go结尾,比如:fib_test.go 2.测试文件内的方法必须是Test开头,比如:func Tes ...

  3. 基于白名单的Payload

    利用 Msiexec 命令DLL反弹 Msiexec是Windows Installer的一部分.用于安装Windows Installer安装包(MSI),一般在运行Microsoft Update ...

  4. 使用百度echarts仿雪球分时图（四）

    这章节来收拾一下一些小BUG,顺便把各个小提示信息也补上,分时图也就完成了. 上章节末尾提到的一个bug,就是第一个grid跟第三个grid之间是断开的,折线并没有连在一起,所以先来收拾这个问题.没有 ...

  5. SpringCloud之Feign声明式调用原理及配置

    1 什么是Feign Feign是一种声明式.模板化的HTTP客户端(仅在Application Client中使用).声明式调用是指,就像调用本地方法一样调用远程方法,无需感知操作远程http请求. ...

  6. 【转】在 Delphi 中创建 Linux 守护程序（服务进程）

    转自波哥的译文,必须转过来,太有价值了!原文地址在这里.以下为原文内容: 本文译自 原文链接,语言上做了精炼和排版的变更,以便更简洁明了. Delphi 开始支持 Linux 平台为 Delphi 开 ...

  7. Jmeter服务器压力测试使用说明

    Jmeter服务器压力测试使用说明 Apache JMeter是Apache组织开发的基于Java的压力测试工具. 官方地址:http://jmeter.apache.org/download_jme ...

  8. Django框架起步

    一.环境安装 二.创建项目 三.项目目录 四.创建项目应用 五.应用目录 六.第一个响应 七.第一个模板页面 八.第一个重定向 九.url应用移植 十.多应用相同模板页面冲突 十一.静态资源的配置 十 ...

  9. Hadoop_27_MapReduce_运营商原始日志增强(自定义OutputFormat)

    1.需求: 现有一些原始日志需要做增强解析处理,流程: 1. 从原始日志文件中读取数据(日志文件:https://pan.baidu.com/s/12hbDvP7jMu9yE-oLZXvM_g) 2. ...

  10. Educational Codeforces Round 37 G. List Of Integers （二分，容斥定律，数论）

    G. List Of Integers time limit per test 5 seconds memory limit per test 256 megabytes input standard ...