FR:Google Maps Example

From OpenStreetMap Wiki
Jump to: navigation, search
Langues disponibles — Google Maps Example
· Afrikaans · Alemannisch · aragonés · asturianu · azərbaycanca · Bahasa Indonesia · Bahasa Melayu · Bân-lâm-gú · Basa Jawa · Basa Sunda · Baso Minangkabau · bosanski · brezhoneg · català · čeština · corsu · dansk · Deutsch · eesti · English · español · Esperanto · estremeñu · euskara · français · Frysk · Gaeilge · Gàidhlig · galego · Hausa · hrvatski · Igbo · interlingua · Interlingue · isiXhosa · isiZulu · íslenska · italiano · Kiswahili · Kreyòl ayisyen · kréyòl gwadloupéyen · Kurdî · latviešu · Lëtzebuergesch · lietuvių · magyar · Malagasy · Malti · Nederlands · Nedersaksies · norsk bokmål · norsk nynorsk · occitan · Oromoo · oʻzbekcha/ўзбекча · Plattdüütsch · polski · português · română · shqip · slovenčina · slovenščina · Soomaaliga · suomi · svenska · Tagalog · Tiếng Việt · Türkçe · Vahcuengh · vèneto · Wolof · Yorùbá · Zazaki · српски / srpski · беларуская · български · қазақша · македонски · монгол · русский · тоҷикӣ · українська · Ελληνικά · Հայերեն · ქართული · नेपाली · मराठी · हिन्दी · भोजपुरी · অসমীয়া · বাংলা · ਪੰਜਾਬੀ · ગુજરાતી · ଓଡ଼ିଆ · தமிழ் · తెలుగు · ಕನ್ನಡ · മലയാളം · සිංහල · བོད་ཡིག · ไทย · မြန်မာဘာသာ · ລາວ · ភាសាខ្មែរ · ⵜⴰⵎⴰⵣⵉⵖⵜ ⵜⴰⵏⴰⵡⴰⵢⵜ‎ · አማርኛ · 한국어 · 日本語 · 中文(简体)‎ · 中文(繁體)‎ · 吴语 · 粵語 · ייִדיש · עברית · اردو · العربية · پښتو · سنڌي · فارسی · ދިވެހިބަސް

Les exemples sur cette page montrent comment intégrer les tuiles (couches cartographiques) OpenStreetMap en tant que couche cartographique dans une carte Google Map (c'est-à-dire en utilisant la bibliothèque javascript google maps pour l'affichage de la carte, mais en affichant les tuiles de la carte OpenStreetMap).

C'est l'une des nombreuses approches pour déployer votre propre carte Slippy Map. De nombreux développeurs travaillant avec OpenStreetMap préfèreront utiliser Leaflet ou OpenLayers, parce qu'ils sont plus en accord avec l'éthique d'OSM, mais il existe de nombreuses raisons pour lesquelles vous pourriez vouloir ou devrez utiliser la librairie javascript de google maps. Par exemple, vous avez peut-être beaucoup investi (en temps et argent) dans la construction d'une interface google maps (la logique ou algorithme dans le code pour afficher des superpositions, la gestion des clics, etc.) Dans ce cas, il est encore assez simple de juste échanger Google Maps par OpenStreetMap en tant que fournisseur de tuiles (couches) cartographiques ou de le proposer comme une des possibles couches cartographique de base dans votre application (site web ou application de téléphonie mobile).

Exemple utilisant l'API V3 de Google Maps

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Google Maps v3 API Example</title>
        <style>
            html, body, #map {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            div#footer {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 18px;
                margin: 0;
                padding: 6px;
                z-index: 2;
                background: WHITE;
            }
        </style> 
    </head>
    <body>
        <div id="map" style="float: left;"></div>
        
        <div id="footer">&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors</div>
        
        <!-- bring in the google maps library -->
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        
        <script type="text/javascript">
            //Google maps API initialisation
            var element = document.getElementById("map");
 
            var map = new google.maps.Map(element, {
                center: new google.maps.LatLng(57, 21),
                zoom: 3,
                mapTypeId: "OSM",
                mapTypeControl: false,
                streetViewControl: false
            });
 
            //Define OSM map type pointing at the OpenStreetMap tile server
            map.mapTypes.set("OSM", new google.maps.ImageMapType({
                getTileUrl: function(coord, zoom) {
                    // "Wrap" x (logitude) at 180th meridian properly
                    // NB: Don't touch coord.x because coord param is by reference, and changing its x property breakes something in Google's lib 
                    var tilesPerGlobe = 1 << zoom;
                    var x = coord.x % tilesPerGlobe;
                    if (x < 0) {
                        x = tilesPerGlobe+x;
                    }
                    // Wrap y (latitude) in a like manner if you want to enable vertical infinite scroll

                    return "http://tile.openstreetmap.org/" + zoom + "/" + x + "/" + coord.y + ".png";
                },
                tileSize: new google.maps.Size(256, 256),
                name: "OpenStreetMap",
                maxZoom: 18
            }));
        </script>
    </body>
</html>

Voyez-le en en fonctionnement ici

Exemple - Utilisant l'API V3 de Google Maps avec comme paramétrage OSM pour la couche cartographique de base

Cette exemple ajoute OpenStreetMap comme couche cartographique de base pour la librairie Google Maps. Notez que vous avez besoin de de définir/paramétrer la variable maxZoom dans la variable ImageMapType pour le faire fonctionner comme couche cartographique de base. Le tag (marque) meta spécifique à Apple active le fonctionnement en plein écran quand il est lancé en tant qu'application web sur un appareil de type iPhone our iPad.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>OpenStreetMap with Google Maps v3 API</title>
        <style type="text/css">
            html, body, #map {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>

        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var element = document.getElementById("map");

            /*
            Build list of map types.
            You can also use var mapTypeIds = ["roadmap", "satellite", "hybrid", "terrain", "OSM"]
            but static lists sucks when google updates the default list of map types.
            */
            var mapTypeIds = [];
            for(var type in google.maps.MapTypeId) {
                mapTypeIds.push(google.maps.MapTypeId[type]);
            }
            mapTypeIds.push("OSM");

            var map = new google.maps.Map(element, {
                center: new google.maps.LatLng(48.1391265, 11.580186300000037),
                zoom: 11,
                mapTypeId: "OSM",
                mapTypeControlOptions: {
                    mapTypeIds: mapTypeIds
                }
            });

            map.mapTypes.set("OSM", new google.maps.ImageMapType({
                getTileUrl: function(coord, zoom) {
                    // See above example if you need smooth wrapping at 180th meridian
                    return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
                },
                tileSize: new google.maps.Size(256, 256),
                name: "OpenStreetMap",
                maxZoom: 18
            }));
        </script>
    </body>
</html>

Exemple utilisant l'API V2 de Google Maps (marquée comme obsolète (Deprecated) par Google )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>OpenStreetMap</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOUR_KEY_HERE" type="text/javascript"></script>
  <script type="text/javascript">
  //<![CDATA[

  function load()
  {
    if (!GBrowserIsCompatible())
        return;

    var copyOSM = new GCopyrightCollection("<a href=\"http://www.openstreetmap.org/\">OpenStreetMap</a>");
    copyOSM.addCopyright(new GCopyright(1, new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0, " "));

    var tilesMapnik     = new GTileLayer(copyOSM, 1, 17, {tileUrlTemplate: 'http://tile.openstreetmap.org/{Z}/{X}/{Y}.png'});
    var tilesOsmarender = new GTileLayer(copyOSM, 1, 17, {tileUrlTemplate: 'http://tah.openstreetmap.org/Tiles/tile/{Z}/{X}/{Y}.png'});

    var mapMapnik     = new GMapType([tilesMapnik],     G_NORMAL_MAP.getProjection(), "Mapnik");
    var mapOsmarender = new GMapType([tilesOsmarender], G_NORMAL_MAP.getProjection(), "Osmarend");
    var map           = new GMap2(document.getElementById("map"), { mapTypes: [mapMapnik, mapOsmarender] });

    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter( new GLatLng(55.95, -3.19), 13);
  }

  //]]>
  </script>
</head>
<body onload="load()" onunload="GUnload()">

<div id="map" style="width: 600px; height: 600px; border:1px solid gray;"></div>

</body>
</html>

Notes

Avant d'intégrer cette carte (V2) dans une page Web, vous devrez remplacer le texte YOUR_KEY_HERE avec votre clé (key) de l'API Google Maps. Cet élément peut être obtenu sur cette page web.

Google maps via Mapstraction

Mapstraction est une bibliothèque javascript fournissant une couche d'abstraction au travers de bibliothèques cartographiques en JavaScript. Google maps est supporté et peut être invoqué avec les tuiles cartographiques. Cela signifie que vous ne codez pas contre l'API de google maps, mais plutôt à l'aide de l'API mapstraction, mais alors cela vous permet de passer à une autre bibliothèque.

Plus d'exemples

Il y a probablement quelques exemples de personnes qui utilisent l'API google maps avec OpenStreetMap. Listez-les ici:

Liens relatifs