<!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请求，来生成自定义的地图图片并...
基于JavaScript+CSS的地图插件-文章中插入交互式地图（支持GoogleMap、高德地图、百度地图、Geoq地图和 OpenStreetMap）.zip 文章中插入交互式地图。它支持多种地图类型,包括 GoogleMap、高德地图、百度地图、Geoq...
其次，**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控件，开发者可以轻松地在网页上嵌入地图，通过设置不同的属性和方法来控制地图的行为。例如，可以设置地图的初始中心点、缩放级别、地图类型（卫星、地形、道路图等），还可以添加...
开发者可以通过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 ...
下面我们将深入探讨嵌套地图的概念、如何在网页中嵌入谷歌地图以及相关的控制功能。 嵌套地图是指在一个更大的地图区域内，插入一个或多个小的地图视图，这些小视图通常用于展示特定区域的详细信息。这种设计模式在...