SuperPlan(5)TaoBao Winner - UI - Google Map-优快云博客

本文链接：https://blog.youkuaiyun.com/magic_dreamer/article/details/84428452

本文详细介绍了如何使用 Google Maps API 创建交互式地图应用。从获取 API 密钥到实现地图的基本展示，再到添加标记和信息窗口，一步步引导读者掌握地图应用开发的核心技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SuperPlan(5)TaoBao Winner - UI - Google Map

9. Google Map
9.1 Reference URL
https://developers.google.com/maps/documentation/javascript/reference

9.2 Obtaining an API Key
Visit https://code.google.com/apis/console
Click the [Services]
Find [Google Maps API v3] and [Google Maps API v2] and turn them on.
[API Access] ---> [Simple API Access] ---> [Key for browser apps(with referers)]

9.3 Simple Map Example
A demo file named googlemap_simple_map.html
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html,body,#map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(30.243089,-97.798446),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map-canvas"></div>
</body>

</html>

When we load the body page, we will initialize the map. The ZOOM control the big or small, and longitude and latitude control the location.

We use this script to add the google map API
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=asdfasdfasdf"></script>

Key is the GOOGLE map key we get from the previous steps.

Asynchronously Loading the API
Use the loadScript method to asynchronously load the API script with a callback method. Sample in googlemap_simple_asynchronous.html
<script>
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(30.243089,-97.798446),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}

function loadScript(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=My_KEY&sensor=true&callback=initialize";
document.body.appendChild(script);}
window.onload = loadScript;

</script>

Map Types
ROADMAP displays the normal, default 2D tiles of Google Maps.
SATELLITE displays photographic tiles.
HYBRID
TERRAIN displays physical relief tiles for displaying elevation and water features.

9.4 Add Marker and Info
Some related class
https://developers.google.com/maps/documentation/javascript/reference#InfoWindow
https://developers.google.com/maps/documentation/javascript/reference#Marker
https://developers.google.com/maps/documentation/javascript/reference#MapsEventListener

The example file named googlemap_marker_info.html is as follow:
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(30.243089,-97.798446);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// Information Box Content
var InfoBoxContent = '<div id="infoboxcontent">' +
'<h1>Hello World!</h1><p>Example link <a href="http://sillycat.iteye.com">Blog</a></p>' +
'<img width="240" height="180" src="http://dl.iteye.com/upload/picture/pic/84931/18cd6d9d-1905-35d8-a9e2-b4f5d7b59eb4.jpg" >' +
'</div>';
//InfoWindow
var InfoBox_1 = new google.maps.InfoWindow({
content: InfoBoxContent
});
var InfoBox_2 = new google.maps.InfoWindow({
content: InfoBoxContent
});
// Markervar marker_latlng_1 = new google.maps.LatLng(30.243416,-97.813464);var marker_1 = new google.maps.Marker({position: marker_latlng_1, map: map,title:"Park 1"});
var marker_latlng_2 = new google.maps.LatLng(30.241691,-97.794784);var marker_1 = new google.maps.Marker({position: marker_latlng_2, map: map,title:"Park 2"});
// Click marker to open information boxgoogle.maps.event.addListener(marker_1, 'click', function() {InfoBox_1.open(map, marker_1);});
google.maps.event.addListener(marker_2, 'click', function() {InfoBox_2.open(map, marker_2);});
}

function loadScript(){var script = document.createElement("script");script.type = "text/javascript";script.src = "http://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=true&callback=initialize";
document.body.appendChild(script);
}

window.onload = loadScript;

</script>

It is working, it is really easy since this is a well documented open API.

10. Backbone
come soon

References:
BackBone
http://dailyjs.com/2012/11/29/backbone-tutorial-1/

http://www.youtube.com/watch?v=HsEw2i4wQMM
https://github.com/thomasdavis/backbonetutorials/tree/gh-pages/videos/beginner

http://backbonejs.org/#introduction

http://coenraets.org/blog/2012/02/sample-app-with-backbone-js-and-twitter-bootstrap/

google map
https://github.com/eschwartz/backbone.googlemaps
http://gmaps-samples-v3.googlecode.com/svn/trunk/toomanymarkers/toomanymarkers.html
http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

https://developers.google.com/maps/documentation/javascript/tutorial

examples
http://g-hk.org/web-programming/google-maps-api-examples/

Basic Examples
https://developers.google.com/maps/documentation/javascript/examples/map-simple-async
https://developers.google.com/maps/documentation/javascript/examples/map-simple

Marker and Info
http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html
https://developers.google.com/maps/documentation/javascript/reference#InfoWindow