કેવી રીતે તમારા વેબ પૃષ્ઠ પર એક Google Map ઉમેરો

05 નું 01

તમારી સાઇટ માટે Google નકશા API કી મેળવો

તમારી વેબસાઇટ પર Google નકશા ઉમેરવાનો શ્રેષ્ઠ માર્ગ Google Maps API નો ઉપયોગ કરવાનો છે. અને Google ભલામણ કરે છે કે નકશાનો ઉપયોગ કરવા માટે તમને એક API કી મળે છે.

તમારે Google નકશા API v3 નો ઉપયોગ કરવા માટે API કીની જરૂર નથી, પરંતુ તે ખૂબ જ ઉપયોગી છે કારણ કે તે તમને તમારા વપરાશને મોનિટર કરવા અને વધારાની ઍક્સેસ માટે ચૂકવણી કરવા દે છે. Google નકશા API v3 માં પ્રતિ દિવસ દીઠ મહત્તમ 25,000 વિનંતીઓ દીઠ વપરાશકર્તા દીઠ પ્રતિ સેકન્ડની વિનંતી છે. જો તમારા પૃષ્ઠોને તે મર્યાદા કરતાં વધી જાય તો વધુ મેળવવા માટે તમને બિલિંગ સક્ષમ કરવાની જરૂર પડશે.

Google નકશા API કી કેવી રીતે મેળવવી

1. તમારા Google એકાઉન્ટનો ઉપયોગ કરીને Google પર લૉગિન કરો.
2. વિકાસકર્તાઓ કન્સોલ પર જાઓ
3. સૂચિમાંથી સ્ક્રોલ કરો અને Google Maps API v3 શોધો, પછી તેને ચાલુ કરવા માટે "OFF" બટનને ક્લિક કરો.
4. વાંચો અને શરતોથી સંમત
5. API કન્સોલ પર જાઓ અને ડાબા હાથની મેનૂમાંથી "API ઍક્સેસ" પસંદ કરો
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 માત્ર US સરનામાંઓ માટે જ કાર્ય કરે છે, જો તમને બીજા દેશમાં કોઓર્ડિનેટ્સ મેળવવાની જરૂર હોય, તો તમારે તમારા ક્ષેત્રમાં સમાન સાધન શોધવા જોઈએ.

05 થી 05

તમારા વેબ પૃષ્ઠ પર નકશો ઉમેરી રહ્યા છે

પ્રથમ, આ માટે નકશો સ્ક્રિપ્ટ ઉમેરો

તમારા દસ્તાવેજનું

તમારા વેબ પૃષ્ઠને ખોલો અને નીચે આપના દસ્તાવેજના HEAD માં ઉમેરો.

હાયલાઇટ કરેલ ભાગને તમે પગલે બેમાં લખેલા અક્ષાંશ અને રેખાંશ સંખ્યામાં બદલો.

બીજું, તમારા પૃષ્ઠ પર નકશો એલિમેન્ટ ઉમેરો

એકવાર તમારી પાસે તમારા દસ્તાવેજનાં HEAD માં ઉમેરવામાં આવેલ તમામ સ્ક્રિપ્ટ તત્વો છે, તમારે પૃષ્ઠ પર તમારા નકશાને સ્થાન આપવાની જરૂર છે. તમે id = "map-canvas" લક્ષણ સાથે એક DIV ઘટક ઉમેરીને કરો. હું તમને આ પૃષ્ઠની પહોળાઈ અને ઊંચાઈ સાથે શૈલીને ભલામણ કરું છું જે તમારા પૃષ્ઠ પર ફિટ થશે:

છેલ્લે, અપલોડ કરો અને પરીક્ષણ કરો

કરવા માટે છેલ્લી વસ્તુ તમારા પૃષ્ઠને અપલોડ કરો અને પરીક્ષણ કરો કે તમારો નકશો પ્રદર્શિત કરે છે. અહીં પૃષ્ઠ પરના Google નકશાનું એક ઉદાહરણ છે. નોંધ, જે રીતે cs.m. કાર્ય કરે છે તે રીતે, તમારે નકશાને દેખાવા માટે લિંકને ક્લિક કરવી પડશે. આ તમારા પૃષ્ઠ પર ન હશે.

જો તમારો નકશો બતાવતો નથી, તો તેને બીડી લક્ષણ સાથે શરૂ કરવાનો પ્રયત્ન કરો:

onload = "પ્રારંભ કરો ()" >

તમારા નકશામાં લોડ થઈ રહ્યો નથી તે ચકાસવા માટે અન્ય વસ્તુઓ શામેલ છે:

• કેસ સહિત તમારા જાવાસ્ક્રીપ્ટમાં ટાઇપોઝ માટે જુઓ. જાવાસ્ક્રિપ્ટ કેસ સંવેદનશીલ છે.
• ખાતરી કરો કે તમારી પાસે ઝૂમ અને કેન્દ્ર વિકલ્પો સેટ છે.
• ખાતરી કરો કે તમારું DIV ઘટક પૃષ્ઠ પર યોગ્ય ID સાથે છે.
• ખાતરી કરો કે તમારા DIV ઘટકની ઊંચાઈ છે.

04 ના 05

તમારા નકશા પર એક માર્કર ઉમેરો

જો કોઈ માર્કર લોકોને કહેવાનું છે કે તેઓ ક્યાં જવું જોઈએ તો તમારા સ્થાનનો નકશો શું સારો છે?

સ્ટાન્ડર્ડ Google નકશા લાલ માર્કર ઉમેરવા માટે var મેપ = ... રેખા નીચે તમારી સ્ક્રિપ્ટને નીચે ઉમેરો ...

var myLatlng = નવા google.maps.LatLng ( અક્ષાંશ, રેખાંશ );
var માર્કર = નવા google.maps.Marker ({
સ્થિતિ: myLatlng,
નકશો: નકશો,
શીર્ષક: " ભૂતપૂર્વ રિપોર્ટિંગ હેડક્વાર્ટર્સ "
});

હાઇલાઇટ કરેલા ટેક્સ્ટને તમારા અક્ષાંશ અને રેખાંશમાં અને જ્યારે તમે માર્કર પર હૉવર કરો છો ત્યારે તમે જે શીર્ષકને પ્રદર્શિત કરવા માંગો છો તેને બદલો.

તમને ગમે તે પૃષ્ઠ પર તમે ઘણા માર્કર્સ ઉમેરી શકો છો, ફક્ત નવા કોઓર્ડિનેટ્સ અને શીર્ષકો સાથે નવા ચલો ઉમેરી શકો છો, પરંતુ જો બધા માર્કર્સને દર્શાવવા માટે નકશું ખૂબ નાનું છે, તો જ્યાં સુધી રીડર ઝૂમ નહીં કરે ત્યાં સુધી તે દેખાશે નહીં.

var latlng 2 = નવા google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = નવા google.maps.Marker ({
સ્થાન: latlng 2 ,
નકશો: નકશો,
શીર્ષક: " એપલ કમ્પ્યુટર "
});

અહીં એક માર્કર સાથે Google નકશાનું એક ઉદાહરણ છે નોંધ, જે રીતે c ++ 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 , શીર્ષક: " તમારું માર્કર શીર્ષક "});
5. પછી બીજા ઉમેરો

   જ્યાં તમે બીજો નકશો ઇચ્છો છો. અને તેને id = "map_canvas_2" ID આપવાની ખાતરી કરો.

6. જ્યારે તમારું પૃષ્ઠ લોડ થાય, ત્યારે બે નકશા પ્રદર્શિત થશે

અહીં તેના પરના બે Google નકશાવાળા પૃષ્ઠનો કોડ છે: