<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Google Map</title> <%= stylesheet_link_tag 'jquery-ui.css', :media => 'screen' %> <%= javascript_include_tag "jquery.js" %> <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script> <script type="text/javascript"> // require jquery var App = {}; App.Maps = { centerLatLng: null, googleMap: null, markerOptions: null, infoWindow: null, defaultOptions: null, hotel_icon: null, place_icon: null, init: function () { this.defaultOptions = $.extend(this.defaultOptions, { zoom: 13, center: null, scaleControl: true, navigationControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }); this.hotel_icon = new google.maps.MarkerImage('2.png', new google.maps.Size(27, 31), new google.maps.Point(0, 0), new google.maps.Point(14, 29)); this.place_icon = new google.maps.MarkerImage('1.png', new google.maps.Size(27, 31), new google.maps.Point(27, 0), new google.maps.Point(14, 29)); this.centerLatLng = new google.maps.LatLng(39.983421, 116.337769); this.defaultOptions.center = this.centerLatLng; this.googleMap = new google.maps.Map(document.getElementById("map_canvas"), this.defaultOptions); this.infoWindow = new google.maps.InfoWindow({ content: '' }); this.markerFactory($.extend(this.markerOptions, {})); for (var i = 0; i < 5; i++) { this.markerFactory($.extend(this.markerOptions, {latLng: new google.maps.LatLng(39.993421, 116.307769 + i * 0.01), title: 'ss' + i, content: 'cc' + i, i: i})); } }, markerFactory: function (options) { var marker = new google.maps.Marker({ position: options.latLng || this.centerLatLng, map: this.googleMap, icon: options.icon, title: options.title }); if (options.latLng) { google.maps.event.addListener(marker, 'click', function () { App.Maps.infoWindow.setContent(options.content); App.Maps.infoWindow.setPosition(options.latLng); App.Maps.infoWindow.open(App.Maps.googleMap); }); } } }; </script> <style type="text/css"> #google_map_div { height: 300px; width: 300px; } </style> </head> <body onload="initialize()"> <div id="google_map_div" ></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> <style> #map_canvas { margin: 0; padding: 0; width:600px; height:400px; border: 1px solid black; } </style> <title>Google Maps JavaScript API v3 Example: Map Simple</title> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(39.993421,116.337769); var options = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, poistion: google.maps.ControlPosition.TOP_RIGHT, mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE] }, navigationControl: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN }, scaleControl: true, disableDoubleClickZoom: true, draggable: false, streetViewControl: true, draggableCursor: 'move' }; var map = new google.maps.Map(document.getElementById("map_canvas"), options); var marker = new google.maps.Marker( { position: latlng, map: map, title: 'Click me' }); var infowindow = new google.maps.InfoWindow({ content: 'Location info: Country Name: LatLng:' }); google.maps.event.addListener(marker, 'click', function () { // Calling the open method of the infoWindow infowindow.open(map, marker); }); } window.onload = initialize; </script> </head> <body onload="initialize()"> <div id="map_canvas"> </div> </body> </html>
if ($('#map-canvas .gmnoprint').length > 0) {
var str, test = '<div style="float: left;">' +
'<div id="testDis" draggable="false" title="">' +
'<label class="checkbox" >测距</label></div ></div>'
var gmnoprints = $('#map-canvas .gmnoprint');
for (var i = 0, k = gmnoprints.length; i < k; i++) {
if (gmnoprints[i].style['right'] == '0px' && gmnoprints[i].style['top'] == '0px') {
str = gmnoprints[i];
break;
}
}
google map API https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-CN
相关推荐
谷歌地图 Google Map API V3 中文开发文档是 Google 公司提供的一种基于 Web 的地图应用程序接口,允许开发者在自己的网站或应用程序中嵌入谷歌地图,以提供地图检索、路线规划、地标显示等功能。本文档旨在为开发者...
【标题】:GoogleMap地图控件应用源码 在IT领域,GoogleMap地图控件是开发者常用的一个工具,它允许我们在应用程序中集成谷歌地图的功能,包括定位、导航、路线规划等。GoogleMap地图控件通常以API的形式提供,...
Google Map API是Google提供的一套接口,允许开发者在自己的应用程序或网站上嵌入Google Maps的功能。通过API,开发者可以获取地图数据、设置自定义标记、创建路线、添加图层以及实现地理位置服务等多种功能。 二、...
Googlemap静态地图是一种无需使用JavaScript或动态网页技术即可将Google Maps嵌入到网页中的简单方法。通过Google Maps API的Static Maps服务,开发者可以通过发送包含特定参数的HTTP请求,来生成自定义的地图图片并...
其次,**Google Maps API**是谷歌提供的一套JavaScript接口,允许开发者在网页上嵌入地图,执行各种地图操作,如定位、导航、标记、图层管理等。通过调用Google Maps API提供的函数和方法,我们可以将动态地图集成到...
谷歌地图API(Google Maps API)是谷歌提供的一套用于在网页上嵌入交互式地图的开发工具。V3版本是其一个重要的更新,旨在提高性能、简化API接口并减少对JavaScript库的依赖。这篇博文将深入探讨Google Maps V3的...
Google Map API 是一款强大的工具,它允许开发者在自己的网站或应用程序中嵌入地图功能,提供定位、导航、地理编码、路线规划等多种服务。本示例将深入探讨如何使用 Google Map API,帮助你理解和掌握其核心概念及...
内容中插入地图的短代码或标签,例如,在文章中插入`{googlemap}`,然后指定相关坐标,即可在文章中生成地图。 6. **兼容性**:此插件适用于Joomla! 1.0x和1.5+版本,这意味着它可能不兼容较新的Joomla!版本。随着...
使用ASP.NET版谷歌地图GoogleMap控件,开发者可以轻松地在网页上嵌入地图,通过设置不同的属性和方法来控制地图的行为。例如,可以设置地图的初始中心点、缩放级别、地图类型(卫星、地形、道路图等),还可以添加...
谷歌地图API V3是Google提供的一套用于在网页上嵌入地图、进行地理位置处理的JavaScript接口。这个API允许开发者在自己的网站上创建交互式地图,包括但不限于定位、标记、信息窗口、路线规划等功能。本教程将对谷歌...
开发者可以通过JavaScript API在网页中嵌入交互式地图,然后通过Webview或者自定义的浏览器控件在VC++应用中展示这些地图。 要实现VC++与谷歌地图API的交互,你需要以下几个步骤: 1. **注册并获取API密钥**:在...
例如,加载OpenStreetMap地图的代码如下: ```javascript var map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© ...
标题中的“基于SuperMap Objects写的GoogleMap地图切割程序”指的是使用SuperMap Objects这一GIS(地理信息系统)开发组件来实现对Google Map地图数据的处理和切割功能。SuperMap Objects是SuperMap公司提供的一套...
在Asp.net开发中,GoogleMap地图控件是一种常见的工具,它能够帮助开发者在网页上集成强大的地图功能,包括但不限于展示地图、定位、导航、标注等功能。本源码是针对GoogleMap API进行封装的C#实现,旨在提供一个...
标题"Google 地图 google map api / 地图有关"表明了这个压缩包可能包含与Google地图API相关的代码示例或教程,Google Map API是Google提供的一项服务,允许开发者在自己的网站或应用中嵌入交互式地图,实现定位、...
在这个特定的项目中,“VC++/MFC 对话框嵌入Google Map测试程序”尝试在MFC对话框中集成Google Maps服务,以便用户可以在应用内部查看和操作地图。 **Google Maps API** Google Maps API 是一套Web服务,允许...
【GoogleMap地图搜索(Silverlight版)源码详解】 GoogleMap地图搜索(Silverlight版)是一款基于Microsoft Silverlight技术开发的应用程序,它允许用户通过Silverlight客户端与Google Maps API进行交互,实现对地理...
Google 地图 API 是一款功能强大且广泛应用的 Web 服务,允许开发者在自己的网站中嵌入 Google 地图,添加丰富的功能和交互性,提供更好的用户体验。下面是 Google 地图 API 的基础知识点和重要概念: 1. Google ...
下面我们将深入探讨嵌套地图的概念、如何在网页中嵌入谷歌地图以及相关的控制功能。 嵌套地图是指在一个更大的地图区域内,插入一个或多个小的地图视图,这些小视图通常用于展示特定区域的详细信息。这种设计模式在...