- Gran Vía 2828013 Madrid
- Calle de Alcalá 4228014 Madrid
- Paseo del Prado 828014 Madrid
- Calle Mayor 1528013 Madrid
- Plaza de Santa Ana 328012 Madrid
- Calle de Fuencarral 7028004 Madrid
Adresse avec épingle sur plan
Tape une rue, choisis une suggestion et une épingle tombe sur un petit plan de quartier qui zoome sur l'endroit.
Réglages
Code
<div class="uvq06-ad"><label for="uvq06-ad-in" class="lb">Adresse de livraison</label><div class="fd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0C18.5 15.4 12 21 12 21z"/><circle cx="12" cy="10" r="2.3"/></svg><input id="uvq06-ad-in" role="combobox" aria-expanded="false" aria-controls="uvq06-ad-ls" aria-autocomplete="list" autocomplete="off" spellcheck="false" placeholder="Rue et numéro"><ul id="uvq06-ad-ls" role="listbox" aria-label="Suggestions" hidden><li role="option" id="uvq06-ad-o0" data-x="40" data-y="38" aria-selected="false"><b>Gran Vía 28</b><span>28013 Madrid</span></li><li role="option" id="uvq06-ad-o1" data-x="64" data-y="46" aria-selected="false"><b>Calle de Alcalá 42</b><span>28014 Madrid</span></li><li role="option" id="uvq06-ad-o2" data-x="72" data-y="70" aria-selected="false"><b>Paseo del Prado 8</b><span>28014 Madrid</span></li><li role="option" id="uvq06-ad-o3" data-x="26" data-y="58" aria-selected="false"><b>Calle Mayor 15</b><span>28013 Madrid</span></li><li role="option" id="uvq06-ad-o4" data-x="48" data-y="72" aria-selected="false"><b>Plaza de Santa Ana 3</b><span>28012 Madrid</span></li><li role="option" id="uvq06-ad-o5" data-x="46" data-y="18" aria-selected="false"><b>Calle de Fuencarral 70</b><span>28004 Madrid</span></li></ul></div><div class="mp" aria-hidden="true"><svg viewBox="0 0 200 110" preserveAspectRatio="xMidYMid slice"><rect class="ld" width="200" height="110"/><rect class="pk" x="118" y="10" width="56" height="34" rx="5"/><circle class="pk" cx="34" cy="88" r="10"/><path class="rv" d="M-5 102C30 92 62 108 100 97S165 80 205 90"/><path class="s2" d="M0 20H200M0 56H200M0 84H200M20 0V110M36 0V110M84 0V110M142 0V110M182 0V110"/><path class="s1" d="M0 40H200M0 70H200M58 0V110M110 0V110M0 106L132 0"/></svg><span class="rp"></span><span class="pin"></span></div><p class="ok" aria-live="polite"></p></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Champs
Voir tout : ChampsOù l’utiliser
Un champ d'adresse avec combobox accessible et un plan de rues stylisé en SVG en ligne : pâtés de maisons, un parc, une rivière et des avenues. Les suggestions se filtrent sans tenir compte des accents et se pilotent avec les flèches et Entrée. En choisir une fait zoomer le plan vers ce point, tomber une épingle avec rebond et partir une onde au sol.
La couleur principale est l'épingle et la secondaire les parcs. Remplace la liste par les résultats de ton service de géocodage avec leur position sur le plan, et utilise-le pour un paiement avec livraison, une recherche de magasins ou une réservation.