Map basics of the Google Maps interface API

Source: Internet
Author: User

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:

    • Google.maps.MapTypeId.HYBRID: The main street transparent layer showing satellite imagery
    • Google.maps.MapTypeId.ROADMAP: Show a normal street map
    • Google.maps.MapTypeId.SATELLITE: Displaying satellite images
    • Google.maps.MapTypeId.TERRAIN: Displays a map with natural features such as terrain and vegetation

(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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.