आप अपनी स्थिति को गूगल मानचित्र (मैप) पर कैसे दिखाएं ?

आप अपनी स्थिति को गूगल मानचित्र (मैप) पर कैसे दिखाएं ? विनीत नागपाल

चकित हो गए क्या ? क्या ऐसा भी मुमकिन हैं ? क्या कहा ऐसा कैसे हो सकता है ?
जी हाँ, ऐसा हो सकता है और जरूर हो सकता है | आप भी ऐसा कर सकते हैं | बहुत आसान है इसे अपने ब्लॉग पर स्थापित करना | ज्यादा तकनीकी जानकारी की जरूरत नहीं है | बस आप को कोड ढूँढना है व इसे कापी करके अपने ब्लॉग पर पेस्ट करना है | यकीन नहीं होता तो आप खुद देख लें | नीचे पांच लोकेशन इसी पेज पर दिखाई दे रही हैं | आप जिस लिंक पर कलिक करेंगे, इसी पेज आप को वह स्थान गूगल मानचित्र पर दिखाई देगा |

इस जावा स्क्रिप्ट की मदद से आप अपने ब्लॉग पर बड़ी ही आसानी से गूगल मैप को स्थापित कर सकते हैं जो एक से अधिक जगहों (पता) में सम्बन्ध स्थापित कर सकता है |

दो कालम का उदाहरण डिफाल्ट रूप में नीचे प्रस्तुत है :-

• मैं यहाँ पर हूँ
  M.C.Street, Jalalabad-152 024
• जलालाबाद (वैस्ट)
  मेरे शहर का नाम : जलालाबाद जिला : फाजिलका , स्टेट : पंजाब (भारत)
• फाजिलका
  मेरा जिला फाजिलका गूगल मानचित्र पर
• पंजाब
  मेरा पंजाब गूगल मानचित्र पर
• मेरा भारत महान
  मेरा भारत देश महान गूगल मानचित्र पर

+ View Larger Map

इस प्रकार आप बाईं तरफ दिखाई दे रहे पते (अड्रैस) पर कलिक करेंगे तो ये आपको उसी पते से सबंधित जगह का मानचित्र (मैप) दिखायेगा | इस अपने ब्लॉग पर स्थापित करने के लिए निम्न प्रक्रिया अपनानी होगी |
पहला स्टेप : आप निम्न कोड को कापी करने के बाद

आप्शन न: 1 आप चाहें तो उसी पेज पर इसे पेस्ट कर सकते हैं | बस इतना ध्यान रखना है कि ये कोड Edit Mode में प्रयोग करना हैं |

आप्शन न: 2 यदि आप आप्शन न: 1 का प्रयोग न करना चाहें तो आप HTML/Javascript विजेट का चयन करके उसमें इस कोड को पेस्ट करने के बाद आप इसे अपने ब्लॉग के साईडबार में लगा सकते हैं |
<style type="text/css"> #mapcontainer{ overflow:hidden; width: 900px; /*margin:0 auto;*/ } #addrcolumn{ /*left column containing the addresses*/ float:left; width: 150px; margin-right:30px; } #addrcolumn ul.location{ /*UL containing the addresses. Do not change "location" class name*/ list-style-type: none; margin: 0; padding: 0; } #addrcolumn ul.location li{ margin-bottom:10px; position:relative; padding:10px; background: #E6E8EA; } #addrcolumn ul.location li.selected{ /*style for selected LI*/ } #addrcolumn ul.location li.selected:after{ /*add arrow after selected LI*/ position:absolute; content:''; border-color:transparent transparent transparent #DFDFDF; left:100%; top:0; border-style: solid; border-width: 15px; /*adjust this property to change height of arrow*/ } #mapcolumn{ /*right column containing the Google Map*/ float:left; width: 500px; } #mapcolumn iframe{ /*style for Google Map IFRAME*/ width: 420px; height:475px; } </style> <script src="http://tipshindimein.googlecode.com/files/googlemapselector.js"></script>

दूसरा स्टेप :आप अपने ब्लॉग के बाईं तरफ दिखाई दे रहे पते को बदलना चाहेंगे | इस पते से गूगल पर दिखाई देने वाले मानचित्र का लिंक किया जाना है | अब आप उस लिंक को गूगल मैप पर खोजना तो जरूर चाहेंगे जिस जगह (शहर) का लिंक इस जगह पर लगाना चाहते हैं,
<a href="http://maps.google.com/maps?q=Jalalabad+West,+Punjab,+India&hl=en&ll=30.604981,74.259802&spn=0.001443,0.002411&sll=20.593684,78.96288&sspn=25.523792,39.506836&oq=jalalabad&hnear=Jalalabad+West,+Firozpur,+Punjab,+India&t=m&z=19">मैं यहाँ पर हूँ , M.C.Street, Jalalabad-152 024</a>
तो आप उपरोक्त लिंक को ध्यान से देखें | जहाँ पर आपको नारंगी रंग में गूगल मानचित्र का लिंक दिखाई दे रहा है आप को एक ऐसा ही लिंक अपने ब्लॉग पर अपने पते के लिए लिंक को गूगल मानचित्र पर ढूँढना है | यदि आप इसे अपने ब्लॉग पर स्थापित करना चाहते हैं तो आप को वो लिंक गूगल मानचित्र पर ढूँढना होगा | इस लिंक को ढूँढने के लिए आप गूगल मानचित्र (मैप) पर कलिक करें |

गूगल मैप पर अपनी स्थिति को ढूँढने के लिए आप निम्न तस्वीर की सहायता ले सकते हैं :-

तीसरा स्टेप : जब आप अपनी लोकेशन का कोड ढूंढ लें तो आप निम्न लाल रंग में दिखाई दे रहे कोड से इस लिंक को बदल दें व इस समस्त कोड को अपनी पोस्ट पर पेस्ट कर दें | ये लिंक काम करने लगेगा | इस प्रकार आप जितने चाहें लिंक अपने ब्लॉग पर प्रयोग कर सकते हैं |

<div id="mapcontainer"> <div id="addrcolumn"> <ul class="location"> <li><a href="यहाँ पर आपने गूगल मैप से कापी किये गए कोड को पेस्ट करना है ">मैं यहाँ पर हूँ </a>
M.C.Street, Jalalabad-152 024 </li> </ul> </div> <div id="mapcolumn">
+ <a href="http://maps.google.com" class="largermap"">View Larger Map</a> <iframe name="mapiframe1" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com?output=embed"></iframe> </div> </div>

चौथा स्टेप : ये निम्न कोड आपने उस हालत में प्रयोग करना है जब उपरोक्त सभी कोड को स्थापित करने के बाद भी स्क्रिप्ट काम न करे तो | मैंने इस निम्न स्क्रिप्ट का प्रयोग इस पोस्ट पर नहीं किया है क्योंकि मैं पहले से इस स्क्रिप्ट कर प्रयोग कर रहा हूँ | ये स्क्रिप्ट उन ब्लोग्स के लिए जो पहले से इस स्क्रिप्ट का प्रयोग नहीं कर रहे हैं |

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

क्या आपको ये आई-मैजिक अंदाज़ पसंद आया ? यदि हां !!! तो अपने विचारों से अवगत कराएं |

"टिप्स हिन्दी में ब्लॉग" की हर नई जानकारी अपने मेल-बॉक्स में मुफ्त पाएं !!!!!!!!!!