Cette fonction active un style existant en utilisant son id.
Si le style est défini, il ajoute le style avant son activation.
Pour créer facilement un nouveau style, vous pouvez utiliser cet outil en ligne : Google Maps API Styled Map Wizard.
setStyledMap
- Paramètres spécifiques :
- id <chaîne> Id du nouveau style
- style MapTypeStyle contenu du style
- Résultat du callback : MapTypeStyle
// Example #1 : Le style est stocké dans une variable
var roadAtlasStyles2 = [
{
featureType: "road.highway",
elementType: "geometry",
stylers: [
{ hue: "#ff0022" },
{ saturation: 60 },
{ lightness: -20 }
]
},
{
featureType: "road.arterial",
elementType: "all",
stylers: [
{ hue: "#2200ff" },
{ lightness: -40 },
{ visibility: "simplified" },
{ saturation: 30 }
]
},
{
featureType: "road.local",
elementType: "all",
stylers: [
{ hue: "#f6ff00" },
{ saturation: 50 },
{ gamma: 0.7 },
{ visibility: "simplified" }
]
}
];
$('#maCarte').gmap3(
// Add a style without create the map
{
action: 'addStyledMap',
id: 'style1',
options:{
name: 'Style 1'
},
style : [ // use embedded style
{
featureType: "road.highway",
elementType: "geometry",
stylers: [
{ hue: "#ff0022" },
{ saturation: 60 },
{ lightness: -20 }
]
}
]
},
// create a new style and active it after having created the map
{
action: 'setStyledMap',
// implicit init - - - - -
map:{
center:{
lat:41.850033,
lng:-87.650052
},
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'style1', 'style2']
}
},
// - - - - - - - - - - - -
styledmap:{
id: 'style2',
style: roadAtlasStyles2,
options:{
name: 'Style 2'
}
}
}
);
$("#bouton-test").click(function(){
$('#maCarte').gmap3({action: 'setStyledMap', id: 'style1'});
});
Carte avec setStyledMap
Code complet avec addStyledMap
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8"/>
<title>Votre titre de page</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#maCarte{height: 100%;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.votredomaine.fr/js/gmap3.js"></script>
<script type="text/javascript">
$(function(){
// Example #1 : Le style est stocké dans une variable
var roadAtlasStyles2 = [
{
featureType: "road.highway",
elementType: "geometry",
stylers: [
{ hue: "#ff0022" },
{ saturation: 60 },
{ lightness: -20 }
]
},
{
featureType: "road.arterial",
elementType: "all",
stylers: [
{ hue: "#2200ff" },
{ lightness: -40 },
{ visibility: "simplified" },
{ saturation: 30 }
]
},
{
featureType: "road.local",
elementType: "all",
stylers: [
{ hue: "#f6ff00" },
{ saturation: 50 },
{ gamma: 0.7 },
{ visibility: "simplified" }
]
}
];
$('#maCarte').gmap3(
// Add a style without create the map
{
action: 'addStyledMap',
id: 'style1',
options:{
name: 'Style 1'
},
style : [ // use embedded style
{
featureType: "road.highway",
elementType: "geometry",
stylers: [
{ hue: "#ff0022" },
{ saturation: 60 },
{ lightness: -20 }
]
}
]
},
// create a new style and active it after having created the map
{
action: 'setStyledMap',
// implicit init - - - - -
map:{
center:{
lat:41.850033,
lng:-87.650052
},
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'style1', 'style2']
}
},
// - - - - - - - - - - - -
styledmap:{
id: 'style2',
style: roadAtlasStyles2,
options:{
name: 'Style 2'
}
}
}
);
$("#bouton-test").click(function(){
$('#maCarte').gmap3({action: 'setStyledMap', id: 'style1'});
});
});
</script>
</head>
<body>
<div class="tools">
<input type="button" id="bouton-test" value=" Active Style 1 ">
</div>
<div id="maCarte"></div>
</body>
</html>