Желе Page үчүн Google Map кошуу керек

01 05

Сиздин Сайттын үчүн Google Карталар API ачкычын алуу

Google Иштеп чыгуучулар булуту көрүнүшү. J Kyrnin тарабынан скриншот

Сиздердин сайтта үчүн Google картасын кошуу үчүн мыкты жолу Google Карталар API пайдалануу болуп саналат. Ал эми Google сиз карталарды колдонуу үчүн бир API ачкычын алууну сунуштайт.

Сиз Google Карталар API v3 пайдалануу API ачкычын алуу үчүн милдеттүү эмес, бирок ал сиз колдонууну көзөмөлдөөгө жана кошумча жетүү үчүн төлөп берет деп абдан пайдалуу. Google Карталар API v3 күнүнө 25000 суроо-ашпаган колдонуучу секундуна 1 суроо-талабы боюнча бир норма бар. Сиздин барактар ​​бул чектен ашса, анда көбүрөөк алуу үчүн, эсеп жазууга иштетүү үчүн керек болот.

бир Google Карталар API алуу үчүн кантип орнойт

  1. Сиздин Google каттоо эсеби менен Google менен кирүү.
  2. Иштеп чыгуучулар Мурунку
  3. чейин жылып болуп жана Google Карталар API v3 таап, анан аны буруш үчүн "OFF" баскычын чыкылдатуу.
  4. Окуу жана шарттарга макулмун.
  5. APIs аймакка барып, сол кол менюсунан "API мүмкүндүк алуу", тандоо
  6. "Simple API мүмкүндүк" бөлүмүндө, "жаңы Server ачкычын түзүү ..." баскычын чыкылдатуу.
  7. желе жүрүш менен IP дарегин киргизүү. Бул сиздин Карталар өтүнүчтөр келип турган IP болуп саналат. Сиздин IP дарегин билген эмес болсо, аны көрө алат.
  8. текстти көчүрүү "API ачкычы:" сызык (деп аталышы, анын ичинде жок). Бул сиздин карталарга үчүн API ачкычы болуп саналат.

02 05

Convert Сиздин дарекке Coordinates

Узунун жана туурасын үчүн көрсөтүлгөн номерлерди колдонуу. J Kyrnin тарабынан скриншот

Желе-беттердеги Google Карталарды колдонуу үчүн, жери үчүн Узунун жана туурасын болушу керек. Сиз GPS бул же сиз Geocoder.us, силерге чындыкты айтып коёюн сыяктуу онлайн куралын колдоно алышат.

  1. Geocoder.us барып, издөө кутучасына дарегин терүүгө.
  2. эркиндик үчүн биринчи номерин (алдында кат жок) көчүрүү жана текст делосуна салып кой. Сиз даражасы (º) көрсөткүчүн кереги жок.
  3. биринчи саны узундук (кайрадан алдында кат жок) көчүрүү жана текст делосуна салып кой.

Сиздин Узунун жана туурасын ушул сыяктуу бир нерсе болот:

40.756076
-73,990838

Geocoder.us башка өлкөдө координаттарын алуу үчүн керек болсо, бир гана АКШ даректер үчүн иштейт, сиздин аймакта ушундай эле каражат издөө керек.

03 05

Желе Баракка Карта кошуу

Google Карталар. J Kyrnin тарабынан скриншот - Карта сүрөтү сылыктык Google

Биринчиден, баш Карта Script кошуу

Сиздин документ

желе бетин ачуу жана документтин БАШЫНДА төмөнкүдөй толукталсын.

эки кадам менен жазып Узунун жана туурасын номерлерине баса бөлүгүн өзгөртүү.

Экинчиден, Сиздин Пейдж Карта элементти кошуу

Эгер документ БАШЫНДА кошулган бардык жазма элементтер бар болсо, сен беттеги картаны коюш керек. Сиз ID = "карта-чийилүүчү" сыпаты менен DIV элементин кошуп, бул. Сен да беттеги айкалышып, туурасы жана бийиктиги менен бөлүү стилдештирүүнү сунуштайбыз:

Акыр-аягы, Upload жана Test

эмне үчүн акыркы нерсе сиздин карта сенин бет жана тест жүктөп турат. Бул беттеги Google карта бир мисалы болуп саналат. Эскертүү, жол About.com CMS иштейт, анткени сен карта пайда алуу үчүн шилтемени чыкылдатып керек. Бул сиздин беттеги иши болбой калат.

Сиздин карта көрсөтүлөт бербесе, BODY сыпаты менен демилгеленүүдө аракет:

onload = "чыгаруу ()">

Сиздин карта жүктөө болсо, текшерип башка нерселер кирет:

04 05

Сиздин Карта үчүн Маркер кошуу

Google Map бла бирге. J Kyrnin тарабынан скриншот - Карта сүрөтү сылыктык Google

Алар барып, элге эч кандай бла эми бар болсо, сиздин жайгашкан карта эмне кереги бар?

стандарттык Google Карталар кызыл маркер VAR карта = ... чегинен төмөн сиздин ариби төмөнкү кошуу менен толукталсын:

VAR myLatlng = жаңы google.maps.LatLng (широта, долгота);
VAR маркер = жаңы google.maps.Marker ({
орду: myLatlng,
карта: карта,
аталышы: "Мурункулар About.com Башкы"
});

Сиздин Узунун жана туурасын үчүн белгиленген текст жана эл бла үстүнө курсорду пайда дедим аталышы өзгөртүү.

Сиз жөн гана жаңы координаттары жана наамдар менен жаңы өзгөрмөлөрдү кошуп, каалаганча бетине көп маркерлер кошууга болот, ал эми карта бардык белгилерин көрсөтүү үчүн өтө эле аз болсо, анда алар окурман чыгып zooms каралбаса көрсөтө албайт.

VAR latlng 2 = жаңы google.maps.LatLng (37.3316591, -122.0301778);
VAR myMarker 2 = жаңы google.maps.Marker ({
орду: latlng 2,
карта: карта,
аталышы: "Apple Computer"
});

Бул жерде бир бла менен Google карта бир мисалы болуп саналат. Эскертүү, About.com CMS иштейт жол, анткени, сиз карта пайда алуу үчүн шилтемени чыкылдатып керек. Бул сиздин беттеги иши болбой калат.

05 05

экинчи кошуу (же андан көп) Сиздин Баракка Карта

Сен менин мисалы Google карталарын бетине карап, анда мен баракта көрсөтүлгөн бирден ашык карта бар экенин көрө аласыз. Бул эмне үчүн абдан жеңил болуп саналат. Бул жерде кандай.

  1. Эгер биз бул үйрөтмө 2-кадам билгенибиздей көрсөтүүгө каалаган бардык карталардын Узунун жана туурасын алуу.
  2. Бул үйрөткүч 3-кадам үйрөнгөн биринчи картаны кыстаруу. Сиз карта белгисин ээ болгубуз келсе, кадам катары бла кошуу 4.
  3. Экинчи Картада үчүн, сиз алгач () жазма 3 жаңы саптарды кошуу керек:
    VAR latlng2 = жаңы google.maps.LatLng (экинчи координаты);
    VAR myOptions2 = {масштабды өзгөртүү: 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, аталышы: "Сенин Marker аты"});
  5. Анан экинчиси кошуу

    экинчи картасын каалаган. Ошондой эле ага бир ID = "map_canvas_2" ID бер.

  6. Сенин бет жүктер эки карт көрсөтүлөт

Бул жерде ал эки Google карталар менен бетине коду: