With a free API key, you can formally call Google's API for development.
Create a simple Google map:
<Html><Head><ScriptSrc= "Http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></Script><Script>functionInitialize () {VarMapprop={Center:NewGoogle.maps.LatLng (51.508742,-0.120850), Zoom:5, MapTypeId:google.maps.MapTypeId.ROADMAP};VarMap=NewGoogle.maps.Map (document.getElementById ("GoogleMap"), Mapprop);} Google.maps.event.addDomListener (window,‘Load‘, initialize);</script></head><body< Span style= "color: #0000ff;" >><div id= "GoogleMap" Style= "width:500px;height:380px;" ></div>< Span style= "color: #0000ff;" ></body></< Span style= "color: #800000;" >html>
The effect is as follows: (can be copied directly to run, of course you need to be able to access Google)
Now for the above example analysis is as follows:
(1) Add Google maps API Key
The Google maps API must be included in the first <script> tag in the example above:
<scriptsrc= "Http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM &sensor=false "></script>
The invocation type is in the following manner and contains two parameters:
<src= "Http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"> </Script>
Place the Google generated API key in the key parameter (key=your_api_key).
The sensor parameter is required to indicate whether the application uses a sensor (like GPS navigation) to locate the user's location. The parameter value can be set to TRUE or false.
HTTPS:
If your app is a secure HTTP (Https:http secure) app, you can use HTTPS to load the Google maps API:
<src= "Https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE" ></Script>
Asynchronous loading :
We can also load the Google maps API after the page is fully loaded.
The following example uses Window.onload to load Google maps after the page is fully loaded. The Loadscript () function created the load Google maps API <script> tags. Additionally, the Callback=initialize parameter is added at the end of the label, and Initialize () is executed as a callback function after the API is fully loaded:
function Loadscript () {var script = document.createelement ("script"); script.src = "http:// maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false&callback= Initialize " (2) Defining map Properties
Before initializing the map, we need to create a map Property object to define the properties of some maps:
var Mapprop = { Center:New Google.maps.LatLng (51.508742,-0.120850), zoom:7, MapTypeId:google.maps.MapTypeId.ROADMAP}; Enter (center point)
The Center property specifies the center of the map, which creates a center point on the map through coordinates (latitude, longitude).
Zoom (Scale series)
The Zoom property specifies the scale progression of the map. Zoom:0 shows the full scale of the entire Earth map.
Maptypeid (initial type of map)
The Maptypeid property specifies the initial type of the map.
The Maptypeid consists of four types as follows:
(3) Where to display Google maps
Google maps are usually used in <div> elements:
<id= "googlemap" style= "width:500px;height:380px;" ></div>
Note: The map will display the size of the map in the size set in the div, so we can set the size of the map in the <div> element.
(4) Create a Map object
var map=New Google.maps.Map (document.getElementById ("GoogleMap"), Mapprop); The code above uses the parameter (Mapprop) to create a new map in the <div> element (ID googlemap).
Tip: If you want to create multiple maps on a page, you just need to add a new map object.
The following example defines four map instances (four maps use different map types):
New Google.maps.Map (document.getElementById ("GoogleMap"), Mapprop); New Google.maps.Map (document.getElementById ("GoogleMap2"), MAPPROP2); New Google.maps.Map (document.getElementById ("GOOGLEMAP3"), MAPPROP3); (5) Loading the map
After the window is loaded, initialize the map object by executing the Initialize () function, which will ensure that Google maps is loaded after the page is fully loading:
Google.maps.event.addDomListener (window, ' Load ', initialize);
Map basics of the Google Maps interface API
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
