Როგორ დაამატოთ Google რუკა თქვენს ვებ გვერდზე

01 წლის 05

მიიღეთ Google Maps API Key შენი საიტისთვის

Google Developer Console- ის Cloud ხედი. J Kyrnin- ის მიერ გადაღებული ეკრანი

Google Maps- ის ვებ-გვერდის შესაქმნელად საუკეთესო გზაა Google Maps API- ის გამოყენება. და Google გირჩევთ, რომ მიიღოთ API გასაღები, რათა გამოიყენოთ რუკები.

თქვენ არ ხართ საჭირო API API- ის მისაღებად Google Maps API v3, მაგრამ ეს ძალიან სასარგებლოა, რადგან ის საშუალებას გაძლევთ მონიტორინგი გამოიყენოთ და გადაიხადოთ დამატებითი წვდომა. Google Maps API v3- ს გააჩნია 1 მოთხოვნის თითო წამში კვოტი ერთ დღეში, მაქსიმუმ 25,000 მოთხოვნით. იმ შემთხვევაში, თუ თქვენი გვერდები აღემატებოდათ ამ ლიმიტებს, საჭიროა უფრო მეტი ბილინგის მიღება.

როგორ მივიღოთ Google Maps API Key

  1. შედით Google- ში თქვენი Google ანგარიშის გამოყენებით.
  2. დეველოპერების კონსოლში გადასვლა
  3. გადაახვიეთ სიაში და იპოვეთ Google Maps API v3, შემდეგ დააჭირეთ "OFF" ღილაკს, რომ ჩართოთ იგი.
  4. წაიკითხე და ეთანხმებით პირობებს.
  5. API- ის კონსოლზე გადასვლა და აირჩიეთ "API Access" მარცხენა მენიუდან
  6. "მარტივი API Access" განყოფილებაში დააწკაპუნეთ ღილაკზე "შექმნა ახალი სერვერი ღილაკი ..." ღილაკზე.
  7. შეიყვანეთ თქვენი ვებ სერვერის IP მისამართი. ეს არის IP, სადაც თქვენი რუკები მოითხოვს. თუ არ იციან თქვენი IP მისამართი, შეგიძლიათ გამოიყურებოდეს.
  8. ტექსტის კოპირება "API გასაღები:" ხაზის (არ შედის სათაურის ჩათვლით). ეს არის თქვენი API გასაღები თქვენი რუკებისთვის.

02 05

კონვერტაციის შენი მისამართი კოორდინატები

გამოიყენეთ მითითებული ციფრები განედისა და გრძედისათვის. J Kyrnin- ის მიერ გადაღებული ეკრანი

ვებ-გვერდებზე Google Maps- ის გამოყენების მიზნით, საჭიროა ადგილმდებარეობის და გრძედის განლაგება. თქვენ შეგიძლიათ მიიღოთ ეს GPS ან შეგიძლიათ გამოიყენოთ ონლაინ ინსტრუმენტი, როგორიცაა Geocoder.us გეტყვით.

  1. გადადით Geocoder.us- ზე და შეიყვანეთ თქვენი მისამართი საძიებო ველში.
  2. დააკოპირეთ პირველი რიცხვი გრძედის (წერილების გარეშე) და ჩასვით ტექსტურ ფაილში. თქვენ არ გჭირდებათ ხარისხი (º) ინდიკატორი.
  3. კოპირება პირველ ნომერს განტოლებისთვის (კვლავ წერილობითი გარეშე) და ჩასვით თქვენს ტექსტურ ფაილში.

შენი გრძედი და გრძედი გამოიყურება მსგავსი რამ:

40.756076
-73.990838

Geocoder.us მხოლოდ მუშაობს აშშ-ს მისამართებზე, თუ კოორდინატების მიღება სხვა ქვეყანაში, თქვენ უნდა მოძებნოთ მსგავსი ინსტრუმენტი თქვენს რეგიონში.

05 of 03

დამატება რუკაზე თქვენს ვებ გვერდზე

გუგლის რუკა. Screen shot by J Kyrnin - რუკა სურათი თავაზიანობის Google

პირველი, დამატება რუკა Script

შენი დოკუმენტი

გახსენით თქვენი ვებ გვერდი და დაამატეთ თქვენი დოკუმენტის HEAD.

შეცვალეთ ხაზგარეშე და გრძედის ციფრები, რომლებიც დაწერეთ ნაბიჯი ორში.

მეორე, დაამატეთ რუკა ელემენტს თქვენს გვერდზე

მას შემდეგ, რაც თქვენ გაქვთ ყველა სკრიპტი ელემენტის დამატება დამატებულია HEAD თქვენი დოკუმენტი, თქვენ უნდა განათავსოთ თქვენი რუკა გვერდზე. თქვენ ამას აკეთებთ DIV ელემენტის დამატებად id = "map-canvas" ატრიბუტით. მე გირჩევთ ასევე სტილის ეს დუიმი სიგანე და სიმაღლე, რომელიც შეესაბამება თქვენს გვერდს:

საბოლოოდ, ატვირთვა და ტესტირება

უკანასკნელი გასაკეთებელი არის თქვენი გვერდის ატვირთვა და გამოცდა, რომ თქვენი რუკა აჩვენებს. აქ არის მაგალითი Google რუკაზე გვერდზე. შენიშვნა, იმის გამო, რომ cs.com- ის სამუშაოები მუშაობს, თქვენ უნდა დააჭიროთ ბმულს, რომ მიიღოთ რუკა. ეს არ იქნება საქმე თქვენს გვერდზე.

თუ თქვენი რუკა არ გამოჩნდება, სცადეთ ინიცირება BODY ატრიბუტით:

onload = "ინიციალიზაცია ()" >

სხვა რამ, რათა შეამოწმოს, თუ თქვენი რუკა არ იტვირთება მოიცავს:

04 of 05

დაამატე მარკერი თქვენს რუკაზე

Google Map მარკერით. Screen shot by J Kyrnin - რუკა სურათი თავაზიანობის Google

მაგრამ რა კარგია თქვენი ადგილმდებარეობის რუკა, თუ არ არის მარკერი ხალხისთვის, სადაც უნდა წავიდნენ?

სტანდარტული Google Maps- ის წითელი მარკერის დასამატებლად დამატება ქვემოთ მოყვანილი სკრიპტის დამატება: var map = ... line:

var myLatlng = ახალი google.maps.LatLng ( გრძედი, გრძედი );
var მარკერი = ახალი google.maps.Marker ({
პოზიცია: myLatlng,
რუკა:
სათაური: " ყოფილი kankertherapie.tk "
});

შეცვალეთ ხაზგარეშე ტექსტი თქვენი გრძედის და გრძედისა და სათაური გსურთ გამოჩნდეს, როდესაც ხალხი მარკერზე გადადის.

თქვენ შეგიძლიათ დაამატოთ როგორც ბევრი მარკერები გვერდზე, როგორც გსურთ, უბრალოდ დაამატოთ ახალი ცვლადები ახალი კოორდინატები და სათაურები, მაგრამ თუ რუკა ძალიან პატარა არიან ყველა მარკერები, ისინი არ აჩვენებს, თუ მკითხველს zooms გარეთ.

var latlng 2 = ახალი google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = ახალი google.maps.Marker ({
პოზიცია: latlng 2 ,
რუკა:
დასახელება: " Apple Computer "
});

აქ არის მაგალითი Google რუკა მარკერის. შენიშვნა, იმის გამო, თუ როგორ cMS მუშაობს, თქვენ უნდა დააჭიროთ ბმულს, რათა იხილოთ რუკა. ეს არ იქნება საქმე თქვენს გვერდზე.

05 05

დაამატე მეორე (ან მეტი) რუკა თქვენს გვერდზე

თუ მე შევხედე ჩემს მაგალითს Google Maps- ის გვერდს, შეამჩნევთ, რომ მე გვერდზე ერთზე მეტი რუკა მაქვს. ეს ძალიან ადვილია. აი როგორ.

  1. მიიღეთ ყველა რუკის გრძედი და განლაგება, რომლის ნახვაც გსურთ, როგორც ჩვენ ვისწავლეთ ამ ტერმინალში 2-ში.
  2. Insert პირველი რუკა როგორც ჩვენ ვისწავლეთ ნაბიჯი 3 ამ tutorial. თუ გნებავთ რუკა მარკერს, დაამატეთ მარკერი როგორც ნაბიჯი 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 ({პოზიცია: latlng2 , რუკა: map2 , დასახელება: " შენი მარკერის სათაური "});
  5. შემდეგ დაამატე მეორე

    სადაც გსურთ მეორე რუკა. და დარწმუნდით, რომ მისთვის id = "map_canvas_2" ID.

  6. როდესაც თქვენი გვერდი იტვირთება, ორი რუკები გამოჩნდება

აქ არის გვერდის კოდი მასზე ორი Google რუკებით: