നിങ്ങളുടെ വെബ് പേജിലേക്ക് ഒരു ഗൂഗിൾ മാപ്പ് എങ്ങനെ ചേർക്കാം

01 ഓഫ് 05

നിങ്ങളുടെ സൈറ്റിനായി ഒരു Google മാപ്സ് API കീ നേടുക

നിങ്ങളുടെ വെബ്സൈറ്റിലേക്ക് ഒരു Google മാപ്പ് ചേർക്കുന്നതിനുള്ള മികച്ച മാർഗം Google മാപ്സ് API ഉപയോഗിക്കുന്നതാണ്. മാപ്പുകൾ ഉപയോഗിക്കുന്നതിനായി നിങ്ങൾക്ക് ഒരു API കീ ലഭിക്കുമെന്ന് Google ശുപാർശ ചെയ്യുന്നു.

Google മാപ്സ് API v3 ഉപയോഗിക്കുന്നതിന് നിങ്ങൾക്ക് ഒരു API കീ ലഭിക്കേണ്ട ആവശ്യമില്ല, പക്ഷെ നിങ്ങളുടെ ഉപയോഗം നിരീക്ഷിക്കാനും കൂടുതൽ പ്രവേശനത്തിനായി പണമടയ്ക്കാൻ അനുവദിക്കുകയും ചെയ്യുന്നതിനാൽ ഇത് ഉപയോഗപ്രദമാണ്. Google Maps API v3 പ്രതിദിനം ഒരു ഉപയോക്താവിന് ഒരു അഭ്യർത്ഥനയുടെ ഒരു ക്വോട്ട പരമാവധി 25,000 അഭ്യർത്ഥനകളാണ്. നിങ്ങളുടെ പേജുകൾ അത്തരം പരിധി കവിഞ്ഞെങ്കിൽ കൂടുതൽ ലഭിക്കുന്നതിന് നിങ്ങൾ ബില്ലിംഗ് പ്രവർത്തനക്ഷമമാക്കേണ്ടതുണ്ട്.

ഒരു Google മാപ്സ് API കീ എങ്ങനെ നേടാം

1. നിങ്ങളുടെ Google അക്കൗണ്ട് ഉപയോഗിച്ച് Google ലേക്ക് പ്രവേശിക്കുക.
2. ഡെവലപ്പർമാരുടെ കൺസോളിലേക്ക് പോകുക
3. ലിസ്റ്റിലൂടെ സ്ക്രോൾ ചെയ്ത് Google Maps API v3 കണ്ടെത്തുക, തുടർന്ന് അത് ഓൺ "ഓഫ്" ബട്ടൺ ക്ലിക്കുചെയ്യുക.
4. നിബന്ധനകൾ വായിക്കുക, സമ്മതിക്കുക.
5. API കൺസോളിലേക്ക് പോയി ഇടത് കൈ മെനുവിൽ നിന്ന് "API ആക്സസ്സ്" തിരഞ്ഞെടുക്കുക
6. "ലളിതമായ API ആക്സസ്" വിഭാഗത്തിൽ, "പുതിയ സെർവർ കീ ..." ബട്ടണിൽ ക്ലിക്കുചെയ്യുക.
7. നിങ്ങളുടെ വെബ് സെർവറിന്റെ IP വിലാസം നൽകുക. നിങ്ങളുടെ മാപ്സ് അഭ്യർത്ഥനകൾ വരുന്ന IP ഇതാണ് ഇത്. നിങ്ങളുടെ ഐപി വിലാസം അറിയില്ലെങ്കിൽ നിങ്ങൾക്ക് അത് നോക്കാവുന്നതാണ്.
8. "API കീ:" വരിയിൽ (ആ ശീർഷകം ഉൾപ്പെടുത്തിയിട്ടില്ല) വാചകം പകർത്തുക. നിങ്ങളുടെ മാപ്പിനായുള്ള നിങ്ങളുടെ API കീയാണ് ഇത്.

02 of 05

കോർഡിനേറ്റുകളിലേക്ക് നിങ്ങളുടെ വിലാസം പരിവർത്തനം ചെയ്യുക

നിങ്ങളുടെ വെബ് പേജുകളിൽ Google മാപ്സ് ഉപയോഗിക്കുന്നതിന്, നിങ്ങൾക്ക് സ്ഥലത്തിന്റെ അക്ഷാംശവും രേഖാംശവും ആവശ്യമാണ്. നിങ്ങൾക്ക് ഇത് ഒരു GPS ൽ നിന്ന് നേടാം അല്ലെങ്കിൽ നിങ്ങൾക്ക് Geocoder.us പോലുള്ള ഒരു ഓൺലൈൻ ഉപകരണം ഉപയോഗിക്കാൻ കഴിയും.

1. Geocoder.us ലേക്ക് പോയി നിങ്ങളുടെ ബോക്സിൽ തിരയൽ ബോക്സിൽ ടൈപ്പ് ചെയ്യുക.
2. അക്ഷാംശത്തിനായുള്ള ആദ്യ നമ്പർ പകർത്തുക (മുന്നിൽ ഒരു അക്ഷരം ഇല്ലാത്ത) അത് ഒരു ടെക്സ്റ്റ് ഫയലായി ഒട്ടിക്കുക. നിങ്ങൾക്ക് ഡിഗ്രി (º) ഇൻഡിക്കേറ്റർ ആവശ്യമില്ല.
3. രേഖാംശത്തിനായുള്ള ആദ്യ നമ്പർ പകർത്തുക (മുന്നിൽ ഒരു അക്ഷരം ഇല്ലാത്തത്) നിങ്ങളുടെ ടെക്സ്റ്റ് ഫയലിൽ പേസ്റ്റ് ചെയ്യുക.

നിങ്ങളുടെ അക്ഷാംശവും രേഖാംശവും ഇതുപോലെയായിരിക്കും:

40.756076
-73.990838

മറ്റൊരു രാജ്യത്ത് കോർഡിനേറ്റുകൾ ലഭിക്കേണ്ടതുണ്ടെങ്കിൽ, Geocoder.us യുഎസ് വിലാസങ്ങൾക്കായി മാത്രം പ്രവർത്തിക്കുന്നു, നിങ്ങളുടെ പ്രദേശത്തെ സമാന ഉപകരണത്തിനായി നിങ്ങൾ തിരയണം.

05 of 03

നിങ്ങളുടെ വെബ് പേജിലേക്ക് മാപ്പ് ചേർക്കുന്നു

ആദ്യം, മാപ്പ് സ്ക്രിപ്റ്റ് ചേർക്കുക

നിങ്ങളുടെ പ്രമാണത്തിൽ

നിങ്ങളുടെ വെബ് പേജ് തുറന്ന് നിങ്ങളുടെ ഡോക്യുമെന്റിന്റെ HEAD ൽ ചേർക്കുക.

ഹൈലൈറ്റ് ചെയ്ത ഭാഗം ഘട്ടം ഘട്ടവും രേഖാംശ നമ്പറുകളുമായ ഘട്ടത്തിലേക്ക് മാറ്റുക.

രണ്ടാമതായി, മാപ്പ് ഘടകത്തെ നിങ്ങളുടെ പേജിലേക്ക് ചേർക്കുക

നിങ്ങളുടെ പ്രമാണത്തിന്റെ HEAD ൽ ചേർത്ത എല്ലാ സ്ക്രിപ്റ്റ് ഘടകങ്ങളും നിങ്ങൾക്ക് ഉണ്ടെങ്കിൽ, നിങ്ങൾ നിങ്ങളുടെ മാപ്പിനെ പേജിൽ സ്ഥാനപ്പെടുത്തേണ്ടതുണ്ട്. നിങ്ങൾ ID = "map-canvas" ആട്രിബ്യൂട്ടിനോടൊപ്പം ഒരു DIV ഘടകം ചേർത്ത് ഇത് ചെയ്യുക. നിങ്ങളുടെ പേജിൽ ഉൾപ്പെടുത്താവുന്ന വീതിയും ഉയരവുമുള്ള ഈ ഡിവിഡിയെ നിങ്ങൾക്ക് ശുപാർശചെയ്യുന്നു:

അവസാനമായി, അപ്ലോഡ് ചെയ്യുകയും പരിശോധിക്കുകയും ചെയ്യുക

നിങ്ങളുടെ അവസാന പേജ് നിങ്ങളുടെ പേജ് അപ്ലോഡുചെയ്ത് നിങ്ങളുടെ മാപ്പ് പ്രദർശിപ്പിക്കുന്നതിന് പരിശോധിക്കുക എന്നതാണ്. പേജിലെ ഒരു ഗൂഗിൾ മാപ്പിന്റെ ഉദാഹരണം ഇവിടെയുണ്ട്. ശ്രദ്ധിക്കുക, കാരണം About.com CMS പ്രവർത്തിക്കുന്നെങ്കിൽ, നിങ്ങൾക്ക് മാപ്പ് പ്രത്യക്ഷപ്പെടുന്നതിന് ഒരു ലിങ്കിൽ ക്ലിക്കുചെയ്യണം. ഇത് നിങ്ങളുടെ പേജിലെ കേസ് അല്ല.

നിങ്ങളുടെ മാപ്പ് കാണിക്കുന്നില്ലെങ്കിൽ, ഒരു BODY ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് ആരംഭിക്കുക:

onload = "ആരംഭിക്കുക ()" >

നിങ്ങളുടെ മാപ്പ് ലോഡുചെയ്തില്ലെങ്കിൽ പരിശോധിക്കുന്നതിനുള്ള മറ്റ് കാര്യങ്ങൾ ഇവയാണ്:

• കേസ് ഉൾപ്പെടെ നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റിൽ ടൈപ്പിംഗുകൾക്കായി തിരയുക. ജാവാസ്ക്രിപ്റ്റ് കേസ് സെൻസിറ്റീവ് ആണ്.
• നിങ്ങൾക്ക് സൂം, സെന്റർ ഓപ്ഷനുകൾ സെറ്റ് ഉണ്ടെന്ന് ഉറപ്പാക്കുക.
• ശരിയായ ഐഡിയുമായി നിങ്ങളുടെ DIV ഘടകം പേജിൽ ഉണ്ടെന്ന് ഉറപ്പുവരുത്തുക.
• നിങ്ങളുടെ DIV ഘടകം ഉയരം ഉറപ്പുവരുത്തുക.

05 of 05

നിങ്ങളുടെ മാപ്പിലേക്ക് ഒരു മാർക്കർ ചേർക്കുക

പക്ഷെ എവിടെ പോകണം എന്ന് അറിയിക്കുന്ന മാർക്കർ ഇല്ലെങ്കിൽ നിങ്ങളുടെ ലൊക്കേഷന്റെ മാപ്പ് എത്ര നല്ലതാണ്?

ഒരു സ്റ്റാൻഡേർഡ് Google മാപ്സ് ചുവപ്പ് മാർക്കർ ചേർക്കുന്നതിന്, ചുവടെയുള്ള മാപ്പ് = താഴത്തെ സ്ക്രിപ്റ്റിന് ചുവടെ നിങ്ങളുടെ സ്ക്രിപ്റ്റിൽ ചേർക്കുക:

var myLatlng = പുതിയ google.maps.LatLng ( അക്ഷാംശം, രേഖാംശം );
var marker = പുതിയ google.maps.Marker ({
സ്ഥാനം: myLatlng,
ഭൂപടത്തിൽ,
തലക്കെട്ട്: " മുൻപോറാണി എക്സ്പ്രസ്സ് ഹെഡ്ക്വാർട്ടേഴ്സ് "
});

ഹൈലൈറ്റുചെയ്തിരിക്കുന്ന ടെക്സ്റ്റ് നിങ്ങളുടെ അക്ഷാംശത്തിനും രേഖാംശത്തിനും മാർക്കർ വഴി ആളുകൾ ഹോവർ ചെയ്യുമ്പോൾ നിങ്ങൾ ദൃശ്യമാക്കാൻ ആഗ്രഹിക്കുന്ന ശീർഷകത്തിലേയ്ക്ക് മാറ്റുക.

നിങ്ങൾക്ക് ഇഷ്ടമുള്ളിടത്തോളം പേജിൽ നിങ്ങൾക്ക് പല മാർക്കറുകളും ചേർക്കാൻ കഴിയും, പുതിയ കോർഡിനേറ്റുകളും ടൈറ്റിലുമൊക്കെയായി പുതിയ വേരിയബിളുകൾ ചേർക്കാം, എന്നാൽ എല്ലാ മാർക്കറുകളും പ്രദർശിപ്പിക്കുന്നതിന് മാപ്പ് വളരെ ചെറുതാണെങ്കിൽ, റീഡർ സൂം ഔട്ട് ചെയ്യാതെ അത് കാണിക്കില്ല.

var latlng 2 = പുതിയ google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = പുതിയ google.maps.Marker ({
സ്ഥാനം: latlng 2 ,
ഭൂപടത്തിൽ,
ശീർഷകം: " ആപ്പിൾ കംപ്യൂട്ടർ "
});

ഒരു മാർക്കറോടുകൂടിയ Google മാപ്പിന് ഒരു ഉദാഹരണം ഇതാ. ശ്രദ്ധിക്കുക, കാരണം codempire.com എങ്ങനെയാണ് പ്രവർത്തിക്കുന്നത്, നിങ്ങൾക്ക് മാപ്പ് പ്രത്യക്ഷപ്പെടാൻ ഒരു ലിങ്കിൽ ക്ലിക്കുചെയ്യണം. ഇത് നിങ്ങളുടെ പേജിലെ കേസ് അല്ല.

05/05

നിങ്ങളുടെ പേജിലേക്ക് ഒരു രണ്ടാം (അല്ലെങ്കിൽ അതിലും) മാപ്പ് ചേർക്കുക

എന്റെ ഉദാഹരണം Google മാപ്സ് പേജ് നോക്കിയാൽ, പേജിൽ പ്രദർശിപ്പിച്ചിരിക്കുന്ന ഒന്നിൽ കൂടുതൽ മാപ്പുകൾ നിങ്ങൾക്ക് ഉണ്ടാകും. ഇത് വളരെ എളുപ്പമാണ്. എങ്ങനെയെന്ന് ഇതാ.

1. ഈ ട്യൂട്ടോറിയലിന്റെ രണ്ടാം ഘട്ടം ഞങ്ങൾ മനസ്സിലാക്കിയിരിക്കുമ്പോൾ നിങ്ങൾ പ്രദർശിപ്പിക്കാൻ ആഗ്രഹിക്കുന്ന എല്ലാ ഭൂപടങ്ങളുടേയും അക്ഷാംശവും രേഖാംശവും നേടുക.
2. ഈ ട്യൂട്ടോറിയലിന്റെ ഘട്ടം 3 ൽ പഠിച്ചതുപോലെ ആദ്യത്തെ മാപ്പ് തിരുകുക. മാർക്കർ ഒരു മാർക്കറ്റർ ആവശ്യമെങ്കിൽ, ഘട്ടം 4 ലെ മാർക്കർ ചേർക്കുക.
3. രണ്ടാമത്തെ മാപ്പിന്, നിങ്ങളുടെ തുടക്കപടം () സ്ക്രിപ്റ്റിലേക്ക് 3 പുതിയ വരികൾ ചേർക്കേണ്ടതായി വരും:
   var latlng2 = പുതിയ google.maps.LatLng ( രണ്ടാം നിർദ്ദേശാങ്കങ്ങൾ );
   var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = പുതിയ google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. പുതിയ മാപ്പിൽ നിങ്ങൾക്ക് ഒരു മാർക്കർ വേണമെങ്കിൽ രണ്ടാം കോർഡിനേറ്റിലും രണ്ടാം മാപ്പിലും രണ്ടാമത്തെ മാർക്കർ പോയിന്റ് ചേർക്കുക:
   var myMarker2 = പുതിയ google.maps.Marker ({position: latlng2 , മാപ്പ്: map2 , പേര്: " നിങ്ങളുടെ മാർക്കർ ശീർഷകം "});
5. പിന്നെ രണ്ടാമത്തേത് ചേർക്കുക

   നിങ്ങൾ രണ്ടാമത്തെ മാപ്പ് എവിടെയാണ്. അത് ഒരു id = "map_canvas_2" ഐഡി നൽകാമെന്ന് ഉറപ്പാക്കുക.

6. നിങ്ങളുടെ പേജ് ലോഡ് ചെയ്യുമ്പോൾ, രണ്ട് മാപ്പുകൾ പ്രദർശിപ്പിക്കും

രണ്ട് ഗൂഗിൾ മാപ്പുകൾ ഉള്ള ഒരു പേജിന്റെ കോഡ് ഇതാണ്: