Application of Google map in real estate map 1) (conversion)

Last Update:2014-07-29 Source: Internet

Author: User

Tags intl

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Application of Google map in real estate map 1)
Application of Google map in real estate map 2)
Initial Application of Google map in real estate map 3)

Application of Google map in real estate map 4)

In the past, maps of real estate always used youdao maps. Although youdao maps are good, you still decided to use Google Maps to re-develop ^ _ ^ for better purposes, below is a developed simple application http://xf.house.163.com/gz/map/000B.html

1) Integrate Google Maps javascript API V3 with Google local search API

Google Maps javascript API v3
Address http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/

Google Maps javascript API V3 documentation is really clear to read, and various demos are also complete, and the Forum has huge support for the Forum, compared with the Google Maps javascript API V3 and V2 versions, although Google Maps API of version 3rd looks familiar with version 2nd, there has been a major change in the internal mechanism, especially for mobile browsers, It is specially designed for iPhone and Android devices. Google has already announced that it will not continue to support V2, so it chose V3.

Google local search API
Address http://code.google.com/intl/zh-CN/apis/maps/documentation/localsearch/index.html

The above address is the latest address of local search, but it is depressing that deprecated is mounted, and the same documentation is quite complete. Before applying for an API key for your domain name, this is the registration address.

The integration of Google Maps javascript API V3 and Google local search API found that these two versions are incompatible. The local search API actually uses the interfaces of maps V2. To solve this problem, an intermediate stepping stone is required to make the two compatible, so IFRAME is selected. The parent page uses Google Maps V3, and the Child pages use the local search API. When you need to apply it to a local search, the parent page passes query conditions to the Child page. The Child Window uses the local search API to obtain the query result and returns it to the parent page. This forms a stepping stone, this avoids conflicts between the two due to version issues. Of course there are other methods, but IFRAME should be relatively simple to handle. Below is a demo

Parent page: uses Google Maps javascript API V3, where the http://maps.google.com/maps/api/js URL points to the location of a Javascript file that loads all the symbols and definitions required to use the Google Maps API of version 3rd.

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = GBK"/>
<Title> Google Ajax search API sample </title>
<Style type = "text/CSS">
@ Import URL ("http://www.google.com/uds/css/gsearch.css ");
@ Import URL ("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css ");
@ Import URL ("http://www.google.com/uds/css/gsearch.css ");
@ Import URL ("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css ");

</Style>
<SCRIPT type = "text/JavaScript" src = "http://xf.house.163.com/product/js/jquery.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "http://maps.google.com/maps/api/js? Sensor = false "> </SCRIPT>
<SCRIPT type = "text/JavaScript">
VaR map;
VaR lat = 23.116193;
VaR lng = 113.374525;
VaR markersarray = [];
VaR export warray = [];
Function initialize (){
VaR mapdiv = Document. getelementbyid ('map-canvas ');
Map = new Google. Maps. Map (mapdiv ,{
Center: new Google. Maps. latlng (Lat, LNG ),
Zoom: 15,
Maptypeid: Google. Maps. maptypeid. Roadmap
});
}

// Delete the stack Layer
Function deleteoverlays (){
If (markersarray ){
For (I in markersarray ){
Markersarray [I]. setmap (null );
}
Markersarray. Length = 0;
}
}

// Close the information Prompt window
Function closewindows (){
If (export warray ){
For (I in Alibaba warray ){
Export warray [I]. Close ();
}
}
}

Function show (results ){
Parent. deleteoverlays ();
Export warray. Length = 0;
For (VAR I = 0; Results & I <results. length; I ++ ){
Showone (results [I]);
}
}
Function showone (result ){
// Console. debug (result. title + "," + result. lat + ":" + result. LNG + "," + result. streetaddress + "," + result. city + "," + result. URL );
VaR infowindow = new Google. Maps. infowindow ({
Content: result.html
});
VaR marker = new Google. Maps. Marker ({
Position: new Google. Maps. latlng (result. Lat, result. lng ),
Map: Map
});
Markersarray. Push (Marker );
Export warray. Push (infowindow );
Google. Maps. event. addlistener (Marker, 'click', function (){
Closewindows ();
Infowindow. Open (MAP, marker );
});
}

Function searchmap (){
VaR keyword = Document. getelementbyid ("keyword"). value;
Mapiframe. Window. loadmap (23.116193, 113.374525, keyword );
}
Google. Maps. event. adddomlistener (window, 'load', initialize );
</SCRIPT>
</Head>
<Body style = "">
<Div id = "Map-canvas" style = "width: 600px; Height: 500px"> </div>
<Input type = "text" name = "keyword" id = "keyword"/>
<Input type = "button" onclick = "searchmap ();" value = "query" id = "BTN"/>
<IFRAME name = "mapiframe" id = "mapiframe" style = "display: none" src = "local.html"> </iframe>
</Body>
</Html>

Child page: http://www.google.com/jsapi? The key must be applied for and bound to the domain name on Google.

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = GBK"/>
<SCRIPT src = "http://www.google.com/jsapi? Key = ABQIAAAAtV_DTJOYJT-9cvTO-5KJ2BSnjw5qeDlzCnItJoREFggHbBwu_RQBEyFqvq_vMlzqsS4afIB8ZIvMkw "type =" text/JavaScript "> </SCRIPT>
<SCRIPT type = "text/JavaScript">
Google. Load ('search', '1 ');
Google. Load ('maps ', '2 ');

Function loadmap (Lat, LNG, keyword ){
VaR point = new glatlng (Lat, LNG );
Console. debug (keyword + "-" + lat + "," + LNG );
Searchmap (point, keyword );
}

Function searchmap (point, keyword ){
VaR searcher = new Google. Search. localsearch ();
Searcher. setcenterpoint (point );
Searcher. setresultsetsize (gsearch. large_resultset );
Searcher. setsearchcompletecallback (this, function (){
Parent. Show (searcher. Results );
});
Searcher.exe cute (keyword );
}
</SCRIPT>
</Head>
<Body> </body>
</Html>

Extract several common local search api reference

New Google. Search. localsearch (): Creates a localsearch service.

Searcher. setcenterpoint (point): it accepts a single variable, which can be a string, Google. Maps. MAP2, or Google. Maps. latlng. If it is a string, it will try to parse the string into Google. Maps. latlng

Searcher. setresultsetsize (8): Call this method to select the number of results returned by each searcher

Searcher. setrestriction (): Set the search structure type.

Searcher. setsearchcompletecallback (): This method is used to register an object and method to notify the search to complete. Applications can use opt_arguments to input environment parameters at will.

Searcher.exe cute (keyword): Call this method to start a new search

After the version conflict between map and local search is solved in the first step, we can perform all the development in the following. There are many Event-related interfaces in the UI provided by Google Maps javascript API, but it may not be able to directly apply to our needs. We also need to use the inheritance base class mvcobject, overlayview, and so on to continue encapsulation.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More