Google Maps application developing -- Quick Start

Source: Internet
Author: User
Brief Preface

There are some fatal steps to make the Google map working. First of all, add a reference of Google Maps API in the head element:

 
<SCRIPT type = "text/JavaScript" src = "http://maps.google.com/maps/api/js? Sensor = false "> </SCRIPT>

Second, make the code run while page loading:

<SCRIPT type = "text/JavaScript"> window. onload = function () {var mapoptions = {ZOOM: 3, center: new Google. maps. latlng (37.09,-95.71), maptypeid: Google. maps. maptypeid. roadmap, maptypecontrol: True, maptypecontroloptions: {style: Google. maps. maptypecontrolstyle. dropdown_menu}, scalecontrol: True, disabledoubleclickzoom: true}; var map = new Google. maps. map (document. getelementbyid ('map'), mapoptions) ;}</SCRIPT>

As you see, the last sentence code is most important. to initialize the object Map need two parameters, one is a HTML element which used to be a DIV, the other parameter is an object conclude some mizmizations associated with the final appearance of the map in Web pages.

Introduce to mapoptions

I wowould like to introduce some very useful options to customize the map's performance.

1. disabledefaultui

By setting this property to true, You will disable the default user interface.

2. maptypecontrol

With this property, you can control whether the maptypecontrol will be displayed. The maptypecontrol is positioned in the upper-right coner of the map.

3. maptypecontroloption

This object has three properties: style, position, maptypeids

Style: horizontal_bar (default), dropdown_menu

Position: Bottom, bottom_left, bottom_right, left, right, top, top_left, top_right

Maptypeids: Google. Maps. maptypeid. roadmap, Google. Maps. maptypeid. Satellite

4. navigationcontrol

This property displays or hides the navigation control.

5. navigationcontroloptions

Position

Style: samll (default), Android, zoom_pan

6. scalecontrol7. scalecontroloptions

With this property, you can control how the scale control will be displayed. Just like the navigationcontroloptions, scalecontroloptions has two properties, position and style.

8. keyboardshortcut

This property enables or disables the ability to use the keyboard to navigate and zoom the map.

9. disabledoubleclickzoom10. draggable11. scrollwheel12. streetviewcontroluse Method to Control map settings

You can control the map setting while the map is been initialing, some methods can do this either. For example, there is a method called setoptions () which is very useful:

 
VaR mapoptions = {ZOOM: 12}; map. setoptions (mapoptions );

To get the current zoom level, there's a method called getzoom (). It returns a number that indicates the current zoom level. To set the zoom level, use setzoom ().

By parity of reasoning, you can use getcenter (0 and setcenter (latlng: latlng) to get and change the center of the map. getmaptypeid () and setmaptypeid (maptypeid: maptypeid) are available to get and set the maptype.

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.