05 fév 2010


Introduction


L'API Google Maps v3 évolue.
Ce second tutoriel nous montrera les mécanismes mis en jeu pour afficher un marqueur, gérer un événement et optimiser l'affichage sur différents devices.
Le résultat sera d'ailleurs repris dans les tutoriaux sur les Webview sous iPhone et Android.

Initialisation


Nous reprenons ici en partie le code du second tutoriel sur l'API, notamment pour la détection des devices, les options et le code HTML :

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


var myLatlng = new google.maps.Latlng(43.6, 1.44);
myOptions = {
zoom: 13,
center: myLatlng,
scrollwheel: false,
scaleControl: false,
disableDoubleClickZoom: true,
backgroundColor: '#000000',
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
},
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
};


if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
myOptions = {
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ANDROID
}
};
map.setOptions(myOptions);
} else {
mapdiv.style.width = '550px';
mapdiv.style.height = '350px';
}
}


Tuiles OSM et affichage


L'API v3 implémente une classe qui permet d'afficher des tuiles tierces :

var osmmapnik = new google.maps.ImageMapType({
getTileUrl: function(ll, z) {
var X = ll.x % (1 << z);
return "http://tile.openstreetmap.org/" + z + "/" + X + "/" + ll.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
maxZoom: 18,
name: "Mapnik",
alt: "Open Streetmap Mapnik"
});

Dans l'ordre, les propriétés :

  • getTileUrl : l'URL de la tuile demandée
  • tileSize : la taille en pixel des tuiles retournées par l'URL
  • isPng : les tuiles sont-elles au format PNG ?
  • maxZoom : le zoom maximal
  • name : le nom de la couche qui sera affiché dans la liste des couches

Il reste à faire de même pour tous les différents rendus et à les ajouter à la liste de couches :

map.mapTypes.set('osm', osmmapnik);
map.mapTypes.set('osma', osmarender);
map.mapTypes.set('opnv', opnv_karte);
map.setMapTypeId('osm');

var optionsUpdate = {
mapTypeControlOptions: {
mapTypeIds: ['osm','osma','opnv'],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};

map.setOptions(optionsUpdate);


Code complet







[Google Maps API v3] 21. Overlays des tuiles OpenStreetMap






Démonstration