PC SOFT

FORUMS PROFESSIONNELS
WINDEVWEBDEV et WINDEV Mobile

Accueil → WEBDEV 2024 → Personnalisation Google Maps
Personnalisation Google Maps
Débuté par Jean-Michel C, 19 mai 2017 17:49 - 4 réponses
Membre enregistré
474 messages
Popularité : +17 (19 votes)
Posté le 19 mai 2017 - 17:49
Bonjour,

Je cherche à appliquer du code JS trouver sur le net pour personnaliser un champ carte :

Initialisation du champ Carte
// Code serveur
CarteConfigureAPIGgl("libraries=geometry,places","language=fr")


A chaque changement de position du champ Carte
// Code navigateur
MaCarte est un objet dynamique
MaCarte = CarteRécupèreObjetJS(CARTE_pointvente)
// Appel de la fonction Javascript
testjs()


En procédure local navigateur

function testjs()
{
var styles = {
'monTheme': [
{
featureType: 'all',
stylers: [
{saturation: -100},
{gamma: 0.50}
]
}
]};

var citymap = {};
citymap['strasbourg'] = {
center: new google.maps.LatLng(48.583148,7.747882),
population: 271708
};
citymap['paris'] = {
center: new google.maps.LatLng(48.856614,2.352222),
population: 2234105
};
citymap['lyon'] = {
center: new google.maps.LatLng(45.764043,4.835659),
population: 479803
}

var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(48,2),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
draggable: false,
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);
}
}


La carte s'affiche bien mais c'est toujours la carte Google de base. Le code JS n'est pas pris en compte.
Est ce qu'il manque quelque chose à mon code ?
Merci

--
Jean-Michel
Membre enregistré
474 messages
Popularité : +17 (19 votes)
Posté le 20 mai 2017 - 11:00
Bonjour,

J'image qu'il faut faire le lien avec le champ carte sur cette ligne JS :
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);


J'ai remplacé 'map_canvas' par MaCarte qui est l'objet créé dans WebDev mais ca ne fonctionne pas.
Si quelqu'un maitrise le JS, merci d'avance !

--
Jean-Michel
Membre enregistré
474 messages
Popularité : +17 (19 votes)
Posté le 21 mai 2017 - 20:42
Bonsoir,

Je pense avoir compris qu'il fallait ajouter une balise HTML en entête de la carte et un script en fin de page après la création de l'objet Carte.
On pourra ensuite utiliser la nom de la DIV pour le code JS.
MaPage..HTMLEntête = [
<DIV id="CARTE"></DIV>
]

MaPage..HTMLFinPage = [

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<script type="text/javascript">
var gObjCarte;
var gnEvenementClic;
var gnEvenementSurvol;
var markersArray = [];
var circlesArray = [];
var linesArray = [];
var markerClusterer = null;
var rectangleArray = [];
var polygoneArray = [];
var KMLArray = [];
var directionsArray = [];
var listeLabel = [];
var listeTrajet = [];
</script>
]


Il y a du mieux car j'arrive maintenant par exemple à tracer un cercle sur une carte.
Par contre, si j'utilise l'ID de la carte (ici dans mon prog c'est "CARTE") pour pour par exemple changer le type de carte, le zoom etc., la carte "clignote" mais ne change pas.

function ChangeTypeCarte()
{
var optionsCarte = {
zoom: 8,
center: { lat: 47.389982, lng: 0.688877 },
mapTypeId: google.maps.MapTypeId.HYBRID
}
var maCarte = new google.maps.Map(document.getElementById('CARTE'), optionsCarte);
}


Si quelqu'un peut donner le dernier coup de pouce ! Merci.

--
Jean-Michel
Membre enregistré
474 messages
Popularité : +17 (19 votes)
Posté le 22 mai 2017 - 14:38
Bonjour,

C'est bon, j'ai trouvé ! Je me remercie moi-même pour ces 2 jours d'effort. :D :merci:
Si cela intéresse quelqu'un, vous pouvez me contacter à jm(at)synfocom.fr

Pour info, même si ce n'est pas clairement indiqué dans la doc, CarteRécupèreObjetJS fonctionne aussi en PHP.

--
Jean-Michel
Membre enregistré
15 messages
Posté le 18 mars 2018 - 08:41
Pourriez vous mettre une copie de votre solution?

--
Erik