How to put Google Map into their Web
Tuesday, January 23, 2007Web2.0 also means software distributed through API (application programming interface). The possibility of exploiting remote features and functionality elsewhere is extremely useful in reality as the Internet. In addition to Yahoo, with its ToolKit 2.0 style, Google - in the context of geo-referencing - suggests its free tools, in this case for handling and management of the maps.
Google Maps API allows you to embed 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/ to obtain a key (a UID) on the site of use. In fact for every Web key required!
Google provides a free service that is an Enterprise, intranet solutions and utilizes advanced - see: Google Maps for Enterprise
The free version, however, already addresses all possible needs. Obtained the key is automatically proposed a summary page with a Javascript code examples. The first step is to retrieve the longitude and latidudine the area you want to view.
- 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. It is based sull'instanza a class GMap2() connected to a DIV on the page, in this case a DIV with id="map"
The full documentation of the API then provides further food for display, such as setting the hybrid view - satellite / map - the activation of controls to zoom in and traveling, the ability to connect a "cloud" with customized directions.
One way to activate a series of checks is:
- 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 (new GMapTypeControl ());
- new GLargeMapControl ( ) ) ; map. AddControl (new GLargeMapControl ());
- new GScaleControl ( ) ) ; // Zomming map. AddControl (new GScaleControl ()) / / Zomming
You can also assign a GMarker, a "balloon" with further guidance and make them react to mouse clicks.
- '<div class="td_testo"><strong>Prova Mio Nome</strong><br />Via Roma, 100<br />00100 - Roma, Italia</div><div class="menu"><a href="http://maps.google.com/maps?f=q&hl=it&q=Via+Roma,+42,+Roma&ie=UTF8&om=1&z=17&ll=41.851366,12.473409&spn=0.005786,0.013561&iwloc=A">Come arrivare da noi</a></div>' ; 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 href = "http://maps.google.com/maps?f=q&hl=it&q=Via+Roma, +42, + Rome & ie = UTF8 & om = 1 & z = 17 & ll = 41.851366,12.473409 & spn = 0.005786,0.013561 & iwloc = A "> How to 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 ) ; marker. openInfoWindowHtml (WINDOW_HTML);
- ));
- marker , 'infowindowclose' , function ( ) { GEvent. AddListener (marker, 'infowindowclose', function () (
- center , 2 ) ; map. recenterOrPanToLatLng (center, 2);
- ));
- WINDOW_HTML ) ; marker. openInfoWindowHtml (WINDOW_HTML);
Full documentation on the site fulfills all our desires, the use of special markers, JSON, Ajax and much more. Among other things you will find many examples of code examples directly online. A tool - free - for use immediately!













I can not let him enter the comic ... you can have an example or more information in Italian about how to do?
thanks
@ Villa Centopino: the 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 error ...
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, via Google Maps, get Latitude and Longitude from [...]
Hello,
I need a hand.
I wish that my comic was already displayed without having to make the mouse clicks.
I would also like the comic contains the options "find the path to HERE and HERE.
It 'a week that we sbattola head, give me a manoper favor.
Thanks and see you soon
Thanks!
Hello everyone I wanted to ask why not display the address and not MARKATOR Mitrov address ...
I wrote thus:
thank you very much
[...] How to put Google Map into their Web - heyos_ad_user = 8748; heyos_ad_type = "G"; heyos_ad_format = "8"; heyos_color_border = "000,066"; heyos_color_bg = "FFFFFF"; heyos_color_link = "005B88"; heyos_color_text = " 000000 "; heyos_color_url =" 5F5F5F "; [...]
[...] Example, the reminder of this writing remains one of the most viewed How to put Google Map into their Web with 17410th views. If you have services or products related to Google Map or at least that [...]
Hej!
Till det här är helt ny med Google Maps API.
Önskar jag hjälp med att få plats på de som krävs kod-Bitar. Önskar jag följande uppnå.
Där man har en webbsida fyller the lite uppgifter, där bland annat address, stad och land. Man klicka "submit" all information lagras och så klart i en databas.
Min önskan, nu är att man på en visningssida skall kunna klicka på en och då post their Databasen hämtas All information och visas på en sida. Det som jag skall ske önskar, är att visas en karta där man har en liten på just den pin-point address, ort och land som var registrerad för den Posten.
HUR går jag för att skapa that tillväga på ett enkelt och bra sätt.
Skriver och lite jobb mot PHP MySQL.
Tacksam om någon hjälpa en önskar själ okunnig!
- Andreas
@ Andreas: Dear Andreas, 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 the code-bit into place as needed. The following, I wish to ACHIEVE.
Have a website where you fill in some data, Which among other things, address, city and country. You click "submit" and all information stored in a database so Clearly.
My wish now is that on a 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 that was registered for the post.
How do I go about to create this in a simple and useful way.
Writes a little PHP and works against MySQL.
Grateful if anyone wishing to help an ignorant soul!
-Andrew
@ Dario: See Reverse Geocoding. 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 intercept the click and create a
GClientGeocoderThe handler uses the subject of click
GClientGeocoderto retrieve information from the starting location by latitude and longitude:Then, finally, the handler
showAddressshow you the info of the place throughplace.addressYou wonder if you can find a site that acts on the contrary, that is, 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 solve ... Let me explain:
I use the Google Maps API to make a navigable and zoomable map with Extension. georeferenced tiff that is! I found some information with which I've realized that first of all my image must be divided into tiles, only the resources that I found it says that I can do this with Photoshop or Paint Shop Pro (or some other program , I think) but does not tell me how ... and I'm stuck here!
Please ... help me, I really need!
Ola estou Queriendo passar meu mapa, ja feito em Earth and Google Maps API para, para poder ter a visão em meu blog igual a um Google Earth, local em meu computador. If and Posivel que, mas desconhesco como fazerlo. Poderiam me dar algumas dicas de como fazer, or to procurar algum exemplo.
Meu temor es que ter recadastrar cadastrado tudo em meu mapa, todos os wait point.
Grateful pela ajuda.
Claudio G. Pagliaro
cgpagliaro.arroba.gmail.com
Hello everyone, I have a problem, I generated the code to insert google maps API on my site. Local works without problems but when I go inside ke internet and go to visit the page where I inserted the word out ke server API rejected the request and that's because the API key is invalid because it generated for another site . What should I do?
beb @ enrico: you can regenerate the key! Or better! If you've used the "local", as claimed, you generate a key for a host other than online? Basically you need to generate a key according to the server that use it.
[...] Is really trivial. We see at once the script base to integrate with the standard procedure to insert google map in the site. We first how to turn traditional advertising and then the toolbar of [...]
[...] In Adobe Flash, you can use a wide range of external APIs provided by Web services like Facebook, Twitter and Flickr. In this tutorial we'll see how to integrate, so very simple, the services of Google Maps in a movie / application Adobe Flash CS4. I state that the proceedings in order to use Google Maps in Flash is very similar to what happens in HTML / Javascript (for details see How to put Google Map into their Web). [...]
[...] Has made available the API - in Javascript - to insert his maps in any web site Viedo how to achieve the same thing with [...]