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

        var marker = new google.maps.Marker({

            position: new google.maps.LatLng(40.7257, -74.0047),

            map: map,

            title: 'Click me',

            //icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png'

        });

        

        var infowindow = new google.maps.InfoWindow({

        content:'<div class="info">Hello world</div>'

        });

        

        infowindow.open(map, marker);

        

        // Adding a click event to the marker

/*        google.maps.event.addListener(marker, 'click', function() {

        // Calling the open method of the infoWindow

        infowindow.open(map, marker);

        });*/

    };

})();

 

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 地图中添加标记和说明的更多相关文章

  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 test中指定只运行一部分测试

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何在google test中指定只运行一部分测试.

  4. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  5. 如何在Android Studio中添加注释模板信息？

    如何在Android Studio中添加注释模板信息? 在开发程序的时候,我们一般都会给文件自动添加上一些关于文件的注释信息,比如开发者的名字,开发的时间,开发者的联系方式等等.那么在android ...

  6. 如何在RCP程序中添加一个banner栏

    前言:这段时间还算比较空闲,我准备把过去做过的有些形形色色,甚至有些奇怪的研究总结一下,也许刚好有人用的着也不一定,不枉为之抓耳挠腮的时光和浪费的电力.以前有个客户提出要在RCP程序中添加一个bann ...

  7. 文章翻译：ABP如何在EF core中添加数据过滤器

    原文地址:https://aspnetboilerplate.com/Pages/Documents/Articles%5CHow-To%5Cadd-custom-data-filter-ef-cor ...

  8. [译]如何在Unity编辑器中添加你自己的工具

    在这篇教程中你会学习如何扩展你的Unity3D编辑器,以便在你的项目中更好的使用它.你将会学习如何绘制你自己的gizmo,用代码来实现创建和删除物体,创建编辑器窗口,使用组件,并且允许用户撤销他们所作 ...

  9. 如何在web项目中添加javamelody monitoring 监控。

    1.在工程的maven pom中添加依赖javamelody-core <!-- monitoring监控 --><!-- https://mvnrepository.com/art ...

随机推荐

  1. Shell脚本之流程控制（if、for、while）

    if 判断 if语句的三种格式: (1)if (2)if else (3)if elif else 语法格式如下: #if 语法格式 if 条件 then 命令1... 命令2... fi #if e ...

  2. 【LOJ】#3102. 「JSOI2019」神经网络

    LOJ#3102. 「JSOI2019」神经网络 首先我们容易发现就是把树拆成若干条链,然后要求这些链排在一个环上,同一棵树的链不相邻 把树拆成链可以用一个简单(但是需要复杂的分类讨论)的树背包实现 ...

  3. DP_Wooden Sticks

    There is a pile of n wooden sticks. The length and weight of each stick are known in advance. The st ...

  4. BridgeOverARoughRiver(POJ-3404)【AdHoc】

    题目链接:https://vjudge.net/problem/POJ-3404 题意:n个极限速度不同的人要过桥,一开始所有人在桥的一边,每次最多两个人同时过桥,过桥时需要用一把火炬并且全场只有一把 ...

  5. lxml and 代理ip

    pip install lxml 导包From lxml import etree 1. 注意这个是本地html就直接使用etree.parse即可 2. html_etree=etree.parse ...

  6. 【Python基础】08_Python中的列表

    1.列表的定义 List(列表)是Python中使用的 最频繁 的数据类型,其他语言通常叫数组 专门用于存储 一串信息 列表用 [] 定义,数据 之间用 , 分割 列表的 索引(位置) 从 0 开始 ...

  7. luogu P4762 [CERC2014]Virus synthesis (回文自动机)

    大意: 初始有一个空串, 操作(1)在开头或末尾添加一个字符. 操作(2)在开头或末尾添加该串的逆串. 求得到串$S$所需最少操作数. 显然最后一定是由某个偶回文通过添加字符得到的, 那么只需要求出所 ...

  8. Jobs（二） Servlet的配置

    折腾了一会,终于实现了:在浏览器中输入数据,然后在Java类中取出输出,并使浏览器重定向(接收一个request,返回一个response). 这里有几个问题需要详细记录一下. 首先是request的 ...

  9. cas sso 整合记录

    首先说明下,我使用的cas-server版本是4.2.1 整合过程中遇到的问题及解决方式如下 1.因为使用https的话证书是个麻烦事,所以启用http 修改cas-server-webapp下的ca ...

  10. C语言两个特别大的整数类型相加超出范围使用两个技巧

    技巧1:用long (%ld)或者long long(%lld)类型存取 技巧2:当两个同号的数字相加,放到等号的另一边,变成减号 问题: 给定区间[-2的31次方, 2的31次方]内的3个整数A.B ...