csua.org/u/cus -> www.google.com/apis/maps/documentation/#The_Hello_World_of_Google_Maps
Properties Introduction The "Hello World" of Google Maps The easiest way to start reading about an API is to see a simple example. file=api&v=1&key=abcdefg" type="text/javascript"></script> </head> <body> <div id="map" style="width: 300px; height: 300px"></div> <script type="text/javascript"> //<!
file=api&v=1) that includes all of the symbols you need to create Google Maps on your pages. file=api&v=1&key=abcdefg" type="text/javascript"></script> The main class exported by the Google Maps API is GMap, which represents a single map on the page. You can create as many instances of this class you want (one for each map on the page). A map is embedded in a contain er, which is typically a div element. The methods for manipulating and adding overlays to map instances are det ailed below. Browser Compatibility Google Maps is not compatible with every web browser. Google Maps current ly supports recent versions of Firefox/Mozilla, IE 55+, Safari 12+, an d sort of supports Opera. Since different appli cations require different behaviors for users with incompatible browsers , the Maps API provides a global method (GBrowserIsCompatible to chec k compatibility, but it does not have any automatic behavior for incompa tible browsers. file=api&v=1 will parse on almost every browser without errors, so you can safely include the script before checking for compatibility. None of the examples in this document besides the one above check for GBr owserIsCompatible(), nor do they print any message for older browsers. C learly real applications should do something more friendly, but we have omitted these checks to make the examples more readable. XHTML and VML We recommend that you use standards-compliant XHTML on pages that contain maps. When browsers see the XHTML DOCTYPE at the top of the page, they execute the page in "standards compliant mode," which makes layout and b ehaviors much more predictable across browsers. Likewise, if you include Polylines on your map, you need to include the V ML namespace in your XHTML document for IE browsers. org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <style type="text/css"> v\:* { behavior:url(#default#VML);
We will try to run the old and new version concurrently for about a month , after which the old version will be turned off. The Maps team will transparently update the API with the most recent bug fixes and performance enhancements.
html) Map Movement and Animation The recenterOrPanToLatLng method does a continuous pan if the lat/lng is in the current map viewport, or it does a discrete movement otherwise.
html) Adding Controls to the Map You can add controls to the map with the addControl method. In this case, we add the built in GSmallMapControl and GMapTypeControl, which let us pan/zoom the map and switch between Map and Satellite mode.
html) Opening an Info Window Displays an info window that points to the center of the map with a simpl e "Hello world" message. Info windows are typically opened above markers , but they can be opened anywhere on the map.
html) Map Overlays Creates 10 random markers and a random polyline to illustrate the use of map overlays. Sort the points by longitude so that // the line does not intersect itself.
html) Display Info Windows Above Markers In this example, we show a custom info window above each marker by listen ing to the click event for each marker. We take advantage of function cl osures to customize the info window content for each marker.
html) Using Icon Classes In many cases, your icons may have different foregrounds, but the same sh ape and shadow. The easiest way to achieve this behavior is to use the c opy constructor for the GIcon class, which copies all the properties ove r to a new icon which you can then customize.
html) API Overview The GMap class An instance of GMap represents a single map on the page. You can create a s many instances of this class you want (one for each map on the page). A map is embedded in a container, which is typically a div element. Unle ss you specify a size explicitly, the map will use the size of the conta iner to determine its size. The GMap class exports methods to manipulate the map position (center and zoom level) and add and remove overlays (eg, GMarker and GPolyline in stances). It also exports a method to open an "info window," which is th e popup window you see on Google Maps and Google Local. The map has a si ngle info window, so only one window can be open at a given time.
Events You can add dynamic elements to your application using event listeners. addListener(map, "click", function() { alert("You clicked the map"); addListener takes a function as the third argument, which promotes the use of function closures for event handlers. The basic info window method is openInfoWindow, which takes a point and a n HTML DOM element as an argument. The HTML DOM element is appended to t he info window container, and the info window is displayed over the give n point. openInfoWindowHtml is similar, but it takes an HTML string as an argument rather than a DOM element. openInfoWindowXslt takes in an XML DOM eleme nt and the URL of an XSLT document to produce the info window contents, downloading the XSLT asynchronously if it has not already been downloade d by the user's browser. To display an info window above an overlay like a marker, you can pass an optional third argument that gives a pixel offset between the lat/lng p oint passed in and the tip of the info window. So, if your marker was 10 pixels tall, you would pass the pixel offset GSize(0, -10). The GMarker class exports openInfoWindow methods that handle the pixel of fset issues for you based on the size and shape of the icon, so you will generally not have to worry about calculating icon offsets in your appl ication. Overlays Overlays are objects on the map that are tied to lat/lng coordinates, so they move when you drag/zoom the map around and when you switch projecti ons (eg, switch from Map to Satellite mode). The Maps API exports two types of overlays: markers, which are icons on t he map, and polylines, which are lines made up of lat/lng coordinates. Icons and Markers The GMarker constructor takes an icon and a point as arguments and export s a small set of events like "click".
html example a bove for a simple example of creating markers. The most difficult part of creating a marker is specifying the icon, whic h is complex because of the number of different images that make up a si ngle icon in the Maps API. Every icon has (at least) a foreground image and a shadow image. The shad ow should be created at a 45 degree angle from the foreground image, and the bottom left corner of the shadow image should align with the bottom -left corner of the icon foreground image. The shadow should be a 24-bit PNG images with alpha transparency so that the edges of the shadow look correct on top of the map. The GIcon class requires you specify the size of these images when you in itialize the icon so the Maps API can create image elements of the appro priate size. This is the minimum amount of code required to specify an i con (in this case, the icon used on Google Maps): var icon = new GIcon(); The GIcon class exports 7 more properties that you should set to get maxi mum browser compatibility and functionality from your icons. For example , the imageMap property specifies the shape of the non-transparent parts of the icon image. If you do not set this property in your icon, the en tire icon image (including the transparent parts) will be clickable in F irefox/Mozilla.
Polylines The GPolyline constructor takes an array of lat/lng points as an argument . The color should be in the older HTML style, eg, "#ff0000". In Internet Explorer browser, we use VML to draw polylines. On all other browsers, we request an image of the line from Google servers and overla y that image on the map, refreshing the image as necessary as the map is zoomed and dragged around. The control will be attached to top-left corner of the map just like it i s on Google Maps. XML and RPC The Google Maps API exports a factory method for creating XmlHttpRequest objects that work in recent versions of IE...
|
http://csua.com/feed/