Google मानचित्र के शीर्ष पर एक बटन डालें

Question

मैप, सैटेलाइट और हाइब्रिड बटन के बगल में स्थित Google मानचित्र के शीर्ष पर एक बटन डालना चाहता हूं।

मैं सोच रहा था कि यह संभव है और यह करने का सबसे अच्छा तरीका कैसे होगा?

तो मेरे पास विचार Google मानचित्र के शीर्ष पर एक छवि को ओवरले कर रहे हैं जो क्लिक करने योग्य है लेकिन यह सुनिश्चित नहीं है कि यह सभी घटनाओं को Google मानचित्र से दूर ले जाएगा।

क्या आपके पास कोई विचार है कि यह कैसे किया जा सकता है?

Answer 1

इस here को कैसे करें इस बारे में एक बहुत अच्छा विवरण है।

मुझे पूरा यकीन है कि आप मानक बटन की तरह दिखने के लिए इन लोगों को स्टाइल कर सकते हैं और आप निश्चित रूप से इसे शीर्ष दाएं को एंकर कर सकते हैं। जब मुझे मौका मिलता है तो मैं इसे अपने परिणामों के साथ एक कोशिश और अद्यतन दूंगा।

अद्यतन:

मैं इस बाहर की कोशिश करने का मौका मिला और यह ठीक काम करता है:

• Map example with Google style buttons
• Javascript Source

मूल रूप से आप को लागू करने के बहुत समान काम करने अंत जीकंट्रोल का उपयोग करने वाले बटन या मानचित्र पर डीआईवी की पूर्ण स्थिति का उपयोग करके (ChrisB सुझाए गए अनुसार)। तो मुझे नहीं लगता कि एक सही (या आसान) दृष्टिकोण है, यह सिर्फ व्यक्तिगत वरीयता का मामला है। सौभाग्य।

Answer 2

कैनोनैड के उत्तर को पूरक करने के लिए, यहां एक HTML मानचित्र/सीएसएस है जो Google मानचित्र नियंत्रण का उपयोग करता है। आप सीएसएस को वास्तविक चीज़ की तरह दिखने के लिए दोहराना कर सकते हैं।

आप एक औपचारिक जीकंट्रोल बना सकते हैं, या आप उन्हें पूर्ण स्थिति के साथ Google मानचित्र पर रख सकते हैं।

सक्रिय बटन:

<div style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 15.3em;" title="Show street map"> 
    <div style="border-style: solid; border-color: rgb(52, 86, 132) rgb(108, 157, 223) rgb(108, 157, 223) rgb(52, 86, 132); border-width: 1px; font-size: 12px; font-weight: bold;"> 
     Map 
    </div> 
</div> 

निष्क्रिय बटन:

<div style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 5.1em;" title="Show imagery with street names"> 
    <div style="border-style: solid; border-color: white rgb(176, 176, 176) rgb(176, 176, 176) white; border-width: 1px; font-size: 12px;"> 
     Hybrid 
    </div> 
</div> 

---

अद्यतन: वहाँ भी गूगल मैप्स उपयोगिता पुस्तकालय में एक विस्तार है कि यह पूरा कर सकते हैं - ExtMapTypeControl

Answer 3

मुझे भी वही समस्या थी, इस तरह मैंने इसे किया, क्रेआ ते एक बटन और इसके नीचे स्टाइल गूगल मैप्स एपीआई के एक पदावनत संस्करण के लिए

आईडी = "my_button"

#my_button{ 
      position:absolute; 
      bottom:2%; 
      color: #fff; 
      background-color: #4d90fe; 
      padding: 11px; 

      border: 1px solid transparent; 
      border-radius: 2px; 
      box-sizing: border-box; 
      -moz-box-sizing: border-box; 

      outline: none; 
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
      alignment-baseline:central; 
      width:90%; 
      left:5%; 
      text-align:center; 
      text-decoration:none; 


      margin:0px auto;} 


     #my_button:hover{ 
      background-color:#3B6EC2;} 

Answer 4

स्वीकार किए जाते हैं जवाब 2009 से (5 साल पहले) है और लिंक दे।

जबकि बहुत ही प्रश्न मैं इस उदाहरण मिल गया है के लिए खोज: https://developers.google.com/maps/documentation/javascript/examples/control-custom

// Create the DIV to hold the control and 
// call the HomeControl() constructor passing 
// in this DIV. 
var homeControlDiv = document.createElement('div'); 
var homeControl = new HomeControl(homeControlDiv, map); 

homeControlDiv.index = 1; 
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv); 

Answer 5

jQuery यह ऐसा दिखाई देगा का उपयोग कर: पहले एक समारोह बनाते हैं तो आपके तत्व वापस आ जाएगी कि

function myButton(){ 
    var btn = $('<div class="my-button"></div>'); 
    btn.bind('click', function(){ 
     // logic here... 
     alert('button clicked!'); 
    }); 
    return btn[0]; 
} 

और मानचित्र के निर्माण के बाद आपको अपना बटन संलग्न करने की आवश्यकता है:

map.controls[google.maps.ControlPosition.TOP_CENTER].push(myButton());