Basic : insérer une carte dans une page web !

Bonjour !

J’ai la question du débutant : je voudrais insérer une carte dans la page http://b2ez.abacuswebstudio.digital/?nousysommes le code de cette page est :

<?php 

$src = "http://www.openstreetmap.org/#map=15/48.8290/2.3305" ;
 
$style = "
iframe { width:99%; height:50ex; display:none; margin:auto; border:1px red solid; } 
#core img { display:block; margin:auto; width:20%; min-width:2cm; }
" ;

$core["style"] = $style ;
$core["noscript"] = NOSCRIPT ;
$core[] = "<img src=\"Images/".tirer( array( "grillepain", "sheetah" ) ).".gif\" />" ;
$core[] = baliser( VIDE, "iframe src=\"$src\" onload=\"previousSibling.style.display='none'; style.display='block';\"" ) ;
 
?>

Comme vous pourrez le constater en allant sur la page, la carte se charge, mais ne s’affiche pas. Comment se fait-ce ? Que faire, pour que la carte s’affiche (notez que l’iframe se display à block, au chargement) ?

Merci de votre aide.

tu peux essayer ce code plutôt :

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=2.301163673400879%2C48.820484866660514%2C2.349057197570801%2C48.83749229606369&layer=mapnik&marker=48.82898930294263%2C2.32511043548584" style="border: 1px solid black"></iframe><br/><small><a href="http://www.openstreetmap.org/?mlat=48.8290&mlon=2.3251#map=15/48.8290/2.3251">Afficher une carte plus grande</a></small>

Merci de ta contribution, Sefoun ! Effectivement, la carte s’affiche, maintenant : http://b2ez.abacuswebstudio.digital/?nousysommes

Je vais essayer de trouver comment régler le zoom; sinon, je reviens vers vous.

Merci, encore !

Bonsoir,

grâce à votre contribution, l’url de ma carte est devenue : http://www.openstreetmap.org/export/embed.html?bbox=2.33025%2C48.82885. Comme vous pouvez le constater http://b2ez.abacuswebstudio.digital/?nousysommes, j’ai besoin de dézoomer, et d’ajouter un marqueur. Pour ce faire, que dois-je ajouter à l’url ?

Merci de votre contribution.

Il me semble qu’il n’y a rien de compliqué dans votre affaire, sur la carte d’OSM sur le menu à droite il y a une icône qui permet de partagé sa carte (le carré avec la flèche). Il y a trois options : 1) Lien ; 2) Lien abrégé ; 3)HTML + une case à cocher si on veut ajouter un marqueur à la carte.

Dans votre cas, vous cochez la case, vous choisissez l’emplacement du marqueur en le déplaçant sur la carte et vous cliquez sur HTML, cela génère un code comme cela :

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=2.3289620876312256%2C48.828399548494616%2C2.3319554328918453%2C48.829462514067224&layer=mapnik&marker=48.828931034099604%2C2.3304587602615356" style="border: 1px solid black"></iframe><br/><small><a href="http://www.openstreetmap.org/?mlat=48.82893&mlon=2.33046#map=19/48.82893/2.33046">Afficher une carte plus grande</a></small>

Pour moi il n’y a rien à toucher ou presque.

Vous copier ce code et dans votre page

<output>
<div id="core">

<style>

iframe { width:99%; height:50ex; display:none; margin:auto; } 
#core img { display:block; margin:auto; width:20%; min-width:2cm; }

</style><noscript>

Ce site carbure au JavaScript; pour en voir les jolis effets, vous devez 
mettre en service JavaScript sur votre navigateur&nbsp;!

</noscript><img src="Images/sheetah.gif" /><iframe src="http://www.openstreetmap.org/export/embed.html?bbox=2.33025%2C48.82885" onload="previousSibling.style.display='none'; style.display='block';"></iframe>
</div></output>

Soit vous collez entièrement le nouvel iframe, celui d’OSM, à la place de l’ancien et vous adaptez votre code, notamment au niveau de la balise style pour que ce ne soit pas contradictoire avec les paramètres donnés dans le code de l’API OSM. Sinon vous garder votre code et vous essayez d’adapter le src pour que ça donne ce que vous voulez, visiblement c’est la voie que vous avez choisi.

Les paramètres de zoom et les coordonnées du marqueurs sont déjà dans le code donné ci-dessus, à cette ligne là :

<a href="http://www.openstreetmap.org/?mlat=48.82893&mlon=2.33046#map=19/48.82893/2.33046">Afficher une carte plus grande</a>

#map=19 c’est le zoom, les valeurs possibles vont de 1 à 19
mlat=48.82893&mlon=2.33046 c’est les coordonnées du marqueur

essayez donc cette url : http://www.openstreetmap.org/?mlat=48.82893&mlon=2.33046#map=19/48.82893/2.33046

Bonsoir, et merci de ta contribution, Sefoun !

J’en suis là :

$latitude = 48.82885 ; $longitude = 2.33030 ;
$questring = implode( "&", array( "bbox=$longitude%2C$latitude", "layer=mapnik", "marker=$latitude%2C$longitude" ) ) ;
$src = "http://www.openstreetmap.org/export/embed.html?$questring" ;

Cela me donne ce que je veux… sauf le zoom. Que dois-je ajouter dans la query-string, pour paramétrer le zoom ?

NB : http://www.openstreetmap.org/?mlat=48.82893&mlon=2.33046#map=19/48.82893/2.33046 ne s’affiche pas dans un iframe !!!

Non mais là désolé, mais c’est trop long…

Actuellement sur votre carte il y a la pad pour le zoom, le visiteur peut très bien dézoomer et zoomer à sa convenance. Dans mon message précédent je vous ai dis que la variable dans l’url pour choisir l’échelle (ou le zoom) c’était #map=(un chiffre entre 1 et 19), actuellement sur votre site, le “zoom” est à 19.

Vous avez remarqué que dans mes deux précédents messages, je vous donnais un iframe tout fais, obtenu par l’API OSM ? Honnêtement vous voulez pas simplement copier-coller cet iframe en lieu et place de l’iframe présent dans votre code ? Normalement c’est fait pour ça… Au lieu de détricoté un iframe pour déclarer 36 variables et reconstruire la même chose ? De mon point de vue ça ne sert pas à grand chose de réinventer la roue.

Après si c’est un défi personnel, un entrainement, de l’apprentissage il y a probablement des forums plus adaptés comme par exemple : http://php.developpez.com/

Perso, je ne suis pas développeur web, ni pro, ni freelance, ni rien. J’ai du en tout et pour tout faire 2 site bidons pour m’exercer au html, php, css et un peu javascript. J’ai pas tout les éléments mais de mon point de vue vous avez réussi à vous compliquer la vie avec un truc tout simple. l’API OSM fourni un code html à copier-coller dans son site pour afficher sa carte, ça va pas plus loin.

Avant de générer ce code, vous choisissez l’échelle (le zoom) qui vous intéresse, vous placez le marqueur où bon vous semble (si vous en voulez un) et ensuite vous cliquez sur html, le code qui en sortira devrait répondre à toute vos attentes.