Веб-сайтыңызға Google Map қалай қосуға болады

01-ден 05-ге дейін

Сайт үшін Google Maps API кодын алыңыз

Веб-сайтыңызға Google картасын қосудың ең жақсы жолы - Google Maps API пайдалану. Google карталарды пайдалану үшін API кілтін алуды ұсынады.

Google Maps API v3 бағдарламасын пайдалану үшін API кодын алудың қажеті жоқ, бірақ бұл өте пайдалы, себебі ол сіздің пайдалануыңызды бақылауға және қосымша кіру ақысын төлеуге мүмкіндік береді. Google Maps API v3-ке пайдаланушыға секундына 1 сұраныс квотасы бар, ол тәулігіне 25 000 сұрауды құрайды. Егер сіздің беттеріңіз осы шектерден асып кетсе, сізге көбірек ақпарат алу үшін шот ұсыну мүмкіндігін қосу қажет.

Google Maps API кілтін алу жолы

1. Google есептік жазбаңыз арқылы Google жүйесіне кіру.
2. Әзірлеушілер консолына өтіңіз
3. Тізім бойынша жылжып, Google Maps API v3 нұсқасын тауып, оны қосу үшін «OFF» түймесін басыңыз.
4. Шарттарды оқып, келісіңіз.
5. API консоліне өтіп, сол жақ мәзірден «API Access» параметрін таңдаңыз
6. «Қарапайым API қатынасы» бөлімінде «Жаңа сервер кілті ...» түймешігін басыңыз.
7. Веб-серверіңіздің IP-мекен-жайын енгізіңіз. Бұл сіздің Карталар сұрауларыңыз келетін IP. IP-мекен-жайыңызды білмесеңіз, оны іздеуге болады.
8. Мәтінді «API пернесі» жолына көшіріңіз (осы атауды қоспағанда). Бұл сіздің карталарыңыз үшін API кілті.

05 02

Сіздің мекен-жайыңызды координаттарға түрлендіріңіз

Google карталарын веб-беттеріңізде пайдалану үшін, сіз орналасу үшін ендік пен бойлаққа ие болуыңыз керек. Оларды GPS арқылы алуға болады немесе сізге Geocoder.us сияқты онлайн құралды пайдалануға болады.

1. Geocoder.us өтіңіз және іздеу жолағында мекенжайыңызды теріңіз.
2. Кеңістіктің бірінші нөмірін (алдыңғы әріпсіз) көшіріп, оны мәтіндік файлға қойыңыз. Дәрежесі (º) индикаторы қажет емес.
3. Ұзындығы үшін бірінші нөмірді көшіріңіз (алдыңғы әріпсіз қайтадан) және оны мәтіндік файлға қойыңыз.

Сіздің ендік және бойлық келесідей көрінеді:

40.756076
-73.990838

Geocoder.us тек АҚШ-тың мекен-жайлары үшін жұмыс істейді, егер сіз басқа елде координат алу керек болса, өз аймағыңыздағы ұқсас құралды іздеңіз.

03 05

Веб-бетке карта қосу

Алдымен, Карта сценарийін

Сіздің құжатыңыз

Веб-бетті ашып, құжатыңызды HEAD-ге келесіге қосыңыз.

Екінші бөлікте жазылған ендік және бойлық нөмірлерге бөлінген бөлікті өзгертіңіз.

Екіншіден, өзіңіздің бетіңізге карта элементтерін қосыңыз

Құжатыңыздың БАСШЫЛЫҒЫНА қосылған барлық сценарий элементтері бар болғаннан кейін, сіз картаңызды бетке орналастырыңыз. Сіз id = «map-canvas» төлсипаты бар DIV элементін қосу арқылы жасайсыз. Мен сізге осы дивияны сіздің бетіңізге сәйкес келетін ені мен биіктігін стильдендіруді ұсынамын:

Ақырында, Жүктеу және тексеру

Ең соңғы нәрсе - сіздің бетті жүктеп, картаңыздың көрсетілетінін тексеріңіз. Міне, беттегі Google картасының мысалы. Ескерту, Cisco-ның қалай жұмыс істейтіндігіне байланысты, картаны көрсету үшін сілтемені нұқу керек болады. Бұл сіздің бетіңізде болмайды.

Картаңыз көрсетілмесе, оны BODY төлсипатымен инициализациялаңыз:

onload = «initialize ()» >

Картаңыз жүктелмегенін тексеру үшін келесі нәрселер бар:

• JavaScript-да, соның ішінде, сіздің әріптеріңізді іздеңіз. JavaScript - регистрді ескереді.
• Масштабтау және орталық параметрлері орнатылғанын тексеріңіз.
• DIV элементінің дұрыс идентификаторы бар парақта екенін тексеріңіз.
• DIV элементінің биіктігіне ие екеніне көз жеткізіңіз.

04 04

Картадан Маркерді қосыңыз

Бірақ адамдарға барып қайда бару керектігін айтатын маркер жоқ болса, орналасуыңыздың картасы қандай жақсы?

Стандартты Google Maps қызыл маркерін қосу үшін, var map = ... сызығының төмендегі сценарийіне төмендегіні қосыңыз:

var myLatlng = жаңа google.maps.LatLng ( ендік, бойлық );
var marker = жаңа google.maps.Marker ({
position: myLatlng,
карта: карта,
title: « Бұрынғы »
});

Бөлектелген мәтінді ендік пен ұзындыққа және адамдар маркер үстіне меңзеген кезде пайда болған тақырыпты өзгертіңіз.

Сізге қалауыңызша қанша маркер қосуға болады, тек жаңа координаттар мен тақырыптармен жаңа айнымалы мәндерді қосыңыз, бірақ егер карта барлық маркерлерді көрсету үшін тым кішкентай болса, олар оқырман зумақты болмайынша көрсетілмейді.

var latlng 2 = жаңа google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = жаңа google.maps.Marker ({
лауазымы: 2 ,
карта: карта,
title: « Apple Computer »
});

Міне, маркер бар Google картасының мысалы. Ескерту, Cisco-ның қалай жұмыс істейтіндігіне байланысты, картаны көрсету үшін сілтемені басу керек. Бұл сіздің бетіңізде болмайды.

05 05

Сіздің бетіңізге екінші (немесе көбірек) картаны қосыңыз

Егер менің мысалымды Google карталарының бетіне қарасаңыз, сізде бірден бірнеше карта бар екендігін байқайсыз. Бұл өте оңай. Мұнда қалай.

1. Осы оқулықтың 2-ші қадамынан үйренгендей көрсетілетін барлық карталардың ені мен бойлығын ал.
2. Осы оқулықтың 3-ші қадамынан үйренгеніміздей алғашқы картаны салыңыз. Картаның маркер болуы қажет болса, 4-қадамдағыдай маркерді қосыңыз.
3. Екінші картаға инициализация () сценарийіне 3 жаңа жол қосу қажет:
   var latlng2 = жаңа google.maps.LatLng ( екінші координаты );
   var myOptions2 = {zoom: 18, орталық: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = жаңа google.maps.Map (document.getElementById («map_canvas_2»), myOptions2);
4. Егер сіз жаңа картадағы маркерді қаласаңыз, екінші координаттарға және екінші картаға көрсететін екінші маркерді қосыңыз:
   var myMarker2 = жаңа google.maps.Marker ({position: latlng2 , map: map2 , title: « Marker Title »}));
5. Содан кейін екінші қосыңыз

   онда екінші картаны қаласаңыз. Оған id = «map_canvas_2» идентификаторын беріңіз.

6. Бетті жүктеген кезде екі карта көрсетіледі

Мұнда екі Google картасы бар беттің коды: