Web 2.0 also means software distributed through APIs (application programming interface). The ability to use features and remote functionality is extremely useful elsewhere in reality as the Internet. In addition to Yahoo, with its style Toolkit 2.0, Google - in the context of geo-referencing - offers its free tools, in this case for the handling and management of maps.
Google Maps API allows you to insert Google Maps into their web pages using JavaScript.
The first thing to do, before they can begin to experiment with the API, you register on the site http://www.google.com/apis/maps/ in order to get a key (a UID) on the site of use. In fact, for each web you need a key!
Google provides a free service that is an Enterprise to intranet solutions and uses advanced - see: Google Maps for Enterprise
The free version, however, already solves all possible needs. Obtained the key is automatically given a summary page with a JavaScript code examples. The first step is to retrieve longitude and latidudine the area you want to view.
1 2 3 4 5 6 | showMap function () { GBrowserIsCompatible ( ) ) { if (GBrowserIsCompatible ()) { new GMap2 ( document. getElementById ( "map" ) ) ; var map = new GMap2 (document. getElementById ("map")); new GLatLng ( 37.4419 , - 122.1419 ) , 13 ) ; map. setCenter (new GLatLng (37.4419, - 122.1419), 13); } } |
The sample code is fairly simple. presente sulla pagina, in questo caso un DIV con id="map" . It is based sull'instanza a class GMap2() connected to a DIV on the page, in this case a DIV with id="map" .
The complete API documentation provides further food for later viewing, such as setting the hybrid view - satellite / map - the activation of the controls for the zoom and movement, the ability to connect a "balloon" with personalized information.
One way to activate a series of checks is:
1 2 3 4 5 6 | new GMap2 ( document. getElementById ( "map" ) ) ; var map = new GMap2 (document. getElementById ("map")); new GLatLng ( 37.4419 , - 122.1419 ) ; var center = new GLatLng (37.4419, - 122.1419); center , 17 , G_HYBRID_MAP ) ; // Mappa ibrida map. setCenter (center, 17, G_HYBRID_MAP) / / Map hybrid new GMapTypeControl ( ) ) ; map. AddControl (GMapTypeControl new ()); new GLargeMapControl ( ) ) ; map. AddControl (GLargeMapControl new ()); new GScaleControl ( ) ) ; // Zomming map. AddControl (GScaleControl new ()); / / Zomming |
You can also associate a GMarker, a "cloud" with additional information and make it react to mouse clicks.
1 2 3 4 5 6 7 8 9 10 11 | '<div class="td_testo"><strong>Prova Mio Nome</strong><br />Via Roma, 100<br />00100 - Roma, Italia</div><div class="menu"><a WINDOW_HTML var = '<div class="td_testo"> <strong> Try My Name </ strong> <br /> Via Roma, 100 <br /> 00100 - Rome, Italy </ div> <div class = "menu" > <a reach us </ a> </ div> '; new GMarker ( center ) ; var marker = new GMarker (center); marker ) ; map. addOverlay (marker); marker , 'click' , function ( ) { GEvent. AddListener (marker, 'click', function () { WINDOW_HTML ) ; Markers. openInfoWindowHtml (WINDOW_HTML); }); marker , 'infowindowclose' , function ( ) { GEvent. AddListener (marker, 'infowindowclose', function () { center , 2 ) ; map. recenterOrPanToLatLng (center, 2); }); WINDOW_HTML ) ; Markers. openInfoWindowHtml (WINDOW_HTML); |
Complete documentation on the site fulfills all our needs, the use of special markers, JSON, Ajax and much more. Among other things, there are plenty of examples of code examples online. A tool - free - to use immediately!
I can not let him enter the comic book ... you can have a sample or more information on how to do it in Italian?
thanks
@ Villa Centopino: an example is shown in the Post. What problem you are having exactly? By some mistake?
hello
I inserted the balloon is not copying and pasting, no errors ...
But still I resolved to seek
Hello and thanks
latitude and longitude can be derived from the name of the city and the street?
[...] This time I reply to a comment with a post, given the general interest. Armando asked me if it was possible, using Google Maps, Latitude and Longitude obtained from [...]
Hello,
I could use a hand.
I wish my comic was already displayed without having to do with the mouse clicks.
I would also like the comic contains the options "is the path to HERE and HERE."
It 'a week we sbattola head, give me a manoper favor.
Thanks and see you soon
Thank you!
Hello everyone I wanted to ask you why do not I see the address and not MARKATOR Mitrov address ...
2
....
I wrote like this:
2
3
4
5
"load(); onload = "load ();
showAddress ('Road Portichina, CO 20 55049 Viareggio, Italy'); "
"GUnload();" onunload = "GUnload ();"
......
thank you very much
[...] How to put Google Maps in your web - heyos_ad_user = 8748; heyos_ad_type = "G"; heyos_ad_format = "8"; heyos_color_border = "000066"; heyos_color_bg = "FFFFFF"; heyos_color_link = "005B88" heyos_color_text = " 000000 "; heyos_color_url =" 5F5F5F "[...]
[...] Example, in the reminder of this writing remains one of the most viewed post How to add Google Maps in your web, with 17410 views. If you have services or products related to Google Map or otherwise, that [...]
Hej!
Helt är det har med ny till Google Maps API.
Jag önskar hjälp med på att ago plats de som krävs kod-Bitar. Följande önskar uppnå jag.
Give a hand har en webbsida fyller uppgifter the dispute, give bland annat adress, stad och land. Man klick "submit" to information lagras och en så klart the database.
Önskan min, nu är på att as en visningssida Skalli kunna klick på en och databasen post the information to be hämtas visas på och en sida. Det som jag önskar Skalli ske, är att en karta visas give a hand har en Liten pin-point just på den adress, ort land och för den som var registrerad Posten.
HUR för att gar tillväga jag på ett said Skapa enkelt och bra Satta.
Skriver och lite PHP MySQL Jobb mot.
Tacksam om en nagone önskar hjälpa okunnig själ!
-Andreas
@ Andreas: Andreas dear, can you write your question in English?
@ Giovambattista Fazioli:
Hello!
Are Completely new to this with the Google Maps API.
I want help to get into place the code-bits as needed. The following, I wish to Achieve.
Have a website where you fill in some time, which effectively Among other things, address, city and country. You click "submit" and all information stored in a database Clearly I know.
My wish Is that now on the display page is to click on an entry in the database and then retrieved all the information and Displayed on a page. What I hope will happen Is that a map shows where you have a small pin-point just at the address, city and country registered for the Post That Was.
How do I go about to create this in a simple and useful way.
Writes a little PHP and MySQL works Against.
Grateful if anyone Wishing to help an ignorant soul!
-Andrew
@ Darius: Reverse Geocoding see. Peering into the source of the page you will find the necessary code, comunqueq is, the "core" of the solution is:
Add a listener to listen for the click and create an object
GClientGeocoder:2
GClientGeocoder ( ) ; GClientGeocoder geocoder = new ();
The handler uses the subject of the click
GClientGeocoderto retrieve information from leaving the site latitude and longitude:2
3
4
5
6
latlng != null ) { if (latlng! = null) {
address = latlng;
latlng , showAddress ) ; geocoder. getLocations (latlng, showAddress);
}
}
Then, in the end, the handler
showAddressshow the info of the place throughplace.addressI ask if you can find a site that acts on the contrary, that by entering the coordinates you can find the place.
Hello everyone!
I ask the hand of experts, because I ran into a problem that I can not fix ... now I will explain:
I use the Google Maps API to make it navigable and zoomable map with an extension. georeferenced tiff that is! I found some information with which I've realized that first of all my image should be divided into tiles, only the resources that I found it says that you can do this with Photoshop or Paint Shop Pro (or some other small program , I think) but I did not say how ... and I'm stuck here!
Please ... help me, I really need!
Ola estou Queriendo passing meu mapa, ja em Feito Google Earth and Maps Api para, para poder ter Visa em meu blog Igual in Google Earth um, local em meu computador. If these and posivel, mas como desconhesco fazerlo. I give poderiam de como fazer algumas Dicas, or waves procure algum exemplo.
Temor es que meu ter recadastrar cadastrado em meu tudo mapa, todos os wait point.
Grateful ajuda peels.
Claudio G. Pagliaro
cgpagliaro.arroba.gmail.com
Hello, I have a problem, I created the API code to insert google maps into my site. Locally works without problems but when I insert it on the Internet and k go to visit the page where I put out the word ke the server API has refused the request and this is because the API code is not valid because it generated for another site . What should I do?
Beb @ enrico: you can regenerate the key! Or better! If you used the "local", as claimed, have generated a key for a host other than online? In practice you need to generate a key depending on which server you use.
[...] Is really trivial. We recognize the basic script to integrate with the standard procedure to insert google map in the site. We first turn as traditional advertising and then the toolbar [...]
[...] In Adobe Flash, you can use a wide range of external APIs provided by Web services like Facebook, Twitter or Flickr. In this tutorial we will see how to integrate, in a really simple, the services of Google Maps in a movie / application Adobe Flash CS4. I state that the procedure to use Google Maps in Flash is very similar to what happens with HTML / JavaScript (for details see How to put Google Map into your website). [...]
[...] Has released the API - Javascript - to put its maps in any web site vied how to achieve the same thing with [...]
Excuse me, you know how to delete google written at the bottom of "credits"?
I have a map displayed as a hybrid, but is small enough, then the text must be in surplus, and is visually unattractive.
I have a problem, use Flash CS5 on Windows 7, I downloaded the zip file, I copied the component in your path, but I can not find flash components in the library .. Also if I double click the component, Flash tries to import it but at some point I said "Unexpected file format."
where it could be the problem?
@ Alpha: I have never used flash in my life, so I could be wrong but that is a Javascript code, not Actionscript.
@ Wpae:
Zip file of what you speak? This post explains how to use maps with JavaScript, perhaps you were referring to another article?
Hi I wanted to ask if you could, somehow, to change those ugly buttons! Perhaps with images that are set by us ...
@ Mariano: I do not think is possible ... maybe not what you can do is visualize and create your making him do the same thing via the API, to be verified though.
Hello,
know if the free version of Maps is a limit on calls from a specific website to Google Maps?
Thank you!
Clare
Hello, I wrote this code but now I would like to import the cloud just as it appears in Google Map. I saw a post like always here, but I can not enter the code correctly, probably because I insert it in the wrong place.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
google . maps . Map ; with imports. google. maps. Map;
google . maps . MapEvent ; with imports. google. maps. MapEvent;
google . maps . MapType ; with imports. google. maps. MapType;
google . maps . controls . ZoomControl ; with imports. google. maps. controls. ZoomControl;
google . maps . controls . PositionControl ; with imports. google. maps. controls. PositionControl;
google . maps . controls . MapTypeControl ; with imports. google. maps. controls. MapTypeControl;
google . maps . overlays . MarkerOptions ; with imports. google. maps. overlays. MarkerOptions;
google . maps . overlays . Marker ; with imports. google. maps. overlays. Marker;
google . maps . InfoWindowOptions ; with imports. google. maps. InfoWindowOptions;
google . maps . MapMouseEvent ; with imports. google. maps. MapMouseEvent;
: Map = new Map ( ) ; var map: Map = new Map ();
key = "ACfg....." ; map. key = "ACfg .....";
setSize ( new Point ( 562 , 458 ) ) ; map. setSize (new Point (562, 458));
x = 350 ; map. x = 350;
y = 150 , 05 ; map. y = 150, 05;
addEventListener ( MapEvent . MAP_READY , onMapReady ) ; map. addEventListener (MapEvent. MAP_READY, onMapReady);
addChild ( map ) ; this. addChild (map);
event : MapEvent ) : void { onMapReady function (event: MapEvent): void {
setCenter ( new LatLng ( 45.97553673095479 , 12.229607105255127 ) , 16 , MapType . NORMAL_MAP_TYPE ) ; map. setCenter (new LatLng (45.97553673095479, 12.229607105255127), 16, MapType. NORMAL_MAP_TYPE);
addControl ( new ZoomControl ( ) ) ; map. AddControl (ZoomControl new ());
addControl ( new PositionControl ( ) ) ; map. AddControl (PositionControl new ());
addControl ( new MapTypeControl ( ) ) ; map. AddControl (MapTypeControl new ());
Marker = new Marker ( new LatLng ( 45.97553673095479 , 12.229607105255127 ) ) ; var marker: Marker = new Marker (new LatLng (45.97553673095479, 12.229607105255127));
addOverlay ( marker ) ; map. addOverlay (marker);
}
I'm going mad!
@ Vanessa_Megg: line 17:
I see a mistake ... you used a comma instead of a period ... but I do not know if that's what gives you problems. You have some indication in more?
@ Giovambattista Fazioli:
Okay, now the code works. But my question was a 'else: if you could import the cloud Google Map of peers, and all the signs, the Flash file .. I have seen many who have asked around, but without finding a solution to it ...: /
@ Vanessa_Megg: if "cloud" you mean the comic, the one with the information shown on the site, you can not "extrapolate" from the Flash component. What could be done, if I understand your needs, you "read" the information and propose them somewhere else. Furthermore, as shown by the code above, the content of the "bubble" is created in HTML:
. Using the method
openInfoWindowHtmlmade available by themarker. What is not clear to me when you say "import the cloud Google Map of peers, and all the signs, the Flash file .."@ Giovambattista Fazioli: Hello! Well, I would have the same problem. I created the API key with the address of the site where it will go. If the page I look at local shows me the map (which should not) but online it says that my API key is wrong. I continue to repeat the procedure, but nisba! I am like two hours on a google map ... I can not stand
@ Igor: The problems encountered with Adobe Flash could be the result of the new policy of Google. For some ', in fact, is no longer necessary to generate a key, the new Google API only work with the import (just works).