Maroc google Maps

Aujourd’hui nous allons voir un truc qu’on trouve souvent en tant que développeur, internaute,…… C’est lorsque’on utilise google maps  pour afficher des informations et je parle plus précieusement lorsqu’on affiche notre beau pays le Maroc, On se retrouve avec le trait qui découpe le Maroc.

Pour résoudre ce problème, l’API google offre certains objets.

L’idées est la suivante :

1. Désactiver les frontières entre les pays.
2. Retracer à nouveau les vrais frontières.

Tout cela est possible  grâce à l’API google maps javascript

Je vous donne un petit exemple :

var mapOptions = {
	zoom: 5,
	center: oujda,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

// Désactiver l'affichage des frontières 
var marocStyles = [{featureType: "administrative.country",stylers: [{ visibility: "off" }]}];
var marocMapType = new google.maps.StyledMapType(marocStyles ,{name: "Maroc"});

// Associer la carte de style avec le MapTyped 
map.mapTypes.set('maroc', marocMapType );
map.setMapTypeId('maroc');

Si on affiche maintenant la carte ou aura :

Pour le moment nous allons tracer les  frontières  à nouveau.

Vous ajoutez ce bout de code au précédent

 
layer = new google.maps.FusionTablesLayer({
     query: {
             select: 'geometry',
             from: '1S4aLkBE5u_WS0WMVSchhBgMLdAARuPEjyW4rs20',
	     where: "col1 contains 'MAR'"
	    },
      styles: [{
	    polylineOptions: {
	    strokeColor: "#FF0000",
	    strokeWeight: 1
	}
    }]
});
layer.setMap(map);