Objet Google Maps 
Auteur : E-mage Concept
Visité 1456,
Followers 1,
Partagé 0
Bonjour,
Ce serait sympa de pouvoir mettre un calque de couleur avec possiblité de transparence sur un objet Google Maps, de manière parfois à rester homogène avec le visuel du site ou à avoir une carte noir et blanc, ou dans un seul ton.
Merci
JJ
Posté le
Hello,
As-tu une idée pour élargir l'objet Google Maps sur toute la largeur de la fenêtre du navigateur?
Il doit y avoir un code à placer, mais je n'y suis pas parvenu.
Si on passe via le style des lignes et que l'on choisi comme arrière-plan "Plan", ce n'est qu'une image générée par google-map et donc je ne vois pas l'utilité de cet arrière-plan avec l'option "Agrandir..."
Merci,
Xavier
Auteur
Oui, j'ai un script ! Le temps de le retrouver et je te le passe.
Auteur
Voici ! Attention, la carte est en noir & blanc et se trouve à 3400 px du top (pour le besoin d'un ancien site). Tu va devoir jongler un peu avec les différents paramètres...
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
position:absolute;
margin-left: auto;
margin-right: auto;
top:5415px;
height: 400px;
width: 3400px;
margin:0px auto;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var styles = {
'monTheme': [
{
featureType: 'all',
stylers: [
{saturation: -100},
{gamma: 0.50}
]
}
]};
var citymap = {};
citymap['strasbourg'] = {
center: new google.maps.LatLng(50.5118676,5.7350382),
population: 2717
};
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(50.5118676,5.7350382),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
draggable: true,
mapTypeId: 'monTheme'
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var styledMapType = new google.maps.StyledMapType(styles['monTheme'], {name: 'monTheme'});
map.mapTypes.set('monTheme', styledMapType);
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: citymap[city].population / 20
};
var cityCircle = new google.maps.Circle(populationOptions);
}
}
</script>
<body onload="initialize()">
<div id="map_canvas" ></div>
Bonjour Xavier,
Je viens de tester le plan dans le style des lignes après avoir inséré un objet texte.
Bilan de mon expérience :
- dans le style des lignes, j'ai choisi Plan puis entré l'adresse Lac du Slagou, Hérault, option routier, zoom 12
- j'ai inséré 2 avec l'objets texte (il faut insérer au moins 1 mot, puis des lignes vides pour que la hauteur de l'objet soit suffisante pour afficher la carte)
- j'ai coché Agrandir à la largeur de la fenêtre (inutile de faire le parallaxe, ça ne donne rien)
Après plusieurs ajustements le résultat est décevant en aperçu en local... et surtout je ne vois pas le + par rapport à l'insertion d'une carte ou tout simplement un arrière plan image après capture d'une map..
J'attends l'expérience d'autres utilisateurs.
Cordialement,
Danielle
Merci Jean-jacques
Danielle, comme tu dis, je ne vois pas l'utilité de l'insertion de la carte à cet endroit si elle reste figée.