Paano Magdagdag ng Maps sa App Mo: Embeds, Interactive Maps at Store Locators

Para magdagdag ng map sa app, unang magpasya kung kailangan mo ng static embed (isang lokasyon na may pin, gaya ng "hanapin ang tindahan namin") o interactive map (maraming pin mula sa data mo, may filters, clustering, at "malapit sa akin"). Para sa iisang lokasyon, pinakamabilis ang naka-embed na map at, gamit ang Maps Embed API ng Google, libre ito. Para sa interactive maps, gumamit ng JavaScript map library (Google Maps JavaScript API, Mapbox GL JS, o open-source na Leaflet na may tile provider), itago ang latitude at longitude ng bawat lugar sa database mo, at higpitan ang API key mo sa sarili mong domain. Ang mga detalye ng vendor sa ibaba ay galing sa sariling dokumentasyon ng bawat provider, ayon sa datos noong Setyembre 2026.

Anong uri ng map ang kailangan mo?

Kadalasang unang row lang ang kailangan ng karamihan ng maliliit na business site. Ang directories, marketplaces at listing sites ay nangangailangan ng pangatlo at pang-apat.

Mga opsyon mo

Google Maps Platform

Sinasabi ng getting-started guide ng Google na kailangan mong gumawa ng Cloud project na may naka-enable na billing at i-enable ang mga API na gusto mo. Ang pay-as-you-go pricing nito ay nagbibigay ng Essentials SKUs, kasama ang Dynamic Maps, ng 10,000 libreng events kada buwan, at nakalista ang Dynamic Maps sa $7.00 kada 1,000 events sa itaas nito (sa unang volume tier). Nakalista bilang walang limitasyon at libre ang Maps Embed SKU. Nagbebenta rin ang Google ng buwanang subscription plans. Tingnan ang Google Maps Platform pricing para sa kasalukuyang numero.

Mapbox

Nakalista sa pricing page ng Mapbox ang 50,000 libreng buwanang map loads para sa Mapbox GL JS sa web, pagkatapos ay $5.00 kada 1,000 loads. Tingnan ang Mapbox pricing.

Leaflet at OpenStreetMap

Inilalarawan ng Leaflet ang sarili bilang open-source na JavaScript library para sa mobile-friendly na interactive maps, mga 42 KB ang JavaScript. Kailangan nito ng map tiles (mga larawan ng mapa) mula sa isang lugar. Nakaaakit gamitin ang public tile servers ng OpenStreetMap, pero hinihingi ng tile usage policy ang nakikitang attribution, ipinagbabawal ang bulk na pag-download, walang garantiya ng serbisyo, at binabalaan nito ang mga komersyal na serbisyo na maaaring bawiin ang access. Para sa totoong produkto, gumamit ng komersyal o self-hosted na tile source na gumagana sa Leaflet.

API keys: pampubliko, pero nakahigpit

Nakikita ng sinumang magbukas ng page mo ang map keys na ginagamit sa browser. Inaasahan iyon, pero ibig sabihin nito na maaaring kopyahin ng iba ang key mo at pataasin ang bayad mo. Ang security guidance ng Google ay magdagdag ng website (HTTP referrer) restrictions na naglilista ng mga domain mo, at API restrictions para gumana lang ang key sa mga API na ginagamit mo.

Dapat hiwalay na keys para sa server-side services, gaya ng geocoding ng libu-libong address, at itago ang mga ito sa server-side secrets, hindi sa page. Magtakda rin ng budget alerts o quotas sa console ng provider para hindi maging malaking bill ang isang pagkakamali.

Geocoding: gawing coordinates ang address nang isang beses

Latitude at longitude ang kinukuha ng maps, hindi address. Ang pag-convert ng address sa coordinates ay tinatawag na geocoding, at karaniwang sinisingil ito ng mga provider kada request. Ang mahusay na pattern:

1. Kapag na-save ang listing, i-geocode ang address nito sa server.
2. I-store ang latitude at longitude sa database.
3. Binabasa ng map ang naka-store na coordinates; hindi ito nag-ge-geocode sa bawat pagbisita sa page.

Tingnan ang terms ng bawat provider kung gaano katagal puwedeng i-store ang resulta ng geocoding; nag-iiba ang mga ito.

Mga halimbawang prompt

Isang naka-embed na map:

Sa Contact page, magdagdag ng naka-embed na Google map na nagpapakita ng address namin (12 High Street, Leeds) gamit ang Maps Embed API, at ang key ay nasa GOOGLE_MAPS_EMBED_KEY. Maglagay ng "Get directions" link sa ilalim. Gawin itong full width sa telepono at i-lazy-load.

Interactive na map ng listings:

Idagdag ang latitude at longitude sa listings table. Kapag may ginawang listing o nagbago ang address nito, i-geocode ito sa server gamit ang key na nasa GEOCODING_API_KEY at i-save ang coordinates. Sa Browse page, magpakita ng map na may marker bawat listing gamit ang Leaflet, na may clustering kapag nagkakapatong ang markers. Ang pag-click sa marker ay nagpapakita ng title, presyo at link. Dapat magkapareho ang filters ng map at ng listahan.

"Malapit sa akin":

Magdagdag ng "Near me" button na humihingi ng lokasyon ng bisita at nagpapakita ng listings sa loob ng 10 km, nakaayos ayon sa layo. Kapag tumanggi sila sa access sa lokasyon, hayaan silang mag-type ng lungsod.

Step by step

1. Piliin ang uri ng map mula sa table sa itaas.
2. Gumawa ng account sa provider at project, at i-enable lang ang mga API na kailangan mo.
3. Gumawa ng keys: isang browser key na nakahigpit sa mga domain mo (kasama ang preview domain habang nagbi-build) at, kung kailangan, isang server key para sa geocoding.
4. Itago ang keys bilang secrets at hilingin sa builder mo na gamitin ang mga ito; nakahigpit pa rin ang browser key kahit nasa page ito.
5. Itago ang coordinates ng bawat lugar sa database mo.
6. Gawin ang map: markers, popups, clustering, at makatwirang default na zoom.
7. Ipares sa listahan. Hindi madaling gamitin ang map lang sa telepono at para sa screen readers. Ipakita ang parehong resulta bilang listahan.
8. Magtakda ng budget alert sa console ng provider.
9. I-publish at subukan sa live domain, dahil madalas harangan ng referrer restrictions ang map hanggang maidagdag ang live domain.

Mga karaniwang pagkakamali

• Mga hindi nakahigpit na keys. Maaaring gamitin ng sinuman ang mga ito sa sarili nilang site.
• Geocoding sa bawat pagbisita sa page. Mabagal at mahal; i-geocode nang isang beses sa pag-save.
• Nakakalimutan ang live domain sa key restrictions. Gumagana sa preview, pero blangkong kulay-abong kahon sa production.
• Layout na map lang. Nakakairita ang mga pin na walang listahan sa maliliit na screen at hindi accessible.
• Daan-daang markers na walang clustering. Hindi mababasa at mabagal.
• Nawawalang attribution. Karamihan ng map at tile providers ay nangangailangan nito, at ang pagtatago nito ay lumalabag sa terms nila.
• Paghingi ng lokasyon sa pag-load ng page. Humingi lang kapag pinindot ng user ang "Near me".

Checklist

• Tamang uri ng map ang napili para sa trabaho
• Nakahigpit ang browser key sa mga domain at kailangang API
• Nasa server-side secrets ang mga server key
• Nakaimbak sa database ang coordinates, na na-geocode nang isang beses
• Ipinapakita rin ang resulta bilang listahan
• May clustering para sa maraming markers
• Nakikita ang attribution
• May budget alert na nakatakda sa provider
• Nasubukan sa na-publish na domain at sa telepono

Pagdaragdag ng maps gamit ang Mythex

Wala pang built-in na maps integration ang Mythex; magdadala ka ng sarili mong provider key, ilalagay ito bilang project secret (o ipapaste kapag nagpakita ng secrets card ang agent), at hihingin ang map sa chat, gaya ng nakasulat sa Integrate any API. Ilalagay ang coordinates sa database ng project. Tandaang idagdag ang preview at published domains mo sa website restrictions ng key, at mag-publish ulit pagkatapos baguhin ang secrets.

Kadalasang katabi ng maps ang paghahanap at listings: tingnan ang paano magdagdag ng search sa app mo, paano gumawa ng directory website at paano gumawa ng small business website.

Mga tanong