Extjs 2.x + Google Maps javascript API v3

Source: Internet
Author: User

I have not been busy with specific things recently. I just took the time to learn extjs and integrate the functions of a configuration tool originally developed by bcb6 into the existing web platform; extjs can be consolidated in practice. One of the region configuration functions is intended to integrate the previously made Google Maps. Google Maps originally used Google Maps javascript API V2, you need to register and apply for an API key, which is not so convenient to use. In the first half of 2009, Google launched Google Maps javascript API V3, which does not require an API key, and intends to learn it by the way. for more information about Google Maps, see my previous blog Web Development Series-GIS or visit its official website's Maps API series. next, we will introduce the simple extjs 2.x + Google Maps javascript API V3 Integrated Application-region configuration function (demonstrate basic map functions, support related location markers, drag tags to change location ).

 

1. Create a dependency on HTML page gmap.html and add extjs dependencies, such as related CSS and JS script files.

 <  Link   REL = "Stylesheet"   Type = "Text/CSS"   Href ="Ext/resources/CSS/ext-all.css"   />  <  Script   Language = "JavaScript"   SRC = "Ext/adapter/EXT/ext-base.js"  >  </  Script  >  <  Script   Language = "JavaScript"  SRC = "Ext/ ext-all.js"  >  </  Script  >  <  Script   Language = "JavaScript"   SRC = "Ext/ ext-lang-zh_CN-min.js"  >  </  Script  > 

2. Introduce the Google Maps javascript API script file (because it is not a related GPS application, we will set the relevant parameter sensor = false here)

 
<Script Type="Text/JavaScript" SRC="Http://maps.google.com/maps/api/js? Sensor = false & language = ZH-CN"></Script>

3. Javascript related to the region Configuration windowCode

 
 

4、final result: Download The gmap.html File

 

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.