Aller au contenu

Google Map API et intégration dans un site web/bdd


Chandon

Sujets conseillés

Bonjour à tous,

Je viens de découvrir l'intérêt du croisement de l'API GoogleMap et des bases de données de mon site web.

http://www.google.fr/apis/maps/documentation/

Je suis arrivé à créer une carte et à intégrer dessus des points comportant un petit texte, ces données étant stockées dans une base mysql.

Je sais aussi changer la représentation du marqueur en un autre, de mon choix.

MAIS

Je ne sais pas faire les deux en même temps.

Ya un truc qui coince, je ne sais pas quoi. :wacko:

Avez vous quelques tuyaux à me donner à ce sujet, un bout de code ?

Merci de votre aide.

Lien vers le commentaire
Partager sur d’autres sites

Hum, oui, bon, d'accord... Justement, j'ai besoin d'aide pour savoir comment imbriquer les 2 fonctions, c'est ce que j'arrive pas à faire.

Voilà le code source généré de la page, affichant les marqueurs 'standards' et une boite de texte quand on clique sur ces marqueurs

<script type="text/javascript">
//<![CDATA[

var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(46.73986059969267, 4.5263671875), 5, G_NORMAL_MAP);
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});

// Creates a marker whose info window displays the given number
function createMarker(point, number)
{
var marker = new GMarker(point);
// Show this markers index in the info window when it is clicked
var html = number;
GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
return marker;
};

var point = new GLatLng(43.2784316495303200,5.4151761531829830);
var marker = createMarker(point, 'Nom 1<br><img src=\'img/icons/user.png\'> Membre du site');
map.addOverlay(marker);

var point = new GLatLng(47.3127587222493840,5.0372314453125000);
var marker = createMarker(point, 'Nom 2<br><img src=\'img/icons/user.png\'> Membre du site');
map.addOverlay(marker);


//]]>
</script>

Et voilà le code donné par google pour changer la forme des marqueurs

// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

var point = new GLatLng(latitude,longitude);
map.addOverlay(new GMarker(point, icon));

Toute aide sera la bienvenue :)

Lien vers le commentaire
Partager sur d’autres sites

Bon, reprenons depuis le début car visiblement je ne comprends pas trop ton problème....

1/ Tu sais afficher des (plusieurs) points tirés de ta base avec le marqueur standard

2/ Tu sais changer la représentation du marqueur.

A partir de ce moment, je ne vois pas ce qui bloque pour afficher chaque point avec un marqueur différent

Si tu veux va faire un tour sur cette page, fais afficher la source, et tu devrais trouver ton bonheur, non ?

sinon explique moi en donnant des exemples.

a+

Lien vers le commentaire
Partager sur d’autres sites

Un bon exemple vaut mieux qu'une longue explication.

merci, c'est exactement ce que je cherchais.

Je l'ai adapté, et ça marche au poil pour mon cas.

Merci encore jeroen !

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...