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. RAMSPEED的简单测试数据 x86虚拟机 龙芯 飞腾

    1. ramspeed 简介 http://alasir.com/software/ramspeed/ 官网为 2. 进行简单安装测试的步骤 . 下载 wget http://alasir.com/s ...

  2. Nginx03---重装

    1.先执行一下命令 1.1 删除nginx,–purge包括配置文件 sudo apt-get --purge remove nginx 1.2 自动移除全部不使用的软件包 sudo apt-get ...

  3. mybatis 的一对一关联查询association

    现在项目的列表查询数据需要查一个总数count, 如果直接写在同一个sql里面,会导致查询速度很慢, 因此,想到使用关联查询,例子如下: 附上代码: 其中遇到的坑哟: 1.association中的s ...

  4. 【AtCoder】AGC001

    AGC001 A - BBQ Easy 从第\(2n - 1\)个隔一个加一下加到1即可 #include <bits/stdc++.h> #define fi first #define ...

  5. TypeScript的变量声明

    1.全新的变量声明方式 let和const是JavaScript ES6中新添加的变量声明方式.let在很多方面与var是相似的,但是它可以避免一些在JavaScript里常见一些问题. 而const ...

  6. LC 202. Happy Number

    问题描述 Write an algorithm to determine if a number is "happy". A happy number is a number de ...

  7. 洛谷 P2746 [USACO5.3]校园网Network of Schools

    题目描述 一些学校连入一个电脑网络.那些学校已订立了协议:每个学校都会给其它的一些学校分发软件(称作“接受学校”).注意即使 B 在 A 学校的分发列表中, A 也不一定在 B 学校的列表中. 你要写 ...

  8. 模块和包,logging模块

    模块和包,logging日志 1.模块和包 什么是包? 只要文件夹下含有__init__.py文件就是一个包. 假设文件夹下有如下结构 bake ├── test.py ├── __init__.py ...

  9. linux 安装telnet

    一.CentOS下查看系统是否已安装telnet rpm -qa | grep telnet telnet 是挂在 xinetd 底下的,所以同时查看是否安装了xinetd服务 rpm -qa | g ...

  10. 研究旧项目, 常用 sql 语句

    1. select all table select TABLE_NAME from CodingSystem.INFORMATION_SCHEMA.TABLES where TABLE_TYPE = ...