Google térkép – egy terület kiemelése

Szitu: a szolgáltatásodat csak egy bizonyos területen belül tudod végezni. Vagy mondjuk kereskedő vagy és vállalsz házhoz szállítást, de nem futárszolgálattal hanem saját munkatársakkal és ezért nem országosan, csak mondjuk egy adott város bizonyos részén tudod ezt megoldani.

Feladat: ezt valahogy jelezni kellene az ügyfeleknek. Meg lehet oldani persze úgy is, hogy a Google maps screenshoton megrajzolod azt a területet, ahova még szállítasz/szolgáltatsz. A másik megoldás, hogy egy kis javascript segítségével egy élő Google térképen jelölöd meg, emeled ki a területet.

Ha a Google-ban keresel rá, akkor a „Google maps” + „highlight an area” vagy „highlight a region” kifejezésekre érdemes keresned. Van több fizetős megoldás is, de íme egy egyszerűbb amihez csak a koordinátákat kell átírnod és már illesztheted is be a weboldaladba.

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <div id="map" style="width: 80%; height: 600px; margin:auto auto"></div>
    <script>
        var map, polygon;
        var init = function() {
            map = new google.maps.Map(document.getElementById("map"), {
                zoom: 15,
                center: {
                    lat: 47.485889,
                    lng: 19.100217,
                },
                mapTypeId: "roadmap"
            });
            polygon = new google.maps.Polygon({
                paths: [
                    {lat:47.489173, lng:19.092716},
                    {lat:47.488963, lng:19.092448},
                    {lat:47.488390, lng:19.092448},
                    {lat:47.485704, lng:19.092945},
                    {lat:47.481974, lng:19.103944},
                    {lat:47.486440, lng:19.107796},
                    {lat:47.488126, lng:19.101540},
                 ],
                strokeColor: "#FF0033",
                strokeOpacity: 0.5,
                strokeWeight: 15,
                fillColor: "#FF0033",
                fillOpacity: 0.2
            });
            polygon.setMap(map);
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBopIZ1E_Vm9NL_wSV-j6ZMCXNjspTbwqA&callback=init"></script>
</body>

</html>

Így fog kinézni a weboldalon a fenti kód:

Google térképen egy terület kiemelése, megjelölése

A kódban az alábbi részletnél adhatod meg, hogy a térkép mely pontja legyen középen illetve mekkora legyen a terület zoom-ja:

               zoom: 15,
                center: {
                    lat: 47.485889,
                    lng: 19.100217,
                },

Azt, hogy mely terület legyen kijelölve, a koordináta adatokkal tudod meghatározni, ami a kódban ez a rész:

                paths: [
                    {lat:47.489173, lng:19.092716},
                    {lat:47.488963, lng:19.092448},
                    {lat:47.488390, lng:19.092448},
                    {lat:47.485704, lng:19.092945},
                    {lat:47.481974, lng:19.103944},
                    {lat:47.486440, lng:19.107796},
                    {lat:47.488126, lng:19.101540},
                 ],

A pontok meghatároza pofonegyszerű ezzel a weboldallal: https://www.latlong.net

Ahogy a lentebbi képen is láthatod, az 1-es ponton csak kattints a kívánt területre és a 2-es pontnál azonnal kiírja, hogy mi a pontos koordinátája. Ezt már csak be kell írnod a fenti JS kódba.

Térkép koordináta kereső / generátor

Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét