Tweet
Bonjour à tous,
J'ai installé le plugin zh google map pour pouvoir afficher une carte google map sur mon site joomla. Jusque là pas de problèmes. Je voudrais pouvoir avoir un marker déplacable avec une infobulle contenant les coordonnées géographiques.
Code html trouvé sur internet pour faire çà :
<script type="text/javascript">
var map = new GMap2(document.getElementById('map'), { size: new GSize(635,300)});
/* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
avec une taille de 635 * 300 pixel */
var myPoints = [];
/* Déclaration du tableau qui contiendra nos points, objets GLatLng. */
var bounds = new GLatLngBounds();
/* Instanciation de la classe GLatLngBounds */
myPoints.push( new GLatLng(48.8566667, 2.3509871)); // Paris
myPoints.push( new GLatLng(48.8123155, 2.2381535)); // Meudon
myPoints.push( new GLatLng(48.3906042, -4.4869013)); // Brest
myPoints.push( new GLatLng(50.6371834, 3.0630174)); // Lille
/* On remplit notre tableau */
for(var i = 0; i < myPoints.length; i++){
bounds.extend(myPoints[i]);
var thisMarker = addThisMarker(myPoints[i]);
map.addOverlay(thisMarker);
}
/* Extension des limites de la carte afin d'y insérer tous les points
On ajoute également un marker pour chacun
de ces points sur la carte */
function addThisMarker(point){
var marker = new GMarker(point, {draggable : true});
return marker;
}
On peut ensuite utiliser une méthode map State de la classe GMap2
intitulée getBoundsZoomLevel qui récupère le zoom nécessaire pour afficher
la carte en fonction de ses limites.
var newZoom = map.getBoundsZoomLevel(bounds);
De la même manière, on récupère le centre de la région (objet GLatLngBounds)
à l'aide de la méthode getCenter().
var newCentre = bounds.getCenter();
Il suffit ensuite d'initialiser la carte avec ces éléments.
map.setCenter(newCentre, newZoom);
</script>
Cela va paraitre surement idiot pour la plupart d'entre vous mais mon problème est que je ne sais pas comment rentrer ce code dans mon article sur mon site...??
D'avance merci.
Cédric
J'ai installé le plugin zh google map pour pouvoir afficher une carte google map sur mon site joomla. Jusque là pas de problèmes. Je voudrais pouvoir avoir un marker déplacable avec une infobulle contenant les coordonnées géographiques.
Code html trouvé sur internet pour faire çà :
<script type="text/javascript">
var map = new GMap2(document.getElementById('map'), { size: new GSize(635,300)});
/* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map
avec une taille de 635 * 300 pixel */
var myPoints = [];
/* Déclaration du tableau qui contiendra nos points, objets GLatLng. */
var bounds = new GLatLngBounds();
/* Instanciation de la classe GLatLngBounds */
myPoints.push( new GLatLng(48.8566667, 2.3509871)); // Paris
myPoints.push( new GLatLng(48.8123155, 2.2381535)); // Meudon
myPoints.push( new GLatLng(48.3906042, -4.4869013)); // Brest
myPoints.push( new GLatLng(50.6371834, 3.0630174)); // Lille
/* On remplit notre tableau */
for(var i = 0; i < myPoints.length; i++){
bounds.extend(myPoints[i]);
var thisMarker = addThisMarker(myPoints[i]);
map.addOverlay(thisMarker);
}
/* Extension des limites de la carte afin d'y insérer tous les points
On ajoute également un marker pour chacun
de ces points sur la carte */
function addThisMarker(point){
var marker = new GMarker(point, {draggable : true});
return marker;
}
On peut ensuite utiliser une méthode map State de la classe GMap2
intitulée getBoundsZoomLevel qui récupère le zoom nécessaire pour afficher
la carte en fonction de ses limites.
var newZoom = map.getBoundsZoomLevel(bounds);
De la même manière, on récupère le centre de la région (objet GLatLngBounds)
à l'aide de la méthode getCenter().
var newCentre = bounds.getCenter();
Il suffit ensuite d'initialiser la carte avec ces éléments.
map.setCenter(newCentre, newZoom);
</script>
Cela va paraitre surement idiot pour la plupart d'entre vous mais mon problème est que je ne sais pas comment rentrer ce code dans mon article sur mon site...??
D'avance merci.
Cédric
Commentaire