Veb səhifəinizə bir Google Xəritəini necə əlavə etmək olar?

01 ilə 05

Saytınız üçün bir Google Maps API Key alın

Veb sayta Google xəritəsini əlavə etmək üçün ən yaxşı yol Google Maps API istifadə etməkdir. Və Google, xəritələrdən istifadə etmək üçün bir API açarı almaq tövsiyə edir.

Google Maps API v3-dən istifadə etmək üçün API açarı almaq tələb olunmur, amma bu, sizin istifadəinizi izləmək və əlavə çıxış üçün ödəmə imkanınız olduğu üçün çox faydalıdır. Google Maps API v3-də hər istifadəçi üçün saniyədə bir sorğu miqdarı gündə maksimum 25,000 müraciət tələb edir. Sayfalarınız bu sınırları aşarsa daha çox məlumat almaq üçün faturalandırmayı etkinleştirmeniz lazımdır.

Google Maps API Anahtarı necə alınır?

1. Google hesabınızı istifadə edərək, Google-a daxil olun.
2. Yaradıcı Konsoluna gedin
3. Siyahıdan keçin və Google Maps API v3'ünü tapın, sonra onu açmaq üçün "OFF" düyməsini basın.
4. Şərtləri oxuyun və qəbul edin.
5. API konsoluna gedin və sol menyudan "API Erişimi" ni seçin
6. "Sadə API Erişimi" bölməsində, "Yeni Server açarı ..." düyməsini basın.
7. Veb serverinizin IP ünvanını daxil edin. Bu, xəritə sorğularınızın gələn olacağı IP-dir. IP ünvanınızı bilmirsinizsə, onu görə bilərsiniz.
8. Mətn "API açarı:" xəttinə (bu başlığı daxil etməyən) kopyalayın. Sizin xəritələriniz üçün API açarınız.

02/05

Ünvanınızı Koordinatlara Dönüştür

Veb səhifələrinizdə Google Maps-dən istifadə etmək üçün yer üçün enlem və boylam olmalıdır. Bunları GPS-dən əldə edə bilərsiniz və ya sizə bildirmək üçün Geocoder.us kimi onlayn bir vasitə istifadə edə bilərsiniz.

1. Geocoder.us saytına gedin və axtarış qutusuna ünvanınızı yazın.
2. Enlem üçün ilk sayını (ön məktub olmadan) kopyalayıb mətn faylına yapışdırın. Dərəcə (º) göstəricisinə ehtiyac yoxdur.
3. Uzunluğun ilk nömrəsini (əvvəldən bir məktub olmadan) kopyalayın və mətn dosyanıza yapışdırın.

Enlem və boylam bu kimi bir şeyə baxacaq:

40.756076
-73.990838

Geocoder.us yalnız ABŞ ünvanları üçün işləyir, başqa bir ölkədə koordinatları almaq lazımdırsa, bölgənizdə oxşar bir vasitə axtarmaq lazımdır.

03-də 05

Veb səhifəyə Xəritə əlavə edin

Birincisi, Xəritə Skriptini əlavə edin

Sənədin

Veb səhifənizi açın və sənədinizi HEAD-a aşağıdakıları əlavə edin.

Vurgulanmış hissəni iki addımda yazdığınız enlem ve boylam sayılarına dəyişdirin.

İkincisi, Xəritə Elementini Sizin Sayfanıza əlavə edin

Sənədinizin başlığına əlavə edilən bütün skript elementləri olduğunuzda, xəritənizi səhifəyə yerləşdirməlisiniz. Id = "map-canvas" özniteliğine malik bir DIV elementi əlavə edərək bunu edərsiniz. Mən də bu divu səhifənizə uyğun olan eni və boyu ilə də tərtib etməyi məsləhət görürəm:

Nəhayət, Upload və Test edin

Ediləcək son şey səhifənizi yüklədir və xəritəinizin göründüyünü sınayın. Burada bir Google xəritəsi xəritəsi nümunəsidir. Qeyd: CMS-in işlədiyi yoldan ötəri, xəritənin görünməsi üçün bir linki vurmaq lazımdır. Bu, səhifənizdə olmayacaq.

Xəritə görünmürsə, BODY özniteliğiyle başlatmayı cəhd edin:

onload = "initialize ()" >

Xəritə yüklənməməsi yoxluğunu yoxlamaq üçün başqa şeylər bunlardır:

• Vəziyyəti də daxil olmaqla, JavaScript-də yazı tiplərini axtarın. JavaScript həssasdır.
• Zəngin və mərkəzi seçimlərinizə əmin olun.
• DIV elementinizin düzgün ID ilə olan səhifədə olduğundan əmin olun.
• DIV elementinizin yüksəkliyinə əmin olun.

04 04

Xəritəçəniyə Marker əlavə edin

Bilmirəm ki, heç bir marker insanlara getməli olduqlarını izah etməsə, yerinizin xəritəsi nə yaxşıdır?

Standart bir Google Maps qırmızı marker əlavə etmək üçün var map = ... satırının altına skriptinizə aşağıdakıları əlavə edin:

var myLatlng = yeni google.maps.LatLng ( enlem, boylam );
var marker = yeni google.maps.Marker ({
mövqe: myLatlng,
xəritə: xəritə,
title: " Köhnə "
});

Vurgulanan mətni genişlik və boylamınıza və markerin üzərinə vurduqda göründüyü başlığı dəyişdirin.

Istədiyiniz kimi səhifəyə bir çox marker əlavə edə bilərsiniz, yalnız yeni koordinatları və adları olan yeni dəyişənləri əlavə edin, lakin xəritə bütün markerləri göstərmək üçün çox kiçik olduqda, oxucunun zoomsa gəlmədiyi halda göstərilməyəcək.

var latlng 2 = yeni google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = yeni google.maps.Marker ({
position: latlng 2 ,
xəritə: xəritə,
adı: " Apple Computer "
});

İşarəsi olan bir Google xəritəsinin nümunəsi. Qeyd: CTS-in işlədiyi üsuldan ötəri, xəritənin görünməsi üçün bir linki vurmalısınız. Bu, səhifənizdə olmayacaq.

05 05

Səhifənizə İkinci (və ya daha çox) Xəritə əlavə edin

Mənim nümunəmə Google xəritələr səhifəsinə baxdığınız təqdirdə səhifədə birdən çox xəritə göstərdiyini görəcəksiniz. Bunu etmək çox asandır. İşdə necə.

1. Bu təlimatın 2-ci addımında öyrənildiyimiz kimi göstərmək istədiyiniz bütün xəritələrin genişliyi və boylamını əldə edin.
2. Bu təlimatın 3-cü addımında öyrəndiyimiz kimi ilk xəritə daxil edin. Xəritəin bir marker olmasını istəyirsinizsə, 4. addımdakı markanı əlavə edin.
3. İkinci xəritə üçün, initialize () skriptinizə 3 yeni xətt əlavə etmək lazımdır:
   var latlng2 = yeni google.maps.LatLng ( ikinci koordinat );
   var myOptions2 = {zoom: 18, mərkəz: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = yeni google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Yeni xəritədə bir marker istəyirsinizsə, ikinci koordinatları və ikinci xəritəsi göstərən ikinci bir marker əlavə edin:
   var myMarker2 = yeni google.maps.Marker ({mövqe: latlng2 , xəritə: map2 , title: " Marker Title "});
5. Sonra ikinci əlavə edin

   ikinci xəritə istədiyiniz yerdə. Və bir id = "map_canvas_2" ID verin.

6. Sayfanız yüklendiğinde, iki xəritə göstərilir

Burada iki Google xəritəsi olan bir səhifənin kodudur: