Kiel aldoni Google-mapo al Via Retpaĝo

01 de 05

Akiru Ŝlosilon de Google Maps API por Via retejo

La plej bona maniero por aldoni Google-mapo al via retejo estas uzi Google Maps API. Kaj Google rekomendas, ke vi ricevas API-ŝlosilon por uzi la mapojn.

Vi ne bezonas ricevi API-ŝlosilon por uzi Google Maps API v3, sed ĝi estas tre utila, ĉar ĝi ebligas kontroli vian uzadon kaj pagi por aldona aliro. Google Maps API v3 havas kotizon de 1 peto po dua por uzanto ĝis maksimumo de 25,000 petoj tage. Se viaj paĝoj superas tiujn limojn, vi bezonos ebligi facturado por akiri pli.

Kiel akiri Google Maps API-ŝlosilon

1. Ensalutu al Google per via Google-konto.
2. Iru al la evoluinta konzolo
3. Rulumu tra la listo kaj trovos la Google Maps API v3, kaj alklaku la butonon "OFF" por turni ĝin.
4. Legu kaj konsentas la terminojn.
5. Iru al la konzolo de API kaj elektu "API-Aliron" de la maldekstra menuo
6. En la sekcio "Simpla API-Aliro", alklaku la butonon "Krei novan Servilon-ŝlosilon ...".
7. Eniru la IP-adreson de via servilo. Ĉi tiu estas la IP, kie venos viaj Maps-petoj. Se vi ne scias vian IP-adreson, vi povas rigardi ĝin.
8. Kopiu la tekston sur la "API-ŝlosilo:" linio (ne inkluzivanta tiun titolon). Ĉi tio estas via API-ŝlosilo por viaj mapoj.

02 de 05

Konvertu Vian adreson al koordinatoj

Por uzi Google Maps sur viaj retpaĝoj, vi devas havi la latitudo kaj longitudon por la loko. Vi povas akiri ĉi tiujn el GPS aŭ vi povas uzi interretan ilon kiel Geocoder.us por diri al vi.

1. Iru al Geocoder.us kaj tajpu vian adreson en la serĉkesto.
2. Kopiu la unuan numeron por la latitudo (sen litero antaŭen) kaj batu ĝin en teksta dosieron. Vi ne bezonas la gradon (º) indikilon.
3. Kopiu la unuan numeron por la longo (denove sen letero antaŭen) kaj batu ĝin en vian tekston-dosieron.

Via latitudo kaj longitudo aspektos io simila al ĉi tio:

40.756076
-73.990838

Geocoder.us nur funkcias por usonaj adresoj, se vi bezonas akordigi la koordinatojn en alia lando, vi serĉu similan ilon en via regiono.

03 de 05

Aldonante la Mapo al Via Retpaĝo

Unue aldonu la mapkripton al la

de Via Dokumento

Malfermu vian retpaĝon kaj aldonu la jenan al la HEAD de via dokumento.

Ŝanĝi la reliefigitan parton al la latitudo kaj longaj nombroj, kiujn vi skribis en la paŝo du.

Dua, Aldonu la Mapo Elemento al Via Paĝo

Unufoje vi havas ĉiujn skriptajn elementojn aldonitajn al la HEAD de via dokumento, vi devas posedi vian mapon en la paĝo. Vi faras ĉi tion aldonante DIV-elementon kun la ido = "mapo-kanva" atributo. Mi rekomendas, ke vi ankaŭ stiligas ĉi tiun divon kun larĝa kaj alteco, kiu persvadas sur via paĝo:

Fine, Alŝuti kaj Atesto

Lin lasta por fari estas alŝuti vian paĝon kaj provi, ke via mapo montras. Jen ekzemplo de Google-mapo sur la paĝo. Rimarku, pro la maniero, kiel la Projekto.Com funkcias CMS, vi devos alklaki ligilon por aperi la mapo. Ĉi tio ne estos la kazo en via paĝo.

Se via mapo ne montriĝas, provu komencigi ĝin per BODY-atributo:

onload = "inicialigi ()" >

Aliaj aferoj por kontroli se via mapo ne estas ŝarĝita inkluzivas:

• Serĉu tajpojn en via JavaScript, inkluzive kazon. JavaScript estas kazema.
• Certiĝu, ke vi havas la zoom kaj centrajn opciojn agorditajn.
• Certigu, ke via DIV-elemento estas sur la paĝo kun la ĝusta ID.
• Certigu, ke via DIV-elemento havas altecon.

04 de 05

Aldonu markilon al via mapo

Sed kio bona estas mapo de via loko, se ne estas markilo pri homoj, kie ili devas iri?

Por aldoni norman Google Maps ruĝan markilon aldonu la jenan al via skripto sub la var mapo = ... linio:

var myLatlng = nova google.maps.LatLng ( latitudo, longitudo );
var markilo = nova google.maps.Marker ({
pozicio: myLatlng,
mapo: mapo,
titolo: " Antaŭa Ĉefartikolo de Ĉefsidejo "
});

Ŝanĝu la emfazitan tekston al via latitudo kaj longo kaj la titolo, kiun vi ŝatus aperi kiam homoj ŝvebas super la markilo.

Vi povas aldoni tiom da markiloj al la paĝo, kiel vi volas, nur aldonu novajn variablojn kun novaj koordinatoj kaj titoloj, sed se la mapo estas tro malgranda por montri ĉiujn markilojn, ili ne montros, se la leganto ne eksplodos.

var latlng 2 = novaj google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = nova google.maps.Marker ({
pozicio: latlng 2 ,
mapo: mapo,
titolo: " Apple Computer "
});

Jen ekzemplo de Google-mapo kun markilo. Rimarku, pro la maniero, kiel la Projekto.Com funkcias CMS, vi devas alklaki ligilon por aperi la mapo. Ĉi tio ne estos la kazo en via paĝo.

05 de 05

Aldonu Duan (aŭ pli) Mapo al Via Paĝo

Se vi rigardis mian ekzemplon de mapoj de Google-mapoj, vi rimarkos, ke mi havas pli ol unu mapo montrita sur la paĝo. Ĉi tio tre facilas fari. Jen kiel.

1. Akiru la latitudo kaj longitudon de ĉiuj mapoj, kiujn vi volas montri kiel ni lernis en la paŝo 2 de ĉi tiu lernilo.
2. Enmetu la unuan mapon, kiel ni lernis en la paŝo 3 de ĉi tiu lernilo. Se vi volas, ke la mapo havas markilon, aldonu la markilon kiel en la paŝo 4.
3. Por la dua mapo, vi bezonos aldoni 3 novajn liniojn al via komenca () skripto:
   var latlng2 = novaj google.maps.LatLng ( duaj koordinatoj );
   var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = novaj google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Se vi ankaŭ volas markilon sur la nova mapo, aldonu duan markilon montrante ĉe la duaj koordinatoj kaj la dua mapo:
   var myMarker2 = nova google.maps.Marker ({pozicio: latlng2 , map: map2 , title: " Your Marker Title "});
5. Poste aldonu la duan

   Kie vi volas la duan mapon. Kaj certe certigu ĝin id = "map_canvas_2" ID.

6. Kiam via paĝo ŝarĝas, du mapoj montros

Jen la kodo de paĝo kun du Google-mapoj sur ĝi: