Api kartlegger Yandex hvordan du setter inn på siden. Hvordan legge til en organisasjon til Yandex Maps på riktig måte? Plugins for WordPress og andre CMS

Hvis du bygger et nettsted for et selskap eller en tjeneste, kan du ikke unngå å legge til et kart på nettstedet med plasseringen til selskapet eller tjenesten.

Det er minst tre leverandører som tilbyr denne muligheten: Yandex, Google og 2GIS.

Her skal vi se på å legge til et Yandex-kart, og dette er kanskje den enkleste, raskeste og dessuten en helt gratis måte. Det skal bemerkes at denne tjenesten fungerer gjennom API og krever at brukeren av nettstedet har javascript aktivert.

Samtidig passer denne instruksjonen ikke bare for WordPress, men for ethvert nettsted (i det minste for "bar" html), siden innebyggingskoden er universell.

Legge til et Yandex-kart til nettstedet

1. Du må først lage et kart. For å gjøre dette, følg lenken til konstruktørsiden - https://tech.yandex.ru/maps/tools/constructor/ . For å jobbe i konstruktøren må du ha en konto i Yandex. Yandex-kontoen er den samme for alle tjenester: post, webmaster, penger, etc. Hvis du ikke allerede har en, må du registrere deg.

2. Vi angir i søkefeltet (uthevet i rødt i figuren) adressen du trenger (region, by, gate, hus). Vi får et kart med merke og koordinater til adressen du trenger.

3. Om nødvendig kan du gjøre ytterligere innstillinger: endre farge og plassering av markøren, skala, visningstype (kart, satellitt, hybrid), etc.

4. Angi deretter navnet og klikk på "Lagre og hent koden"-knappen nederst på skjermen.

5. Etter det vil en kode dukke opp som du må lime inn på siden din på stedet der kartet skal vises.

Hvis du legger til kode på en side i WordPress-administrasjonspanelet, bytt først sideredigeringsmodusen til "Tekst".

Etter å ha lagt til koden, vil kartet du bygde begynne å bli reflektert på nettstedet automatisk.

Skjermstørrelsen bestemmes av bredde- og høydeparametrene. Om nødvendig kan du endre disse verdiene i den resulterende koden. For å strekke Yandex-kartet til hele skjermens bredde, spesifiser verdien width=-1.

(bra), i dag skal vi igjen snakke om tjenesten fra Yandex og igjen om kort, men ikke om plast eller spillkort, men om kart over området. La oss vurdere en kartdesigner fra Yandex som du for eksempel kan lage et kart med veibeskrivelser til kontoret med og henge det på nettstedet. Artikkelen gir detaljerte instruksjoner for å sette opp Yandex Maps-tjenesten for kontaktsiden til et personlig nettsted.

Evnen til å hjelpe kundene med å komme til rett sted er et betydelig bidrag til forretningsutviklingen, jo flere folk kommer dit de skal, jo høyere blir inntekten og overskuddet. Så hvis virksomheten din på en eller annen måte er knyttet til objekter på bakken, er det et must å sette inn et godt kart på nettstedet.

Hvorfor du trenger et interaktivt kart

1. Praktisk for klienten - det er enkelt å planlegge en rute som tar hensyn til alle gjeldende endringer, siden Yandex umiddelbart legger inn data om reparasjoner og nye bygninger på kartene sine.
2. Det er praktisk for eieren av nettstedet - alle justeringer gjøres på kartet automatisk, det er nok å sette inn kartet på nettstedet en gang, deretter lastes oppdateringene fra Yandex-databasen selv.
3. Øker troverdigheten og tilliten til organisasjonen. Selv om ethvert karikaturmontert kontor kan lage en slik lotion, på et underbevisst nivå, oppfattes et nettsted med et interaktivt kart bedre.

I gamle dager, kontoradresser, passasje- og reiseveier, forskjellige interessante gjenstander, etc. markert på bilder som viser et kart og lastet opp til nettstedet i en vanlig jpg- eller png-fil. Problemet var at de ikke kunne ta hensyn til midlertidige reparasjoner, trafikkork eller andre endringer i terrenget, de kunne ikke foreslå enkeltruter fra ulike retninger.

Med utviklingen av Internett-tjenester, som Yandex Maps og Google Maps, ble det mulig å gjøre kart levende – interaktive. Du kan rotere dem i forskjellige retninger, endre skala, angi ruter fra forskjellige punkter, planlegge bevegelsen din med hensyn til trafikkork og mye mer.

Tilstedeværelsen av et praktisk stedskart på kontaktsiden i vår tid er en god formregel for ethvert selskap.

Og for å hjelpe deg med å gjøre nettressursen din mer vennlig for folk, vil jeg fortelle deg hvordan du legger til et Yandex-kart på nettstedet, dette gjøres veldig enkelt ved å bruke en spesiell konstruktør (ikke vanskeligere enn).

Yandex kartkonstruktør

Hvis du ikke har en konto i Yandex, må du opprette en, siden uten dette vil det ikke fungere å bygge noe, tjenesten vil be deg om å logge på eller registrere deg. Det er ingen grunn til å være redd, registrering er opprettelsen av en postkasse på Yandex. Selv om du ikke trenger det for å fungere med e-post, vil det være nyttig for andre søkemotortjenester, for eksempel for Yandex Metrika eller Yandex Webmaster.

Prosedyren starter fra denne siden - tech.yandex.ru/maps/tools/constructor/

Siden du leser denne artikkelen, betyr det at du logger inn for første gang og at du ikke har tidligere lagrede kort, gjenstår det å velge den venstre gule knappen "Opprett nytt kort". Fra dette øyeblikket begynner dannelsen av individuelle kartinnstillinger for ønsket område.

Trikset er at du ikke bare kan sette inn et Yandex-kart med den nøyaktige adressen, men et kart med et hvilket som helst antall objekter uthevet med forskjellige markører og farger - objekter, punkter, ruter.

Alle innstillinger gjøres i den visuelle konstruktøren, du trenger ikke å redigere noen koder, arbeidet med tilpasning skiller seg lite fra den vanlige bruken av Yandex-kart av brukeren. La oss starte med å legge til objekter.

Legge til objekter

Det første verktøyet er søkeskjemaet, som ligger øverst på kartet. Med dens hjelp kan vi finne ønsket punkt etter adresse, koordinater eller navn. Skriv inn forespørselsdataene i feltet, et eksempel med adressen "Moskva, Røde Plass":

Etter å ha trykket på finn-knappen vil et punkt som tilsvarer plasseringen til det angitte objektet vises på terrenget. Du kan sette inn mange objekter. Kreml eksempel:

Hvert punkt kan konfigureres slik at det skiller seg fra andre objekter og er lett å skille på kartet - fargen og formen endres, og du kan også legge til et unikt ikon inni ved å klikke på rullegardinmenyen "Innhold". Dette er praktisk hvis det er mange objekter på det opprettede kartet, og de kan klassifiseres i forskjellige grupper.

Til venstre er en liste over alle adresser merket på kartet fylt ut.

Endring av skala og posisjon

Ved å bruke "+" og "-" -tastene øverst til venstre i oppsettet, settes den optimale skalaen. Et fullstendig kart over Russland er ikke nødvendig for å flytte rundt i sentrum av Moskva, og hvis du spesifiserer et punktobjekt i en by, er det bedre å justere skalaen på et nivå der navnene på gatene og de omkringliggende husene kan skilles.

For å flytte kartet i forskjellige retninger, må du ta det ved å trykke på venstre museknapp og flytte det dit du vil.

Objektkonturer (polygoner) og linjer

Hvis det er nødvendig å markere konturene til et element på kartene, når det ikke er nok å peke, bruk "Polygoner"-verktøyet. Ved å sette det ene punktet etter det andre får vi omkretsen fylt innvendig med en bestemt farge.

Det kan være så mange punkter du vil, derfor tillater figuren som er malt over på kartet en hvilken som helst grad av kompleksitet. Du kan fullføre konstruksjonen av konturen ved å klikke på det siste settpunktet eller ved å bytte til en hvilken som helst annen knapp på konstruktøren (for eksempel på en linje). Jeg fremhevet konturene av Kreml i Moskva langs veggen:

Linjer tegnes ved å bruke "Linjer"-knappen. Alle handlinger ligner på det forrige verktøyet, bare mellomrommet mellom punktene er ikke malt over. Ved hjelp av linjer på Yandex-kartet kan du tegne bevegelsesruter (passasje, passasje).

På denne måten kan du vise den beste ruten for sightseeing.

Vi bekrefter endepunktet ved å klikke på det igjen med musen, det vil være en meny "Slett" / "Fullfør". Etter å ha valgt slutten, åpnes et felt for teksting av sluttpunktet og innstilling av linjeparametre (tykkelse, farge, gjennomsiktighet).

Vi fullfører ruten ved å klikke på "Ferdig".

Kartvisning og trafikkoverlegg

Den siste berøringen som lar deg gi kartet spesielle egenskaper er pålegging av trafikkork, som det er en egen knapp for. For å være ærlig tviler jeg på at et slikt alternativ ofte vil være etterspurt for kart satt inn på siden, siden folk bruker navigatorer oftere enn innebygde kart for å kjøre bil.

Men å bytte modus mellom krets, satellitt og hybrid kan komme godt med.

Satellittvisningen gir de omkringliggende objektene deres virkelige utseende, og det er lettere å gjenkjenne dem på et slikt kart enn de skjematiske rektanglene i diagrammet.

Tittel og beskrivelse

For at vi skal gå tilbake til det opprettede kartet i fremtiden for å korrigere det eller motta embed-koden igjen, må vi komme opp med et navn og en beskrivelse for det, og deretter lagre det.

Kartkode som skal bygges inn på nettstedet

Kartet vårt er allerede klart, og nå må vi få koden for innsetting på nettstedet, Yandex gjør det mulig å gjøre:

• et interaktivt kart (som jeg snakket om helt fra begynnelsen);
• statisk - et vanlig bilde, bare med en vanskelig kode, ingenting kan flyttes i det, i tillegg er det maksimale antallet objekter begrenset;
• trykt - høykvalitets bildefil, ikke alle land støttes, hovedsakelig CIS og Tyrkia, satellitt- og hybridversjoner støttes ikke.

Valget mellom dem vil vises umiddelbart etter lagring.

I samme meny settes den endelige størrelsen i piksler. Du kan stille inn det manuelt eller ved å flytte rammen rundt det valgte området til høyre ved hjørnene. Avmerkingsboksen "Strekk til bredden" gjør at kartet opptar hele plassen på stedet, og hviler på kantene av blokken der det vises.

På dette stadiet er det mulig å gå tilbake til å redigere kartet, i øvre venstre del av vinduet er det en tilsvarende inskripsjon med en pil.

Den endelige koden vises etter å ha klikket på "Få kortkode"-knappen, min ser slik ut:

Når du velger et trykt kort, vil et valg av filformat legges til - png eller jpg, og følgelig vil det ikke være noen kode - nedlastingsknappen vises i stedet. En slik fil kan også settes inn på nettstedet, bare du trenger å laste den opp til hostingen, og hvis nettstedet ditt ikke har en visuell editor, må du skrive ut bildet i HTML-tagger (src)

Slik setter du inn et Yandex-kart på nettstedet

Vi mottok koden, nå må vi overføre den til nettressursen vår. Ethvert sted er egnet for plassering, det viktigste er at dimensjonene passer. Hvis du bruker designere eller visuelle redaktører, så ikke glem å bytte dem til tekst (HTML)-modus når du setter inn kode. Som dette:

Kartet jeg har laget

Her er hva jeg fikk etter alle innstillingene:

Dette elementet er praktisk for alle - og de nødvendige objektene er uthevet og skalaen velges som forventet. I tillegg lar Yandex-tjenesten brukeren bestemme sin plassering (pilen i øvre venstre hjørne) og bygge en individuell rute til ønsket punkt.

Knappen i øvre høyre hjørne i form av to piler som divergerer i forskjellige retninger lar deg åpne kartet i fullskjerm. Nå om plugins.

Plugins for WordPress og andre CMS

Tidligere var det vanskeligere å lage kart og mange brukte spesielle plugins til dette formålet, for eksempel for WordPress var det denne - Yandex Maps for WordPress. Nå trengs ingen APIer, og enhver bruker med minimal kunnskap vil finne ut hvordan de skal sette opp alt, så jeg ser ikke poenget med plugins. Plugin-modulen nevnt ovenfor bekrefter dette - den har ikke blitt oppdatert på mer enn 2 år, tilsynelatende er det ingen etterspørsel.

Av de relativt relevante fant jeg Yandex Maps API (oppdatert for 4 måneder siden) og Oi Yandex.Maps for WordPress (5 måneder siden). Hvis du har et ønske om å spille plugins, finner du dem i WordPress repository ved å søke, og hvordan installere plugins.

Du sørget selv for at det er mye raskere å lage et kart og plassere det på ressursen din enn å lese denne instruksjonen, nå vil hver av ressursene dine glede sine besøkende med en så praktisk funksjon.

Plasseringskart på nettsiden med adressen til organisasjonen er en veldig brukervennlig guide. Enig, det er veldig praktisk å gå til nettstedet og se plasseringen til selskapet uten å åpne flere faner for å søke etter adressen på kartet. Dette er et ekstra lite pluss i skattkammeret av lojalitet fra klientens side i forhold til organisasjonen.

Vanligvis plasseres et kart på kontaktsiden under de angitte kontaktopplysningene. Den settes inn ved hjelp av en spesiell programkode (script). Den enkleste måten å få et slikt manus på er ved hjelp av ferdige API-løsninger fra Google eller Yandex. For å sette inn et kart på siden, er det ikke behov for kunnskap om programmering, ved å følge instruksjonene nedenfor får du et visuelt og praktisk kart.

Sette inn et kart ved hjelp av Yandex Maps

1. For øyeblikket (begynnelsen av 2013) er Yandex kartdesigner tilgjengelig i versjon 2.0, noe som er veldig praktisk og logisk forståelig. Du trenger ikke engang å være en autorisert bruker for å opprette et kort. Det første trinnet er å lage selve kartet med adressen. For å gjøre dette, følg lenken http://api.yandex.ru/maps/tools/constructor/ og skriv inn adressen til selskapet i det nedre inndatafeltet. Etter å ha trykket på "finn"-knappen, vil systemet vise varianter av de funnet adressene.

2. Vi setter en prikk på ønsket adresse og angir navnet på organisasjonen i beskrivelsesfeltet. Det er bedre å velge fargen på prikken basert på stilen til nettstedet som kartet skal ligge på. Konstruktøren lar deg også markere andre landemerker på kartet, for eksempel store kjente objekter, strekke kartet til ønsket størrelse, tegne en rute fra et busstopp ved hjelp av linjetegningsverktøyet, redigere målestokken.

3. Gå deretter til fanen Vis. Her kan du velge om kartet ditt skal være statisk eller interaktivt. Det er bedre å velge det andre alternativet, slik at brukeren vil kunne se nærområdet og navigere.

4. Fanen "Bygg inn kode" tilbyr å lese brukeravtalen. Etter å ha bekreftet det, vil du motta en innebygd kode. Du kan redigere den litt, for eksempel fjerne lenken til Yandex, tilpasse den mer nøyaktig, men det er bedre å ikke gjøre vesentlige endringer.

5. Kopier denne koden og lim den inn på kontaktsiden gjennom HTML-editoren etter teksten.

6. Vi lagrer endringene og sjekker resultatet på siden.

Sette inn et kart ved hjelp av Google Maps

1. Algoritmen for handlinger ligner den som er beskrevet ovenfor. Følg linken http://maps.google.ru/maps og skriv inn adressen til organisasjonen i søkefeltet. Du kan også se hvordan det ser ut fra en satellitt. Deretter, for å få koden, klikk på lenkeskiltet til venstre. Du kan kopiere den eksisterende koden, eller du kan klikke på koblingen "konfigurer og forhåndsvis det innebygde kartet".

2. Når redigering er valgt, åpnes et ekstra vindu der du kan justere størrelsen.

3. Kopier den mottatte koden og lim den inn gjennom html-editoren på siden. Det vil se nøyaktig det samme ut som forhåndsvisningen. I motsetning til Yandex-kart er Google maps alltid bare interaktive, det er færre muligheter til å redigere selve kartet, men du kan se på terrenget fra satellitten, relieffet med navn på objekter og 3D-kartet.

Hei, jeg vil starte denne artikkelen med et lite notat.

De som er glad i å ikke bare utvikle, men også promotere nettsteder, vet at kravene til nettsteder øker hvert år, søkemotorer prøver å luke ut søppelsider og etterlate de mest relevante. Så når jeg så gjennom de siste konferansene om markedsføring av kommersielle nettsteder, la jeg merke til ett faktum som er likt i alle tilfeller - dette er utformingen av kontaktsiden. De dagene da denne siden bare inneholdt noen få telefonnumre og et tilbakemeldingsskjema er forbi. Nå må du oppgi kontaktinformasjon så informativ som mulig. I dette tilfellet kan du rett og slett ikke klare deg uten et dynamisk kart over plasseringen av kontoret ditt. Det har blitt en integrert del av enhver kommersiell nettsidekontaktside.

Yandex ga utvikleren sin egen løsning i denne retningen - nemlig "Yandex Map Constructor", som lar webmastere enkelt legge til et hvilket som helst kart på nettstedet deres.

Så la oss nå gå direkte til handlingene.

1.) Gå først til selve kartkonstruktøren - http://api.yandex.ru/maps/tools/constructor/.

Du vil se et kart og et felt hvor du kan skrive inn adressen du trenger.

Du kan lage et stedskart, selv uten autorisasjon i Yandex.

2.) Skriv inn adressen du trenger, hvoretter du vil se et hint med det fulle navnet på gaten, byen og husnummeret.

3.) Etter å ha valgt adressen, kan du spesifisere en beskrivelse for taggen, samt velge fargen. Etter innstillingene klikker du på "Ok"-knappen. Og vi går nedover siden.

5.) Kopier den oppgitte koden og lim den inn på riktig sted på siden.

Noen få notater

- Denne metoden for å sette inn et Yandex-kart på et nettsted er egnet for alle CMS: Joomla, Opencart, WordPress og andre.

- ofte kutter en visuell editor, for eksempel i joomla, koden. Så det er ønskelig å jobbe med kontaktsiden uten redaktør. Eller sett inn et kart på nettstedet etter alle visuelle redigeringer.

Kopier koden til det opprettede kortet til en tekstfil, og når du redigerer kontaktsiden, hvis koden er forvrengt, kan du alltid gjenopprette den.

Det var alt for i dag, i de følgende artiklene vil jeg fortsette å legge ut jukseark om teknisk arbeid med nettsteder.

I denne artikkelen vil vi vurdere installere Yandex-kart uten bruk av en plugin, så den passer både for et vanlig nettsted og et nettsted opprettet på WordPress-motoren. Les om hvordan du legger til Google maps.

Yandex-kart (Yandex-kart) er et flott verktøy som lar deg rapportere plasseringen til et kontor, lager eller butikk. Ved å plassere en slede på Yandex-nettstedet, med et detaljert stedskart, kan du være sikker på at klienten ikke går seg vill.

Hvis du er eier av en nettbutikk, kan du utstyre bestillingsskjemaet med et kart som lar deg angi posisjonen din til kunden, noe som vil spare ventetid betydelig. Og kureren vil være takknemlig.

Yandex-kart har metrokart og trafikkdata, som vil unngå en rekke ulemper og spare tid.

Hvis vi sammenligner Yandex og Google maps (legger til Google maps på nettstedet), vil min preferanse bli gitt til Yandex karttjeneste, da den gir flere muligheter for brukeren. For ikke å nevne det faktum at Yandex-kart har de beste detaljene, samt et folkekart, som er redigert av brukerne selv fra satellittbilder.

Kanskje vi avslutter med opptakten, som de sier: "Det er bedre å se en gang ...".

Installere (legge til) Yandex-kart på nettstedet ditt

Før som installer Yandex-kartet på nettstedet ditt, må den opprettes. Du kan gjøre dette i kartkonstruktøren:

Endre størrelsen på kartet ved å dra etiketter. Det lar deg visuelt bestemme hvordan kartet som er installert på nettstedet vil se ut. For å hjelpe layoutdesignere vises høyden og bredden i piksler under kartet.

Kopier koden:

Denne kartkoden er enkel å sette inn i en WordPress-widget med vilkårlig tekst eller html-kode:

Høydepunktene er høyden og bredden, slik at de kan endres uten å måtte gå tilbake til kartdesignersiden igjen.

Du kan også lime inn kartkoden i et WordPress-innlegg eller en side. Det eneste poenget er at du må sette den inn i html-editoren, og ikke i den visuelle.

Resultat av arbeidet:

En api-nøkkel ble tidligere brukt til å lage. Foreløpig er bruken ikke nødvendig. Du bør imidlertid lese noen Yandex-anbefalinger:

Yandex kart-api for utviklere har et bredt spekter av funksjoner som kan bygges inn på nettstedet ditt og forbedre funksjonaliteten til kartene betydelig:

Det er også mulig å bestemme brukerens plassering og mye mer.

Kodeeksempler på disse og andre kart kan bli funnet i Yandex api-sandkassen:

Et av eksemplene (ruting og kostnad) som er innebygd på nettstedet ditt. Velg 2 punkter på kartet, klikk deretter på startpunktet, popup-vinduet vil vise informasjon om fraktkostnader.