PC SOFT

PROFESSIONAL NEWSGROUPS
WINDEVWEBDEV and WINDEV Mobile

Home → WEBDEV 2024 → Personnalisation Google Maps
Personnalisation Google Maps
Started by Jean-Michel C, May, 19 2017 5:49 PM - 4 replies
Registered member
474 messages
Popularité : +17 (19 votes)
Posted on May, 19 2017 - 5:49 PM
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
Registered member
474 messages
Popularité : +17 (19 votes)
Posted on May, 20 2017 - 11:00 AM
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
Registered member
474 messages
Popularité : +17 (19 votes)
Posted on May, 21 2017 - 8:42 PM
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
Registered member
474 messages
Popularité : +17 (19 votes)
Posted on May, 22 2017 - 2:38 PM
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
Registered member
15 messages
Posted on March, 18 2018 - 8:41 AM
Pourriez vous mettre une copie de votre solution?

--
Erik