Google maps api demo 2
demo
/**
* @fileoverview Sample showing capturing a KML file click
* and displaying the contents in a side panel instead of
* an InfoWindow
*/ var map;
var src = 'https://developers.google.com/maps/tutorials/kml/westcampus.kml'; /**
* Initializes the map and calls the function that creates polylines.
*/
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-19.257753, 146.823688),
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
loadKmlLayer(src, map);
} /**
* Adds a KMLLayer based on the URL passed. Clicking on a marker
* results in the balloon content being loaded into the right-hand div.
* @param {string} src A URL for a KML file.
*/
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
} google.maps.event.addDomListener(window, 'load', initialize);
westcampus.kml
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>KmlFile</name>
<Style id="west_campus_style">
<IconStyle>
<Icon>
<href>https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png
</href>
</Icon>
</IconStyle>
<BalloonStyle>
<text>$[video]</text>
</BalloonStyle>
</Style>
<Placemark>
<name>Google West Campus 1</name>
<styleUrl>#west_campus_style</styleUrl>
<ExtendedData>
<Data name="video">
<value><![CDATA[<iframe width="480" height="360"
src="https://www.youtube.com/embed/ZE8ODPL2VPI" frameborder="0"
allowfullscreen></iframe><br><br>]]></value>
</Data>
</ExtendedData>
<Point>
<coordinates>-122.0914977709329,37.42390182131783,0</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Google West Campus 2</name>
<styleUrl>#west_campus_style</styleUrl>
<ExtendedData>
<Data name="video">
<value><![CDATA[<iframe width="480" height="360"
src="https://www.youtube.com/embed/nb4gvrNrDWw" frameborder="0"
allowfullscreen></iframe><br><br>]]></value>
</Data>
</ExtendedData>
<Point>
<coordinates>-122.0926995893311,37.42419403634421,0</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Google West Campus 3</name>
<styleUrl>#west_campus_style</styleUrl>
<ExtendedData>
<Data name="video">
<value><![CDATA[<iframe width="480" height="360"
src="https://www.youtube.com/embed/0hhiEjf7_NA" frameborder="0"
allowfullscreen></iframe><br><br>]]></value>
</Data>
</ExtendedData>
<Point>
<coordinates>-122.0922532985281,37.42301710721216,0</coordinates>
</Point>
</Placemark>
</Document>
</kml>
Google maps api demo 2的更多相关文章
- Google maps api demo
demo: <!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu ...
- 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 API V3 之 路线服务
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- google maps api申请的问题
现在已经改由统一的GOOGLE API控制台进行所有GOOGLE API的管理了. 方法是使用Google帐号登入 https://code.google.com/apis/console. 然后在所 ...
- Google maps API开发(一)(转)
一.加载Google maps API <script type="text/javascript" src="http://ditu.google.com/map ...
- Google maps API开发(二)(转)
这一篇主要实现怎么调用Google maps API中的地址解析核心类GClientGeocoder: 主要功能包括地址解析.反向解析.本地搜索.周边搜索等, 我这里主要有两个实例: 实例一.当你搜索 ...
- Google Maps API Web Services
原文:Google Maps API Web Services 摘自:https://developers.google.com/maps/documentation/webservices/ Goo ...
- Google maps API开发
原文:Google maps API开发 Google maps API开发(一) 最近做一个小东西用到google map,突击了一下,收获不小,把自己学习的一些小例子记录下来吧 一.加载Googl ...
随机推荐
- Pert图简介
活动图,即工程网络技术,又称PERT(Project Evaluation and Review Technique,PERT)技术. 参考地址: http://www.cnblogs.com/jiq ...
- C语言函数重入
C语言函数重入 可重入函数:可以被中断的函数,即这个函数执行时,可以中断其执行,可以由一个或多个任务并发使用,而不比担心数据错误. 不可重入函数(不安全函数) 不能运行在多任务环境下,除非能保证互斥( ...
- 【BZOJ2179】FFT快速傅立叶
[BZOJ2179]FFT快速傅立叶 Description 给出两个n位10进制整数x和y,你需要计算x*y. Input 第一行一个正整数n. 第二行描述一个位数为n的正整数x. 第三行描述一个位 ...
- java的double类型如何精确到一位小数?
java的double类型如何精确到一位小数? //分钟转小时vacationNum = (double)Math.round(vacationNum/60*10)/10.0;overTimeNum ...
- 网络模型+三次握手+四次挥手+DNS+HTTPS
网络模型+三次握手+四次挥手+DNS+HTTPS 这篇文章十分精华,所以整理一下: 一.网络模型 OSI七层模型,和TCP/IP五层模型(更为普遍) TCP/IP 协议集: 二.TCP协议(传输层)建 ...
- 【转】SpringMVC 拦截器
类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理. 常用场景: 1.日志记录:记录请求信息的日志,以便进行信息监控.信息统计.计算PV(Page View)等. 2.权限 ...
- JDK源码分析之concurrent包(一) -- Executor架构
Java5新出的concurrent包中的API,是一些并发编程中实用的的工具类.在高并发场景下的使用非常广泛.笔者在这做了一个针对concurrent包中部分常用类的源码分析系列.本系列针对的读者是 ...
- crash处理core文件
(一时心血来潮总结的,供大家参考,时间仓促,不足之处勿拍砖,欢迎讨论~)Crash工具用于解析Vmcore文件,Vmcore文件为通过kdump等手段收集的操作系统core dump信息,在不采用压缩 ...
- jquery全景拖动查看效果
http://sc.chinaz.com/jiaoben/140722166830.htm
- SET NAMES 'charset_name'
设置写入db和db返回读出结果的字符集character set https://dev.mysql.com/doc/refman/5.7/en/charset-connection.html SET ...