GoogleMap

[Résolu]
Signaler
Messages postés
62
Date d'inscription
dimanche 14 novembre 2004
Statut
Membre
Dernière intervention
21 avril 2010
-
Messages postés
127
Date d'inscription
vendredi 16 octobre 2009
Statut
Membre
Dernière intervention
10 décembre 2012
-
Bonjour,

Je suis en train de chercher comment afficher à l'aide de l'API google une carte avec une localisation différente dans chacune de mes pages.
Mon site n'a pas de BDD.

J'aimerai mettre le script de l'api à l'extérieur et l'appeler par un include (jusque là, ça peut aller )
C'est après que j'ai un souci, j'aimerai n'avoir à définir dans chaque page que la lattitude et la longitude dans une balise div par exemple et c'est là que je coince!!

Je ne suis pas réellement codeur, je ne fait qu'assembler des codes trouvé par ci par là! d'où ma question

Merci d'avance à ceux qui prendront la peine de me donner un coup de main



greg

20 réponses

Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
10
Et ta fonction initialize c'est quoi ?

function initialize()
{
   initNXGMap(document.getElementById('map'));
}


Moi perso j'utilise une librairie JavaScript (Mootools, JQuery, Prototype ou autre) ce qui me permet de ne plus me prendre la tête avec ce genre d'évènements...

Sinon pour le multi navigateur compatibilité du onLoad sur le body t'as un truck de barbar :
//setup onload function
if(typeof window.addEventListener != 'undefined') //.. gecko, safari, konqueror and standard
window.addEventListener('load', TAFONCTION, false);
else if(typeof document.addEventListener != 'undefined') //.. opera 7
document.addEventListener('load', TAFONCTION, false);
else if(typeof window.attachEvent != 'undefined') //.. win/ie
window.attachEvent('onload', TAFONCTION);
else //** remove this condition to degrade older browsers : mac/ie5 and anything else that gets this far
{
if(typeof window.onload == 'function') //if there's an existing onload function
{
var existing = onload;
window.onload = function()  //add new onload handler
{
existing(); //call existing onload function
TAFONCTION();  //call replacetext onload function
};
}
else  //setup onload function
window.onload = TAFONCTION;
}



Moi comme je te le disais, j'utilise Mootools du coup j'ai juste à faire :
window.addEvent('domready', function() {
   TAFONCTION();
}); 

ET Mootools se charge du reste (compatibilité et autre problèmes)... Après à toi de choisir la lib qui te convient le mieux... Mais ca simplifie vraiment la vie.

_________________________________
Min iPomme
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
10
Alors il faut bien que tu ai ca en tête :
Quand tu place un marqueur avec une adresse, Google se sert d'un service de géo-codage, convertis l'adresse en coordonnées GPS.

Or ce service n'est pas "gratuit". En effet tu as le droit à un certain nombre de géo-codage par jours.

Pour éviter ce problème ce que j'ai fais c'est que quand quelqu'un entre son adresse, j'utilise un géo-codage et je demande à l'utilisateur si le point est bien placé (Au pire il peut le repositionner à la main pour mieux le placer). Ensuite quand l'utilisateur enregistre son adresse, j'enregistre les coordonnées GPS avec. Par la suite je me sert donc de ses coordonnées GPS pour le situer et plus de son adresse. Tu vois ce que je veux dire ? Je sais pas si t'as moyen de faire ce genre de choses mais c'est mieux (Plus rapide de placer un pt par les coordonnées que par l'adresse et illimité)...

Pour ce qui est de placer tes points par coordonnées GPS, d'après la référence de ton API, il faut utiliser la fonction :
addGeoPoint($longitude, $latitude, $htmlinfo, $setCenter)

_________________________________
Min iPomme
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
10
Hello,

Peu-tu expliquer plus en détail ton problème ?
Avec des exemples... Et avec le lien de l'API que tu utilise (Il existe plusieurs API Google Map avec PHP ou JavaScript).
_________________________________
Min iPomme
Messages postés
62
Date d'inscription
dimanche 14 novembre 2004
Statut
Membre
Dernière intervention
21 avril 2010

Bonjour et merci Tonio_35 de prendre le temps de me répondre.

Je n'ai pas réellement opté pour l'une ou l'autre des API, je ne vois pas la différence entre celle en javascript et php, pour moi le problème a l'air d'être le même.

En gros ce que je vois, si l'on prends le code qui se trouve dans ce site http://www.phpcs.com/tutorial.aspx?ID=878

<?php

define(GoogleMapsKey, '<GoogleAPIKey>');
require "nxgooglemapsapi.php"; // Include de la classe
$api = new NXGoogleMapsAPI(); // instanciation de la classe
$api -> setHeight(600); // hauteur de la map
$api -> setWidth(800); // largeur de la map
$api->addControl(GLargeMapControl);
$api->addControl(GMapTypeControl); 
$api->setZoomFactor(16); 
$api->addControl(GOverviewMapControl); 
$api->addAddress("adresse, pays", "Texte de la bulle (TXT/HTML)", (true/false)); 
$api-> setCenter ((int) $long, (int) $lat)) //<---- C'EST CA QUE J'AIMERAI AVOIR A METTRE DIRECTEMENT LA OU J'INSERE LE CODE DANS LA PAGE
$onLoad = $api->getOnLoadCode();
$contenuMAP = $api-> getBodyCode ();

?>




à chaque coup (sur chaque page) il va falloir recopier tout le code qui se trouve entre les balises php.
Ce que j'aimerai moi, c'est faire appel à ce code qui sera identique à chaque fois et juste mettre à l'endroit ou je veux ma carte un bout de code avec les coordonnées du marker Est ce possible

greg
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
10
Je suis pas sur d'avoir compris ta demande mais tu peu créer une fonction par exemple :

<?php
define("GoogleMapsKey", '<GoogleAPIKey>');
function loadMap($long, $lat)
{
    if(!class_exists("NXGoogleMapsAPI"))
    {
        require "nxgooglemapsapi.php"; // Include de la classe
    }
    $api = new NXGoogleMapsAPI(); // instanciation de la classe
    $api -> setHeight(600); // hauteur de la map
    $api -> setWidth(800); // largeur de la map
    $api->addControl(GLargeMapControl);
    $api->addControl(GMapTypeControl); 
    $api->setZoomFactor(16); 
    $api->addControl(GOverviewMapControl); 
    $api->addAddress("adresse, pays", "Texte de la bulle (TXT/HTML)", (true/false)); 
    $api-> setCenter ((int) $long, (int) $lat)) //<---- C'EST CA QUE J'AIMERAI AVOIR A METTRE DIRECTEMENT LA OU J'INSERE LE CODE DANS LA PAGE
    return array($api->getOnLoadCode(), $api->getBodyCode());
}
?>

Qui est inclus dans toutes tes pages.

Ensuite tu as juste à l'appeler à l'endroit voulu :
<?php
$map = loadMap('39.183192', '-94.367676');
// Mon code header :
echo $map[0];
// Mon code body:
echo $map[1];
?>

_________________________________
Min iPomme
Messages postés
62
Date d'inscription
dimanche 14 novembre 2004
Statut
Membre
Dernière intervention
21 avril 2010

Je viens d'essayer, mais j'ai dût oublié quelque chose
j'ai comme résultat:

initNXGMap(document.getElementById('map'));


greg
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
10
Par rapport à ton premier message :

$onLoad = $api->getOnLoadCode();

se trouve dans :
$map[0];


$contenuMAP = $api-> getBodyCode ();

se trouve dans :
$map[1];




_________________________________
Min iPomme
Messages postés
62
Date d'inscription
dimanche 14 novembre 2004
Statut
Membre
Dernière intervention
21 avril 2010

Heu


Celà veux dire que je dois ajouter quelque chose avec $map[0] et $map[1] ?
Je suis désolé mais là je ne vois pas ce que tu veux me dire.

Voilà le code que j'ai mis et qui me donne à la place de la carte:
initNXGMap(document.getElementById('map'));


Dans une page externe:
<!-- carte google test -->
<?php
define("GoogleMapsKey", '');
function loadMap($long, $lat)
{
    if(!class_exists("NXGoogleMapsAPI"))
    {
        require "./data/class/nxgooglemapsapi.php"; // Include de la classe
    }
    $api = new NXGoogleMapsAPI(); // instanciation de la classe
    $api -> setHeight(600); // hauteur de la map
    $api -> setWidth(800); // largeur de la map
    $api->addControl(GLargeMapControl);
    $api->addControl(GMapTypeControl); 
    $api->setZoomFactor(16); 
    $api->addControl(GOverviewMapControl); 
    $api->addAddress("adresse, pays", "Texte de la bulle (TXT/HTML)", (true)); 
    $api-> setCenter((int) $long, (int) $lat); //<---- C'EST CA QUE J'AIMERAI AVOIR A METTRE DIRECTEMENT LA OU J'INSERE LE CODE DANS LA PAGE
    return array($api->getOnLoadCode(), $api->getBodyCode());
}
?>


Et là où je veux inclure ma carte:


<?php
$map = loadMap('39.183192', '-94.367676');
// Mon code header :
echo $map[0];
// Mon code body:
echo $map[1];
?>




J'ai essayé d'ajouter ces éléments (provenant du code source) mais l'erreur reste là ou alors l'ensemble du site plante:
<html>
<head>
<?php echo $api->getHeadCode(); ?> // <----Si je mets ça le site plante intégralement
</head>
"> //<----En mettent je n'ai rien de plus
<?php echo $contenuMAP; ?> //<----En mettent je n'ai rien de plus

</html>



Je mets tout le code que j'ajoute, car je pense que tu verras plus facilement où je fais des erreurs

Merci encore de prendre la peine de m'aider à installer ça dans mon site.

greg
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
10
1 - Remplace :
define("GoogleMapsKey", '<TACLÉAPI>');

Par :
define("GoogleMapsKey", 'TACLÉAPI');



Ensuite tu n'est en fait pas obligé de créer une fonction.
Dans ta page externe :
<!-- carte google test -->
<?php
define("GoogleMapsKey", 'TACLEAPI');
if(!class_exists("NXGoogleMapsAPI"))
{
    require "./data/class/nxgooglemapsapi.php"; // Include de la classe
}
// J'ai renommé la variable pour ne pas que tu la réutilise par mégarde
// ailleurs dans ton site
$api_ggmap = new NXGoogleMapsAPI(); // instanciation de la classe
$api_ggmap->setHeight(600); // hauteur de la map
$api_ggmap->setWidth(800); // largeur de la map
$api_ggmap->addControl(GLargeMapControl);
$api_ggmap->addControl(GMapTypeControl); 
$api_ggmap->setZoomFactor(16); 
$api_ggmap->addControl(GOverviewMapControl); 
$api_ggmap->addAddress("adresse, pays", "Texte de la bulle (TXT/HTML)", (true)); 
?>


Dans tes pages
<html>
<head>
<?php
$api_ggmap->setCenter((int) 39.183192, (int) -94.367676);
echo $api_ggmap->getHeadCode(); ?>
</head>
getOnLoadCode();?>">
<?php echo $api_ggmap->getBodyCode();?>

</html>


Es que tu comprends le principe ?
_________________________________
Min iPomme
Messages postés
62
Date d'inscription
dimanche 14 novembre 2004
Statut
Membre
Dernière intervention
21 avril 2010

Bonjour,


ça commence à prendre forme dans ma tête

En revanche, mon header est le même pour toutes les pages car appelé par un include, comme pour les footer, la colonne de gauche, etc...
Le tout appelé dans l'index qui appel mes pages.

Donc si dans l'index qui gère l'ensemble j'ajoute dans la balise body
getOnLoadCode();?>">


Est il possible de ne mettre que ça dans chaque page à l'endroit ou je veux afficher ma carte :
<?php echo $api_ggmap->getBodyCode();?>

accompagné de :
<?php
$api_ggmap->setCenter((int) 39.183192, (int) -94.367676);
echo $api_ggmap->getHeadCode(); ?>


Ce qui me parait bizarre dans mon idée, c'est que j'appel getHeadCode(); dans le body

Est ce bon ou est ce que je fais encore des confusion

greg
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
10
Alors étudions un peut ca :

getOnLoadCode();?>">


Va donner comme tu l'as remarqué plus haut :



Soit :
1 - Tu met ce code en dur dans toutes tes pages ;
2 - MIEUX : dans les pages ou tu appel ta carte du met le code JavaScript "En ligne" :
<html>
<head>
<?php
$api_ggmap->setCenter((int) 39.183192, (int) -94.367676);
echo $api_ggmap->getHeadCode(); ?>
</head>


<script type="text/javascript">
window.onload = <?php echo $api_ggmap->getOnLoadCode();?>;
</script> 
<?php echo $api_ggmap->getBodyCode();?>


</html>


_________________________________
Min iPomme
Messages postés
62
Date d'inscription
dimanche 14 novembre 2004
Statut
Membre
Dernière intervention
21 avril 2010

Super! ça fonctionne

J'ai mis dans chaque page qui appel une carte différente:
<?php
$api_ggmap->setCenter((int) 39.183192, (int) -94.367676);
echo $api_ggmap->getHeadCode(); ?>
<script type="text/javascript">
window.onload = <?php echo $api_ggmap->getOnLoadCode();?>;
$api_ggmap->addAddress('fraser island, Australie', 'la plus grande île de sable au monde. Un paradis pour passer des vacances dans un lieu préservé', (true)); 
</script> 
<?php echo $api_ggmap->getBodyCode();?>

Voilà le résultat d'une des pages, j'ai plus qu'à faire évoluer les autres: http://www.voyage-australie-nz.com/au_qld_fraser.html

J'ai juste à essayer de modifier l'affichage de la carte en cherchant dans la fonction. Comme le Marker, le système de zoom, j'ai vu que google Map en avait mis un arrondi

Sinon j'aurais encore une question sur ce code:
Pour ajouter un marker suivant des coordonnées plutôt qu'avec une adresse. comment puis je faire si c'est possible bien sur

Encore merci Tonio_35 pour le sérieux coup de main

greg
Messages postés
62
Date d'inscription
dimanche 14 novembre 2004
Statut
Membre
Dernière intervention
21 avril 2010

Bonjour,

C'est encore moi
Le code fonctionne mais apparemment il bloque un autre code

Et ce la viendrait du Body onLoad !
Est il possible d'utiliser autre chose?

J'ai essayé ce code

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func
} else {
window.onload = function() {
initNXGMap(document.getElementById('map')); 
func();
}
}
}
addLoadEvent(initialize);

à la place de:
 


Mais ça ne fonctionne pas

Un autre petit coup de main serait le bienvenue

greg
Messages postés
62
Date d'inscription
dimanche 14 novembre 2004
Statut
Membre
Dernière intervention
21 avril 2010

Bonjou,

Je viens d'essayer les deux systèmes
[*] la version longue(celle de barbar)= qui fonctionne à merveille
[*] la version courte (mootools)= avec laquelle j'aiun problème d'affichage de la carte, en gros elle s'affiche mais pas au bon endroit, surement une erreur de ma part

Ou alors l'utilisation abusive de script mootools dans mon site
si on regarde mon header, j'ai tout un chargement! sans parler des appel de script dans mes autres pages (dans la partie body) Il y a surement une façon de réduire tout cela! Mais bon c'est un autre topic!!!

En tout cas, merci beaucoup pour ton aide, car maintenant ça fonctionne sans bloquer les autres scripts!
Si j'ai tout de mêm une autre question

J'ai bien réussis à customizer un petit peu l'affichage de la carte! (C'est l'API 1 de google?)
Mais si le point n'est pas référencer sur google (cas de leeu comme la calédonie qui n'est pas référencer ou très peu) comment puis je détermienr un lieu par ses coordonnées en lat long au lieu d'utiliser son nom de baptème.

M%erci encore pour le coup de main!!


greg
Messages postés
62
Date d'inscription
dimanche 14 novembre 2004
Statut
Membre
Dernière intervention
21 avril 2010

Super, merci pour le lien !!!
J'essais tout ça, et si j'ai un souci, je reviens par là


Merci encore Min iPomme pour le sacré coup de main!!!
greg
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
10
Mais de rien Greg...


_________________________________
Min iPomme
Messages postés
62
Date d'inscription
dimanche 14 novembre 2004
Statut
Membre
Dernière intervention
21 avril 2010

Ok, j'ai réussi à ajouter les coordonnées x et y

Juste une question Est ce qu'il existe une API, enfin un code dans ce genre, pour la nouvelle API de google, où il est possible d'ajouter Google Earth ?

Bon ok, j'en demande surement beaucoup, c'est déjà pas mal comme ça!!!
Voilà le résultat : La première fiche avec la carte

greg
Messages postés
127
Date d'inscription
vendredi 16 octobre 2009
Statut
Membre
Dernière intervention
10 décembre 2012

Pour Google Earth c'est possible avec le Plugin Google Earth


maCarte.addMapType(G_SATELLITE_3D_MAP);

Ce code signifie :

* qu'à la carte nommée maCarte,
* on va ajouter une nouveau type de carte addMapType,
* correspondant à la carte en 3D de Google Earth (G_SATELLITE_3D_MAP).

Il provoque l'affichage d'un nouveau bouton : "Earth", situé, par défaut, en haut à droite de la carte, au milieu des autres boutons permettant de modifier le type de carte.

Toutes les infos ici :
Toutes les infos ici.

Vamos
Messages postés
62
Date d'inscription
dimanche 14 novembre 2004
Statut
Membre
Dernière intervention
21 avril 2010

Bonjour,

Merci pour l'info ;) Juste une question est il possible de mettre la partie "function initialize()"dans le body?
Je demande ça, car dans mon site j'ai pratiquement une carte par page et un seul header pour toutes les pages et le site foncionne sans bdd!

Donc ma question plus générale, est ce que ce système pourra être intégré à ce type de site?

Merci par avance

greg
Messages postés
127
Date d'inscription
vendredi 16 octobre 2009
Statut
Membre
Dernière intervention
10 décembre 2012

Bonjour,

Si c'est pour la carte de type Earth, tu n'as pas besoin de reprendre tout le script donné en exemple.
Je n'ai pas suivi tout le fil de discussion mais si j'en crois le dernier lien tes cartes s'affichent sur ton site.

Donc tu as juste à mettre :
maCarte.addMapType(G_SATELLITE_3D_MAP);
là ou tu déclares ta Map

Vamos