Google Maps JavaScript API allows you to use Google Maps on your own Web pages. Before using the API, you should apply for an API key, request API Key please: http://code.google.com/apis/ Maps/signup.html. This assumes that the key you have obtained is: ABQIAA.
The acquisition of jquery is no longer burdensome, and there are many introductions to jquery on the web.
We then use the jquery and Google Maps JavaScript APIs to combine the interesting map effects of Google Map to the goal of familiarizing ourselves with the Google Maps JavaScript API.
Let's start with a Hellochina:
(1) Writing HTML code in an HTML file:
Map.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps 与 JQuery结合使用</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAA" type="text/javascript"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="map.js"></script>
<body>
<div id="map" style="top:100px;left:300px;width: 600px; height: 400px"></div>
<div id="message"></div>
</body>
(2) in the JS file to write JS code
Map.js
$(document).ready(function()
{
//检查浏览器兼容性
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(36.94, 106.08), 4);//中国的经纬度以及地方放大倍数
map.setMapType(G_SATELLITE_MAP);
//document卸载时触发
$(window).unload(function (){
$('.').unbind();
GUnload();
});
}else
{
alert('你使用的浏览器不支持 Google Map!');
}
});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
