Πώς να ενσωματώσετε widget χάρτη σε οποιονδήποτε ιστότοπο

Ξεκινήστε από τον δημιουργό (η μόνη πραγματική δουλειά)

Όλα ξεκινούν από τον δημιουργό ενσωμάτωσης χάρτη. Η γεωκωδικοποίηση γίνεται μία φορά, εκεί — το απόσπασμα που αντιγράφετε μεταφέρει σταθερές συντεταγμένες, οπότε μια διακοπή του geocoder ή μια «κανονικοποίηση διεύθυνσης» δεν μπορεί να μετακινήσει αργότερα την πινέζα σας. Πληκτρολογήστε τη διεύθυνση, δείτε πού προσγειώνεται η πινέζα και σύρετέ την πάνω στην πραγματική σας είσοδο πριν την αντιγραφή: αυτό το σύρσιμο των δέκα δευτερολέπτων είναι η διαφορά ανάμεσα στον «σωστό δρόμο» και στη «σωστή πόρτα».

Θέλετε να δείτε μια έτοιμη ρύθμιση με πολλά υποκαταστήματα πριν φτιάξετε τη δική σας; Ανοίξτε τη δοκιμαστική έκδοση του δημιουργού — φορτώνει μια δείγμα εταιρεία με τρία υποκαταστήματα, με διευθύνσεις, χρωματιστές αριθμημένες πινέζες και το πάνελ τοποθεσιών ζωντανά στην προεπισκόπηση, έτοιμα για δοκιμή.

WordPress: shortcode προσθέτου ή σκέτο iframe;

Και οι δύο διαδρομές καταλήγουν στο ίδιο ακριβώς widget — διαλέξτε κατά προτίμηση.

Διαδρομή με πρόσθετο (συνιστάται): κατεβάστε το whatismylocation-widget.zip → wp-admin ▸ Πρόσθετα ▸ Προσθήκη νέου ▸ Μεταφόρτωση προσθέτου → Ενεργοποίηση. Έπειτα προσθέστε ένα μπλοκ Shortcode:

[whatismylocation_map lat="48.858400" lng="2.294500" name="Acme SARL" address="Champ de Mars, Paris"]

Τα χαρακτηριστικά διαβάζονται όπως οι επιλογές του δημιουργού: theme, marker, zoom, height, directions και, για υποκαταστήματα, pins="lat,lng,Label~Address|…" με panel= και motion= (δείτε τον πίνακα αναφοράς παρακάτω). Η ενότητα WordPress του δημιουργού παράγει ολόκληρο το shortcode για εσάς — χωρίς πληκτρολόγηση.

Διαδρομή χωρίς πρόσθετο: επικολλήστε το iframe από τον δημιουργό σε ένα μπλοκ Προσαρμοσμένο HTML. Ίδιο widget, χωρίς πρόσθετο προς ενημέρωση· το αντάλλαγμα είναι μεγαλύτερος κώδικας μέσα στο περιεχόμενό σας και καμία μετέπειτα επεξεργασία μέσω χαρακτηριστικών.

Squarespace, Shopify, Notion — και τα υπόλοιπα

Εκτός WordPress η δουλειά είναι συνήθως μία επικόλληση: προσθέστε το στοιχείο HTML/ενσωμάτωσης της πλατφόρμας σας (Wix Embed HTML, μπλοκ Code στο Squarespace, Embed στο Webflow) και ρίξτε μέσα το iframe. Μία διαφορά κάνει το widget χάρτη ευκολότερο από το widget τοποθεσίας: δεν χρειάζεται το χαρακτηριστικό allow="geolocation", επειδή δεν ζητά ποτέ τίποτα από τους επισκέπτες — άρα δεν υπάρχει κάτι ευαίσθητο να διατηρηθεί όταν ένας page builder ξαναγράφει το HTML σας.

Squarespace: προσθέστε ένα μπλοκ Code και επικολλήστε. Μια λεπτομέρεια που αξίζει να ξέρετε από την αρχή: τα μπλοκ Code απαιτούν το πρόγραμμα Business ή ανώτερο — στο πρόγραμμα Personal το μπλοκ εμφανίζει τον κώδικά σας ως απλό κείμενο αντί να τον αποδίδει.

Το Shopify αξίζει κάτι καλύτερο από μια επικόλληση: προσφέρουμε έτοιμη ενότητα θέματος — ένα αρχείο στο θέμα σας σάς δίνει εγγενή πίνακα ρυθμίσεων, με τα υποκαταστήματα ως μπλοκ που αναδιατάσσονται με σύρσιμο, χωρίς εφαρμογή και χωρίς κλειδί API.

Το Notion και το Google Sites ενσωματώνουν μέσω URL, όχι HTML. Δεν δέχονται καθόλου απόσπασμα iframe — αντί γι' αυτό, πατήστε Copy widget URL στον δημιουργό και επικολλήστε το στο μπλοκ /embed του Notion ή στο Embed ▸ By URL του Google Sites. Το widget είναι μια πλήρης αυτόνομη σελίδα, οπότε αποδίδεται τέλεια και στις δύο περιπτώσεις.

Salesforce Experience Cloud (δημόσιοι ιστότοποι κοινότητας): ρίξτε το iframe σε ένα στοιχείο HTML Editor — έπειτα ζητήστε από τον διαχειριστή σας να προσθέσει το whatismylocation.ai στο Setup ▸ Trusted URLs με την οδηγία CSP frame-src, αλλιώς το Salesforce μπλοκάρει σιωπηλά το frame. Όσες ομάδες δουλεύουν με κώδικα μπορούν να τυλίξουν το ίδιο URL σε ένα Lightning Web Component ~10 γραμμών:

<!-- wimlMap.html -->
<template>
  <iframe src={src} width="100%" height="340"
          loading="lazy" title="Map"></iframe>
</template>

// wimlMap.js
import { LightningElement } from 'lwc';
export default class WimlMap extends LightningElement {
  src = 'https://whatismylocation.ai/widget/map?lat=48.858400&lng=2.294500&name=Acme';
}

Πολλά υποκαταστήματα: το πάνελ τοποθεσιών

Σε μία ενσωμάτωση χωρούν έως 10 τοποθεσίες. Στη λειτουργία Advanced του δημιουργού, τοποθετήστε κάθε πινέζα, δώστε της ετικέτα και διεύθυνση και πατήστε Add location. Οι επισκέπτες βλέπουν ένα πάνελ τοποθεσιών — ακορντεόν δίπλα στον χάρτη σε υπολογιστή, λωρίδα καρτών με ολίσθηση στα κινητά — με αριθμημένες πινέζες: επιλέγοντας ένα υποκατάστημα, ο χάρτης πετά προς αυτό και δείχνει τη διεύθυνσή του με τον δικό του σύνδεσμο για οδηγίες πλοήγησης.

• panel= επιλέγει τη διάταξη: auto (προεπιλογή — στο πλάι σε φαρδιά iframe, λωρίδα σε στενά), side, bottom ή none για σκέτες πινέζες + αναδυόμενα.
• motion= ορίζει το εφέ εναλλαγής: smooth (προεπιλογή, με πέταγμα), fade, lively ή none. Οι επισκέπτες που έχουν ενεργή τη «μειωμένη κίνηση» στο σύστημά τους βλέπουν πάντα την ακαριαία εκδοχή, ό,τι κι αν επιλέξετε.
• open=no ξεκινά με όλες τις καταχωρίσεις κλειστές· ο χάρτης προσαρμόζεται αυτόματα σε όλα τα υποκαταστήματα και το zoom σας γίνεται το μέγιστο.

Αναφορά επιλογών

Επίλυση προβλημάτων στο WordPress

Το shortcode εμφανίζεται ως απλό κείμενο στη σελίδα. Αυτό το μπλοκ δεν επεξεργάζεται shortcodes. Στον επεξεργαστή μπλοκ χρησιμοποιήστε μπλοκ Shortcode (όχι μπλοκ κώδικα ή προμορφοποιημένου κειμένου)· στο Elementor χρησιμοποιήστε το widget Shortcode, στο Divi μια μονάδα Code. Όσοι χρησιμοποιούν τον κλασικό επεξεργαστή: γράψτε το στην καρτέλα «Οπτικό» ως απλό κείμενο.

Δεν εμφανίζεται απολύτως τίποτα. Δείτε τον πηγαίο κώδικα της σελίδας και αναζητήστε το whatismylocation. Ένα σχόλιο HTML για lat/lng που λείπουν σημαίνει ότι οι συντεταγμένες απουσιάζουν ή είναι άκυρες — αντιγράψτε ολόκληρο το shortcode από τον δημιουργό αντί να πληκτρολογείτε χαρακτηριστικά στο χέρι.

Το iframe εξαφανίζεται μόλις αποθηκεύσετε (διαδρομή χωρίς πρόσθετο). Το WordPress αφαιρεί τα iframe για ρόλους χρήστη χωρίς τη δυνατότητα unfiltered_html — σε multisite αυτό περιλαμβάνει εξ ορισμού και τους διαχειριστές — και ορισμένα πρόσθετα ασφαλείας κάνουν το ίδιο. Το shortcode του προσθέτου είναι η καθαρή λύση: δεν εξαρτάται από το αν ο ρόλος σας επιτρέπεται να αποθηκεύει σκέτα iframe.

Ο χάρτης είναι γκρι / δεν φορτώνουν τα πλακίδια. Τα πλακίδια έρχονται από το tile.openstreetmap.org· ένας πολύ επιθετικός ad-blocker ή ένα εταιρικό δίκτυο μπορεί να τα μπλοκάρει (η κάρτα επικάλυψης εξακολουθεί να εμφανίζεται). Επιβεβαιώστε το σε άλλο δίκτυο ή σε κινητό με δεδομένα.

Δεν εμφανίζεται πάνελ τοποθεσιών. Το πάνελ εμφανίζεται από 2 πινέζες και πάνω — μία μεμονωμένη τοποθεσία παίρνει την κλασική κάρτα επικάλυψης. Ελέγξτε επίσης ότι δεν έχει οριστεί panel="none".

Δεν παίζει το εφέ εναλλαγής. Σχεδόν πάντα φταίει η ρύθμιση «μειωμένη κίνηση» στο λειτουργικό σύστημα του επισκέπτη (ή στο δικό σας) — το widget τη σέβεται εκ σχεδιασμού και αλλάζει ακαριαία. Δεν είναι σφάλμα και οι υπόλοιποι επισκέπτες βλέπουν κανονικά το εφέ που επιλέξατε.

Οι αλλαγές δεν φαίνονται. Κάποιο πρόσθετο cache (ή η cache του παρόχου φιλοξενίας) σερβίρει την παλιά σελίδα. Καθαρίστε την cache της σελίδας μετά την επεξεργασία των χαρακτηριστικών του shortcode — το ίδιο το widget δεν έχει τίποτα να αποθηκεύσει σε cache.