Développement »PHP» Javascript »Internet» Flash »ActionScript

Comment mettre la carte Google dans leur toile

Mardi, Janvier 23, 2007

Web2.0 signifie également des logiciels distribués par l'intermédiaire de l'API (interface de programmation d'application). La possibilité d'exploiter les fonctionnalités à distance et la fonctionnalité est d'ailleurs extrêmement utile dans la réalité comme l'Internet. En plus de Yahoo, avec son style Toolkit 2.0, Google - dans le cadre de la géo-référencement - propose ses outils gratuitement, dans ce cas pour la manipulation et la gestion des cartes.

API Google Maps vous permet d'intégrer Google Maps dans leurs pages web en utilisant JavaScript.

Google Maps

La première chose à faire avant de pouvoir commencer à expérimenter avec l'API, vous vous inscrivez sur le site http://www.google.com/apis/maps/ pour obtenir une clé (un UID) sur le site d'utilisation. En effet, pour chaque clé Web requis!

Google fournit un service gratuit qui est une entreprise, des solutions intranet et utilise les avancées - voir: Google Maps pour les entreprises

La version gratuite, cependant, couvre déjà tous les besoins possibles. Obtenu la clé est automatiquement proposé une page de résumé d'un des exemples de code Javascript. La première étape est de récupérer la longitude et la latidudine la zone que vous souhaitez afficher.

PLAIN TEXT
JavaScript:
  1. showMap function () (
  2. GBrowserIsCompatible ( ) ) { if (GBrowserIsCompatible ()) (
  3. new GMap2 ( document. getElementById ( "map" ) ) ; var map = new GMap2 (document.createTextNode getElementById ( "map"));
  4. new GLatLng ( 37.4419 , - 122.1419 ) , 13 ) ; carte. SetCenter (new GLatLng (37.4419, - 122,1419), 13);
  5. )
  6. )

L'exemple de code est assez simple. Il est basé sull'instanza une GMap2() classe GMap2() relié à un DIV sur la page, dans ce cas un DIV avec id="map"
La documentation complète de l'API fournit ensuite alimentaires supplémentaires pour l'affichage, comme la définition de la vue hybride - satellite / carte - l'activation des contrôles de zoomer et de voyages, la possibilité de connecter un «nuage» avec les orientations personnalisées.

Une façon d'activer une série de contrôles est la suivante:

PLAIN TEXT
JavaScript:
  1. new GMap2 ( document. getElementById ( "map" ) ) ; var map = new GMap2 (document.createTextNode 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 . Plan SetCenter (centre, 17, G_HYBRID_MAP), / / Carte hybride
  4. new GMapTypeControl ( ) ) ; carte. AddControl (nouveau GMapTypeControl ());
  5. new GLargeMapControl ( ) ) ; carte. AddControl (nouveau GLargeMapControl ());
  6. new GScaleControl ( ) ) ; // Zomming carte. AddControl (nouveau GScaleControl ()) / / Zomming

Vous pouvez également attribuer une GMarker, un ballon "avec de nouvelles orientations et les faire réagir aux clics de souris.

PLAIN TEXT
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, Italie </ 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 "> Comment nous rejoindre </ a> </ div> ';
  3. new GMarker ( center ) ; var marker = new GMarker (au centre);
  4. marker ) ; carte. addOverlay (marker);
  5. marker , 'click' , function ( ) { GEvent. AddListener (marker, 'click', function () (
  6. WINDOW_HTML ) ; marqueur. openInfoWindowHtml (WINDOW_HTML);
  7. ));
  8. marker , 'infowindowclose' , function ( ) { GEvent. AddListener (marker, 'infowindowclose', function () (
  9. center , 2 ) ; carte. recenterOrPanToLatLng (centre, 2);
  10. ));
  11. WINDOW_HTML ) ; marqueur. openInfoWindowHtml (WINDOW_HTML);

Une documentation complète sur le site répond à tous nos désirs, l'utilisation de marqueurs spéciaux, JSON, Ajax et bien plus encore. Entre autres choses, vous trouverez de nombreux exemples d'exemples de code directement en ligne. Un outil - gratuit - pour utilisation immédiate!

Related Post

Cet article était utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Chargement ...

Tags:

22 commentaires pour "Comment mettre la carte Google dans leur Web"

  1. getAvatar 1.0
    16 mars 2008 centopino Villa:

    Je ne peux pas le laisser entrer dans la bande dessinée ... vous pouvez avoir un exemple ou plus d'informations en italien sur la façon de faire?
    merci

    Répondre Partager
  2. getAvatar 1.0
    17 mars 2008 Giovambattista Fazioli:

    @ Villa Centopino: l'exemple est montré dans le Post. Quel problème rencontrez-vous exactement? Par mégarde?

    Répondre Partager
  3. getAvatar 1.0
    28 mars 2008 centopino Villa:

    bonjour
    J'ai inséré le ballon n'est pas le copier-coller, pas d'erreur ...
    Mais je résolus de chercher
    Bonjour et merci

    Répondre Partager
  4. getAvatar 1.0
    13 mai 2008 Armando:

    latitude et longitude peuvent être dérivé du nom de la ville et la rue?

    Répondre Partager
  5. getAvatar 1.0
    14 mai 2008 sur Google Maps: Comment avoir la latitude et la longitude d'une adresse | Undolog.com:

    [...] Cette fois, je réponds à un commentaire avec un poste, étant donné l'intérêt général. Armando m'a demandé s'il était possible, via Google Maps, obtenez Latitude et Longitude de [...]

  6. getAvatar 1.0
    26 mai 2008 Alberto:

    Bonjour,
    J'ai besoin d'une main.
    Je souhaite que ma bande dessinée a été déjà affichés sans avoir à faire les clics de souris.
    Je voudrais aussi le comique contient les options de "trouver le chemin vers ICI et ICI.
    C 'est une semaine que nous nous dirigeons sbattola, donnez-moi une faveur manoper.
    Merci et à bientôt

    Répondre Partager
  7. getAvatar 1.0
    14 juin 2008 Alex:

    Merci!

    Répondre Partager
  8. getAvatar 1.0
    02 juil. 2008 Beppe:

    Bonjour à tous je voulais vous demander pourquoi ne pas afficher l'adresse et au MARKATOR adresse Mitrov ... 

      (alert (address + "introuvable");
 ....

    J'ai écrit ainsi: 

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

    merci beaucoup

    Répondre Partager
  9. getAvatar 1.0
    24 octobre 2008 signets à partir du 18 Octobre à 24 Octobre - Dexle:

    [...] Comment mettre la carte Google dans leur toile - 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 "; [...]

  10. getAvatar 1.0
    11 novembre 2008 Adopter un message | Undolog.com:

    [...] Exemple, le rappel de cette écriture reste l'un des plus consultés Comment mettre la carte Google dans leur toile avec 17410e vues. Si vous avez des services ou des produits liés à la carte Google ou tout au moins que [...]

  11. getAvatar 1.0
    20 novembre 2008 Andreas:

    Hej!

    Till ny här är det helt med Google Maps API.
    Önskar hjälp med att jag få plats på de som krävs KOD-Bitar. Önskar jag uppnå följande.

    Där har man en webbsida fyller la uppgifter Lite, där adresse bland annat, land och stad. Man klicka "soumettre" toute information lagras och så klart i en databas.

    Min önskan, nu är att man på en visningssida skall kunna Klicka på en och då afficher leurs Databasen hämtas Tous les visas information och på en sida. Det som jag skall ske önskar, är att visas en karta där har man en liten juste broches på den-adresse de point, Ort land och som var registrerad för den Posten.

    HUR går jag för att skapa que tillväga enkelt på ett sätt och bra.
    Och lite Skriver jobb mot PHP MySQL.

    Tacksam någon om hjälpa fr önskar själ okunnig!

    - Andreas

    Répondre Partager
  12. getAvatar 1.0
    20 novembre 2008 Giovambattista Fazioli:

    @ Andreas: Cher Andreas, pouvez-vous écrire votre question en anglais?

    Répondre Partager
  13. getAvatar 1.0
    20 novembre 2008 Andreas:

    @ Giovambattista Fazioli:

    @ Andreas: Cher Andreas, pouvez-vous écrire votre question en anglais?

    Bonjour!

    Sont nouveaux pour cela avec l'API Google Maps.
    Je veux de l'aide pour obtenir le code-bit en place selon les besoins. Les opérations suivantes, que je souhaite atteindre.

    Avoir un site web où vous remplissez certaines données qui, entre autres choses, adresse, ville et pays. Vous cliquez sur «Soumettre» et toutes les informations stockées dans une base de tant de clarté.

    Mon souhait est maintenant que, sur une page d'affichage est de cliquer sur une entrée dans la base de données, puis récupéré toutes les informations et affichées sur une page. Ce que j'espère va arriver, c'est qu'une carte montre où vous avez une petite broche-point situé juste à l'adresse, ville et pays qui a été enregistrée pour le poste.

    Comment puis-je m'y prendre pour créer ce de façon simple et utile.
    PHP écrit un peu et va à l'encontre de MySQL.

    Reconnaissant si quelqu'un désireux d'aider une âme ignorante!

    -Andrew

    Répondre Partager
  14. getAvatar 1.0
    19 janvier 2009 Giovambattista Fazioli:

    @ Dario: Voir Reverse Geocoding. Peering sur la source de la page, vous trouverez le code nécessaire, comunqueq est, le noyau de la solution est:
    Ajouter un écouteur d'intercepter le click et de créer un GClientGeocoder

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

    Le gestionnaire utilise l'objet de cliquer GClientGeocoder pour récupérer des informations à partir de l'emplacement de départ par la latitude et la longitude:

    PLAIN TEXT
    JavaScript:
    1. overlay , latlng ) { fonction getAddress (overlay, latlng) (
    2. latlng != null ) { if (latlng = null) (
    3. address = latlng;
    4. latlng , showAddress ) ; géocodage. getLocations (latlng, showAddress);
    5. )
    6. )

    Puis, enfin, le gestionnaire showAddress vous montrer les infos du lieu grâce à place.address

    Répondre Partager
  15. getAvatar 1.0
    19 janvier 2009 Dario:

    Vous vous demandez si vous pouvez trouver un site qui agit au contraire, c'est, en entrant les coordonnées que vous pouvez trouver l'endroit.

    Répondre Partager
  16. getAvatar 1.0
    21 février 2009 Angeliam:

    Bonjour tout le monde!
    Je demande la main d'experts, parce que je suis tombé sur un problème que je n'arrive pas à résoudre ... Laissez-moi vous expliquer:
    J'utilise l'API Google Maps pour faire une carte navigable et zoomable avec l'extension. Géoréférencées TIFF qui est! J'ai trouvé quelques informations dont je me suis rendu compte que tout d'abord mon image doit être divisée en tuiles, les seules ressources que j'ai trouvé il est dit que je peux le faire avec Photoshop ou Paint Shop Pro (ou un autre programme , je crois) mais ne me dites pas comment ... et je suis coincé ici!
    S'il vous plaît ... aidez-moi, j'ai vraiment besoin!

    Répondre Partager
  17. getAvatar 1.0
    03 mar, 2009 Claudio:

    Ola estou Queriendo passar meu mapa, ja feito em Earth et Google Maps par l'API, ter poder para a visão em meu blog igual a um Google Earth, local computador em meu. Si et Posivel que, desconhesco mas como fazerlo. Poderiam me dar algumas dicas de como fazer, ou à exemplo algum procurar.
    Meu temor que es ter recadastrar cadastrado tudo mapa em meu, todos os attendre point.

    Grateful pela ajuda.

    Claudio G. Pagliaro
    cgpagliaro.arroba.gmail.com

    Répondre Partager
  18. getAvatar 1.0
    20 mars 2009 BEB Henry:

    Bonjour à tous, j'ai un problème, j'ai généré le code à insérer API Google Maps sur mon site. LOCAL fonctionne sans problèmes mais quand je vais Internet à l'intérieur KE et allez jusqu'à la page où j'ai inséré le mot ke API serveur a rejeté la demande et c'est parce que la clé API n'est pas valide parce qu'il a généré pour un autre site . Que dois-je faire?

    Répondre Partager
  19. getAvatar 1.0
    20 mars 2009 Giovambattista Fazioli:

    beb @ enrico: vous pouvez régénérer la clé! Ou mieux! Si vous avez utilisé le "local", comme l'a soutenu, vous générez une clé pour un hôte autre que en ligne? Classiquement, vous devez générer une clé selon le serveur qui l'utilisent.

    Répondre Partager
  20. getAvatar 1.0
    24 juillet 2009 cartes publicitaires Google:

    [...] Est-ce vraiment trivial. Nous voyons à la fois la base de script à intégrer à la procédure standard pour insérer une carte google dans le site. Nous avons d'abord la manière de transformer la publicité traditionnelle et ensuite la barre d'outils de [...]

  21. getAvatar 1.0
    29 août 2009 »Undolog.com Comment utiliser Google Maps dans Adobe Flash CS4:

    [...] Dans Adobe Flash, vous pouvez utiliser une large gamme d'API externe fournie par les services Web comme Facebook, Twitter et Flickr. Dans ce tutoriel, nous allons voir comment intégrer, de manière très simple, les services de Google Maps dans un film / application Adobe Flash CS4. Je constate que la procédure afin d'utiliser Google Maps en Flash est très similaire à ce qui se passe en HTML / Javascript (pour plus de détails voir comment mettre la carte Google dans leur site Web). [...]

  22. getAvatar 1.0
    01 ensemble, 2009 Undolog.com »Google Maps pour les composants Flash:

    [...] A rendu disponible l'API - en Javascript - pour insérer ses cartes dans n'importe quel site web Viedo la façon de réaliser la même chose avec [...]

Laissez un commentaire

TAG PERMISSIONS XHTML: <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