Open API: Google map experience

Source: Internet
Author: User
ArticleDirectory
    • How to read API
    • Books

Previous reference resource set http://www.cnblogs.com/2018/archive/2011/08/27/2155274.html that introduced open APIs

The following uses a common open API called Google map as an example to describe how to apply it.

Concept Basics

The current version is 3, and there are major changes to the service relative to version 2.

Marker

An icon used to display information at a specific location on a map

A marker is basically a small image that is positioned at a specific place on a map. Its most frequent incarnation is the familiar drop-shaped marker that is the default marker in Google Maps

Related and Icon references

Http://gmaps-samples.googlecode.com/svn/trunk/markers/

Http://code.google.com/p/google-maps-icons

If too many icons are displayed in a region, you can use the following tool library group to display marker:

Markerclusterer

Http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries

Http://google-maps-utility-libraryv3.googlecode.com/svn/tags/markerclusterer/1.0/

Markermanager

Http://google-maps-utility-libraryv3.googlecode.com/svn/tags/markermanager/1.0/

Marker icon address

Http://www.powerhut.co.uk/googlemaps/custom_markers.php

Http://www.cycloloco.com/shadowmaker/shadowmaker.htm

Http://www.cartosoft.com/mapicons/

Infowindow

Window used to display relevant information

Geocoding

Geocoding is an integrated part of the Google Maps API. When you send in an address, you get

Coordinates for that address back. It's that simple! This is very handy in circumstances where you only have an address, but you still somehow want to automatically plot it on a map.

Because this computation consumes resources, currently only 2500 requests are run for one IP address within 24 hours.

API

Google map is a library application support provided by JavaScript.

Http://code.google.com/apis/maps/documentation/javascript/reference.html

Example

Introduce the Google map API to the page:

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

Creating maps and related processing through APIS:

// Creating a reference to the mapdiv
VaR mapdiv = Document. getelementbyid ('map ');

// Creating a latlng for the center of the map Beijing
VaR latlng = new Google. Maps. latlng (39.904, 116.407 );
VaR Options = {
Zoom: 10,
Center: latlng,
Maptypeid: Google. Maps. maptypeid. roadmap,
Maptypecontrol: True,
Maptypecontroloptions :{
Style: Google. Maps. maptypecontrolstyle. dropdown_menu,
Maptypeids :[
Google. Maps. maptypeid. roadmap,
Google. Maps. maptypeid. Satellite
],
Position: Google. Maps. controlposition. top_right
},
Disabledefaui UI: false,
Scrollwheel: True,
Draggablecursor: 'move ',
Scalecontrol: True,
Disabledoubleclickzoom: True
};

// Creating the map
Map = new Google. Maps. Map (mapdiv, options );

Effect:

Address of the preceding example:

Https://skydrive.live.com /? Cid = 56b433ad3d1871e3 & SC = documents & id = 56b433ad3d1871e3% 21266

After downloading the file, you can view it in the browser. The main operations are as follows:

1. Click a prompt on the map.

2. Click "Take coordinates" to query and display a marker prompt. Double-click a marker to view details.

Visible, not manyCodeWe can build a rich array of applications.

Refer to how to read API methods

The constructor method is as follows:

Map (mapdiv: node, opts? : Mapoptions)

Method name, which is a parameter variable in parentheses. The Parameter definition is as follows:

Variablename: variabletype

Is the variable name before the colon, and the variable type after the variable name ?, Optional Parameter

Data Types

Types: native type (such as string, number, Boolean), custom type (such as mouseevent, streetviewpanorama)

Note that array and mvcarrays are somewhat different.

Array. <maptypeid>

Indicates an array type that contains maptypeid objects.

Mvcarrays are a special kind of array, so the notation for them looks the same. Here's what the overlaymaptypes property of the map object looks like:

Mvcarray. <maptype>

In this case, it means that the value for this property is an mvcarray that contains maptype objects.

The namespace

All the classes of the Google Maps API reside in the namespace Google. maps. that means whatever class or method you want to call always starts with Google. maps. here's, for example, how to call the constructor for the marker class:

New Google. Maps. Marker ();

So, whenever you need to use a class or object, make sure to always Insert the namespace name in front of it.

Books

Beginning Google Maps API 3 This book provides a detailed description of Google APIs. For more information, see

Http://www.svennerberg.com/bgma3

Http://www.apress.com/9781430228028

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.