Emre Yüz


Google Maps'in Ücretsiz Alternatifi Yandex Maps

Google Maps'in ücretsiz alternatifi Yandex Maps ile web sitenize, iletişim sayfanıza harita ekleyin.

Google Maps'in Ücretsiz Alternatifi Yandex Maps

By Emre YÜZ
26.11.2018 23:21:20



google maps yandex maps api ücretsiz alternatif

Merhaba,

Bildiğiniz gibi Google Maps'in ücretli olmasından dolayı neredeyse tüm sitelerin iletişim sayfasında aşağıdaki gibi bir manzara ile karşılaşmışsınızdır. Açıkçası sağlamış olduğu imkanlar ile istek başına talep etmiş olduğu ücret gayet makul ancak bu sefer ücretsiz bir alternatifi olan Yandex Maps'i tercih ediyorum. Günde 25.000 harita isteğine kadar ücretsiz olan Yandex Maps nasıl kullanılıyor bakalım.

Öncelikle https://tech.yandex.com.tr/maps/jsapi/ adresinden kayıt olarak ücretsiz API anahtarımızı alıyoruz. Ben projemde, elimdeki iki koordinatın harita üzerindeki rotasını çıkarttım.

Haritamızın çalışması için kütüphanemizi almış olduğumuz API anahtarı ile birlikte sayfamıza aşağıdaki gibi ekliyoruz. Eğer koordinatları veritabanından çekiyorsanız bu sorunla karşılaşabilirsiniz haritanın merkezi olan "center:" koordinatları 5 karakter uzunluğunda yani 00.00, 11.11 gibi yapmanız yeterli diğer türlü nedensiz bir şekilde harita yüklenmiyor.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ASAP Maps</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://api-maps.yandex.ru/2.1/?apikey=SIZIN_API_ANAHTARINIZ&lang=en_US"></script>
    <script type="text/javascript">
        ymaps.ready(function() {
        var myMap = new ymaps.Map("map", {
            center: [37.84, 27.84],
            zoom: 9
        });
			ymaps.route([
				{ type: 'viaPoint', point: [37.846334, 27.844278]},
				{ type: 'wayPoint', point: [37.838019, 27.845585] }
			], {
				mapStateAutoApply: true
			}).then(function (route) {
				route.getPaths().options.set({	
					balloonContentLayout: ymaps.templateLayoutFactory.createClass("{{ properties.humanJamsTime }}"),
					strokeColor: "c41230",
					opacity: 0.9
				});
				myMap.geoObjects.add(route);
			});
		});
    </script>
</head>
<body>
    <div id="map" style="width: 100%; height: 100%;"></div>
</body>
</html>

Sonuç haritamız aşağıdaki gibi gözüküyor. Rota çizgisini strokeColor değişkeninden hex renk kodu ile değiştirebilirsiniz. Ayrıntılı olarak bir çok örneği belgelerde bulabilirsiniz.



Emre Yüz
Emre YÜZ
Multidisipliner Full-Stack Web Geliştirici/Tasarımcı, Veri
Mimarı ve Analist.

Multidisipliner Full-Stack Web Geliştirici/Tasarımcı, Veri Mimarı ve Analist.



HAKKIMDA

Emre YÜZ

Multidisipliner Full-Stack Web Geliştirici/Tasarımcı, Veri Mimarı ve Analist.

Son Yazılar

insta ❤️ feed

  • @yuzemre
  • @yuzemre
  • @yuzemre
  • @yuzemre
  • @yuzemre
  • @yuzemre

Reklam