使用的时候特别简单，也非常方便；这让我感觉到编程的未来应该更多的倾向于配置，让我们从更复杂的逻辑中解放出来更多的关注于业务！
1.代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Google 地图 JavaScript API 示例: 简单的地图</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
<script type="text/javascript">
function initialize() {
var mylatlng = new google.maps.LatLng(30.633186, 104.055394);
var mapOptions = {
zoom : 16, //缩放级别
center : mylatlng,
mapTypeId : google.maps.MapTypeId.ROADMAP, //ROADMAP-默认视图 SATELLITE-显示Google地球卫星图像 HYBRID-混合显示普通视图和卫星视图 TERRAIN-地形图
scaleControl : true, //比例尺
mapTypeControl : true,
mapTypeControlOptions : {
style : google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var mark = new google.maps.Marker( {
position : mylatlng,
map : map,
title : "宝贝QR码就在这里啦！"
});
var message = new google.maps.InfoWindow( {
content : "<a href='http://www.baidu.com'><img title='宝贝' height='100px' width='100px' src='http://www.52shehua.com/images/upload/Image/132.jpg'/></a>快来拿宝贝吧！",
size : new google.maps.Size(100, 100)
});
google.maps.event.addListener(mark, 'mouseover', function() {
message.open(map, mark);
});
google.maps.event.addListener(mark, 'mouseout', function() {
message.close(map, mark);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 600px; height: 400px"></div>
</body>
</html>
2.效果图
3.更多的参数配置：
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/reference.html#InfoWindowOptions
http://www.codechina.org/doc/google/gmapapi/#The_Hello_World_of_Google_Maps
.
分享到：
相关推荐
InfoWindow 是谷歌地图 Google Map API V3 中的一个组件，用于在地图上显示一个信息窗口。开发者可以使用 InfoWindow 对象来创建一个新的信息窗口，该对象提供了多种方法和属性，以便开发者可以自定义信息窗口的样式...
此外，Google Map API 还支持添加自定义标记（markers）、信息窗口（infowindows）、覆盖物（overlays）等元素，以增强地图的交互性和信息展示。例如，你可以创建一个带有自定义图标和信息窗口的标记： ```...
4. **标记（Marker）与信息窗口（InfoWindow）**：可以在地图上添加标记来表示特定的地理位置，点击标记时可以弹出信息窗口显示详细信息。 5. **路径绘制（Polyline）**：用于绘制多点之间的线路，常用于路线规划。...
通过学习谷歌地图API，你可以创建定制的地图，添加标记、路径、信息窗口，甚至进行复杂的地理编码和路线规划。下面将详细介绍谷歌地图API的一些关键知识点。 首先，你需要在Google Developers Console中注册一个...
谷歌地图API是一个强大的工具，它允许开发者在网页或应用程序中集成地图功能，提供导航、定位、地理编码、标记、信息窗口等丰富的地图交互体验。在这个"google地图API实现的一个简单demo"中，我们将探讨如何使用谷歌...
2. **标记（Marker）与信息窗口（InfoWindow）**：通过创建Marker对象可以在地图上添加图标，表示特定的位置。InfoWindow则用于展示与标记相关的详细信息，如地点名称、地址等，用户点击标记时可以弹出。 3. **路径...
Google Map API是一个强大的工具，它允许开发者在网页或应用程序中集成地图功能，提供导航、定位、地理编码等服务。这个“Google Map API基本源码”很可能是为了帮助初学者理解和应用这一API而准备的示例代码集合。...
谷歌地图API V3（Google Maps API V3）是谷歌提供的一套强大的工具和服务集合，旨在帮助开发者在网页上集成交互式地图。它支持多种功能，如自定义地图样式、添加标记、路线规划等。本篇文章将详细介绍API的各个组成...
谷歌地图API V3是Google提供的一种用于在网页上嵌入交互式地图的服务，它基于JavaScript编程语言，允许开发者创建各种地图应用。这个源码可能是谷歌地图API V3的一个示例项目，不含任何特定的API密钥，因此可以作为...
在GoogleMap API中，我们可能创建了特殊的标记（Marker）或信息窗口（InfoWindow），以显示特定的内容，如GPS点的详细信息。 总结起来，这个项目展示了如何将GoogleMap API与Asp.Net、数据库和GPS技术相结合，构建...
这通常通过在地图上放置信息窗口（InfoWindow）来实现，信息窗口可以包含文字描述、图片或其他富媒体内容。当用户点击地图上的某个点或图层要素时，信息窗口会弹出显示相关详情。 在实际开发中，`ExtPrj`这个压缩包...
Google Map API V3（3.9.12）是谷歌提供的一个用于在网页上嵌入交互式地图的服务，它是Google Maps JavaScript API的第三个主要版本。这个离线开发包允许开发者在没有网络连接的情况下进行地图应用的开发和测试，这...
GoogleMap API是Google提供的一套用于在网页中嵌入地图、进行地理定位和导航的开发工具。它允许开发者利用JavaScript语言创建互动式地图，实现地图的加载、缩放、平移、标记添加、路径绘制等功能。在中文环境下，...
本教程将通过一个实际的开发实例，详细介绍如何使用Google Map API来在网页上显示地图并添加坐标。 首先，我们需要了解的是Google Maps API的基础概念。API（Application Programming Interface）是一组预定义的...
Vue2googlemap支持Google Maps API中的各种事件监听，如点击地图、标记、路径等，可以很方便地在Vue组件中响应这些事件。 5. **自定义组件** 除了内置组件，还可以根据需求自定义组件，实现更复杂的地图交互逻辑...
Google Map API 是一个JavaScript库，它允许开发人员在他们的网站上嵌入交互式地图，提供动态定位、地图缩放、拖动、标记等功能。API的核心是GMap2对象，它是地图的基础，提供了创建和控制地图的各种方法。 ### 二...
谷歌地图API（Google Maps API）是谷歌提供的一套用于在网页上嵌入交互式地图的开发工具。V3版本是其一个重要的更新，旨在提高性能、简化API接口并减少对JavaScript库的依赖。这篇博文将深入探讨Google Maps V3的...
可以在地图上添加标记表示特定地点，并通过信息窗口显示详细信息。例如： ```javascript var marker = new google.maps.Marker({ position: myLatLng, map: map }); var infowindow = new google.maps....
5. **标记和信息窗口**：开发者可以通过`google.maps.Marker`对象在地图上添加标记，同时可以使用`google.maps.InfoWindow`创建弹出信息窗口，显示与标记相关的详细信息。 6. **地理编码服务**：Google Map API提供...
这个"真实好用的javaweb上使用的googlemap的demo"提供了实现上述功能的示例代码，可以帮助开发者快速理解和应用Google Maps API于JavaWeb项目中。通过学习和实践这个Demo，你可以创建具有地图功能的动态Web应用，...