How to put Google Map into their Web

Tuesday, January 23, 2007

Web2.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.

Google Maps

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.

JavaScript:
  1. showMap function () (
  2. GBrowserIsCompatible ( ) ) { if (GBrowserIsCompatible ()) (
  3. new GMap2 ( document. getElementById ( "map" ) ) ; var map = new GMap2 (document. getElementById ( "map"));
  4. new GLatLng ( 37.4419 , - 122.1419 ) , 13 ) ; map. setCenter (new GLatLng (37.4419, - 122.1419), 13);
  5. )
  6. )

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:

JavaScript:
  1. new GMap2 ( document. getElementById ( "map" ) ) ; var map = new GMap2 (document. getElementById ( "map"));
  2. new GLatLng ( 37.4419 , - 122.1419 ) ; var center = new GLatLng (37.4419, - 122.1419);
  3. center , 17 , G_HYBRID_MAP ) ; // Mappa ibrida map. setCenter (center, 17, G_HYBRID_MAP), / / Map Hybrid
  4. new GMapTypeControl ( ) ) ; map. AddControl (new GMapTypeControl ());
  5. new GLargeMapControl ( ) ) ; map. AddControl (new GLargeMapControl ());
  6. 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.

JavaScript:
  1. '<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> ';
  2. new GMarker ( center ) ; var marker = new GMarker (center);
  3. marker ) ; map. addOverlay (marker);
  4. marker , 'click' , function ( ) { GEvent. AddListener (marker, 'click', function () (
  5. WINDOW_HTML ) ; marker. openInfoWindowHtml (WINDOW_HTML);
  6. ));
  7. marker , 'infowindowclose' , function ( ) { GEvent. AddListener (marker, 'infowindowclose', function () (
  8. center , 2 ) ; map. recenterOrPanToLatLng (center, 2);
  9. ));
  10. 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!

Related Post

Was this article helpful?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

22 comments to "How to put Google Map into their Web"

  1. getAvatar 1.0
    March 16, 2008 Villa centopino:

    I can not let him enter the comic ... you can have an example or more information in Italian about how to do?
    thanks

  2. getAvatar 1.0
    March 17, 2008 Giovambattista Fazioli:

    @ Villa Centopino: the example is shown in the Post. What problem you are having exactly? By some mistake?

  3. getAvatar 1.0
    March 28, 2008 Villa centopino:

    hello
    I inserted the balloon is not copying and pasting, no error ...
    But still I resolved to seek
    hello and thanks

  4. getAvatar 1.0
    May 13, 2008 Armando:

    latitude and longitude can be derived from the name of the city and the street?

  5. getAvatar 1.0
    May 14, 2008 Google Maps: How to get Latitude and Longitude from an address | Undolog.com:

    [...] 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 [...]

  6. getAvatar 1.0
    May 26, 2008 Alberto:

    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

  7. getAvatar 1.0
  8. getAvatar 1.0
    02 lug, 2008 Beppe:

    Hello everyone I wanted to ask why not display the address and not MARKATOR Mitrov address ...

      (alert (address + "not found");
     ....
    

    I wrote thus:

     ...
     onload = "load ();
     showAddress ( 'Road Portichina, 20 55049 Viareggio LU, Italy'); "
     onunload = "GUnload ();"
     ......
    

    thank you very much

  9. getAvatar 1.0
    October 24, 2008 Bookmarks from 18 October to 24 October - Dexle:

    [...] 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 "; [...]

  10. getAvatar 1.0
    November 11, 2008 Adopt a Post | Undolog.com:

    [...] 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 [...]

  11. getAvatar 1.0
    November 20, 2008 Andreas:

    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

  12. getAvatar 1.0
    November 20, 2008 Giovambattista Fazioli:

    @ Andreas: Dear Andreas, can you write your question in english?

  13. getAvatar 1.0
    November 20, 2008 Andreas:

    @ Giovambattista Fazioli:

    @ Andreas: Dear Andreas, can you write your question in english?

    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

  14. getAvatar 1.0
    January 19, 2009 Giovambattista Fazioli:

    @ 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 GClientGeocoder

    JavaScript:
    1. map , "click" , getAddress ) ; GEvent. AddListener (map, "click", getAddress);
    2. GClientGeocoder ( ) ; geocoder = new GClientGeocoder ();

    The handler uses the subject of click GClientGeocoder to retrieve information from the starting location by latitude and longitude:

    JavaScript:
    1. overlay , latlng ) { function getAddress (overlay, latlng) (
    2. latlng != null ) { if (latlng = null) (
    3. address = latlng;
    4. latlng , showAddress ) ; geocoder. getLocations (latlng, showAddress);
    5. )
    6. )

    Then, finally, the handler showAddress show you the info of the place through place.address

  15. getAvatar 1.0
    January 19, 2009 Dario:

    You wonder if you can find a site that acts on the contrary, that is, entering the coordinates you can find the place.

  16. getAvatar 1.0
    February 21, 2009 Angeliam:

    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!

  17. getAvatar 1.0
    03 mar, 2009 Claudio:

    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

  18. getAvatar 1.0
    March 20, 2009 Henry beb:

    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?

  19. getAvatar 1.0
    March 20, 2009 Giovambattista Fazioli:

    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.

  20. getAvatar 1.0
    July 24, 2009 Google maps advertising:

    [...] 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 [...]

  21. getAvatar 1.0
    August 29, 2009 Undolog.com »How to use Google Maps in Adobe Flash CS4:

    [...] 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). [...]

  22. getAvatar 1.0
    01 set, 2009 Undolog.com »Google Maps component for Flash:

    [...] Has made available the API - in Javascript - to insert his maps in any web site Viedo how to achieve the same thing with [...]

Leave a comment

TAG XHTML PERMISSIONS: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE:
 <pre></pre>         // blocco generico [code][/code]       // blocco generico [as][/as]           // Actionscript [css][/css]         // CSS Style Sheet [html][/html]       // HTML [js][/js]           // Javascript [objc][/objc]       // Objective-C [php][/php]         // PHP [sql][/sql]         // SQL