एक गूगल मानचित्र एक ड्रॉपडाउन

Question

मैं गूगल मैप्स V3 API दस्तावेज़ के बारे में पढ़ा है custom map controls है कि करने के लिए कस्टम नियंत्रण जोड़ें। यह दस्तावेज़ सरल बटन बनाने के लिए कैसे पता चलता है। हालांकि, मैं क्या करना चाहता हूं कस्टम नियंत्रण के रूप में अपना खुद का ड्रॉप डाउन मेनू बनाएं। मैं इस ड्रॉपडाउन मेनू का उपयोग उपयोगकर्ता को फ़्रेंच या जर्मन जैसी भाषा चुनने के लिए करना चाहता हूं।

गूगल एक अंतर्निहित नक्शा नियंत्रण, MapType कहा जाता है प्रदान करते हैं। इसके अलावा, आप अंतर्निहित शैली google.maps.MapTypeControlStyle.DROPDOWN_MENU का उपयोग करके एक लटकती मेनू के रूप में इस पर नियंत्रण शैली दे सकते हैं।

तो, समानता के अनुसार, मैं MapLanguage नामक एक कस्टम नियंत्रण बनाना चाहता हूं, और इसे ड्रॉप डाउन का उपयोग करना है, भले ही हमारे पास google.maps.MapLanguageControlStyle.DROPDOWN_MENU जैसी किसी चीज़ तक पहुंच हो। हैं, यह तो ऐसा करने के लिए, एक JQuery रास्ता है, तो ज्यादा बेहतर है के रूप में मैं पहले से ही मेरे ऐप में कहीं JQuery उपयोग कर रहा हूँ।

उदाहरण के लिए कोई संकेत बहुत अच्छा होगा।

Answer 1

मेरे पास कोई उदाहरण नहीं है लेकिन ऐसा लगता है कि google.maps काफी लचीला है और जब तक आप अपने मेनू को कोड करते हैं, तब तक यह एक ही div में है, आप इसे मानचित्र नियंत्रण सरणी में उसी तरह धक्का दे सकते हैं जैसे वे अपने सरल बटन दबाओ।

कश्मीर

Answer 2

मैं एक ही बात की जरूरत है, यहाँ एक बुनियादी एक काम कर रहा है:

.container{ 
    width: 85px; 
    z-index: 1; 
    margin: 5px; 
    cursor: pointer; 
    text-align: left; 
    z-index: 0; 
} 

.dropDownControl{ 
    direction: ltr; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    text-align: left; 
    position: relative; 
    font-family: Arial, sans-serif; 
    -webkit-user-select: none; 
    font-size: 13px; 
    padding-top: 1px; 
    padding-right: 6px; 
    padding-bottom: 1px; 
    border-top-width: 1px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    border-top-color: rgb(113, 123, 135); 
    border-right-color: rgb(113, 123, 135); 
    border-bottom-color: rgb(113, 123, 135); 
    border-left-color: rgb(113, 123, 135); 
    border-image: initial; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px; 
    box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px; 
    color: rgb(0, 0, 0); 
    padding-left: 6px; 
    font-weight: bold; 
    background-image: initial; 
    background-attachment: initial; 
    background-origin: initial; 
    background-clip: initial; 
    background-color: rgb(255, 255, 255); 
    background-position: initial initial; 
    background-repeat: initial initial;  
    z-index: 2; 
} 

.dropDownArrow{ 
    -webkit-user-select: none; 
    border-width: 0px; 
    border-style: initial; 
    border-color: initial; 
    border-image: initial; 
    padding: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    position: absolute; 
    right: 6px; 
    top: 50%; 
    margin-top: -2px; 
    width: 7px; 
    height: 4px; 
} 

.dropDownOptionsDiv{ 
    background-color: white; 
    z-index: 0; 
    padding-top: 2px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    border-right-color: rgb(113, 123, 135); 
    border-bottom-color: rgb(113, 123, 135); 
    border-left-color: rgb(113, 123, 135); 
    border-image: initial; 
    border-top-width: 0px; 
    border-top-style: initial; 
    border-top-color: initial; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px; 
    box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px; 
    position: relative; 
    text-align: left; 
    display: none; 
} 

.dropDownItemDiv{ 
    font-family: Arial, sans-serif; 
    -webkit-user-select: none; 
    font-size: 13px; 
    padding-top: 2px; 
    padding-right: 5px; 
    padding-bottom: 3px; 
    padding-left: 5px; 
    background-color: rgb(255, 255, 255); 
    color: black;  
} 
.dropDownItemDiv:hover, .checkboxContainer:hover{ 
    background-color: rgb(235, 235, 235);  

} 
.dropDownControl:hover{ 
    background: -webkit-linear-gradient(top,rgb(255,255,255),rgb(230,230,230)); 
} 
.separatorDiv{ 
    margin-top: 1px; 
    margin-right: 0px; 
    margin-bottom: 1px; 
    margin-left: 0px; 
    border-top-width: 1px; 
    border-top-style: solid; 
    border-top-color: rgb(235, 235, 235); 
} 
.checkboxContainer{ 
    font-family: Arial, sans-serif; 
    -webkit-user-select: none; 
    font-size: 11px; 
    padding-top: 1px; 
    padding-bottom: 3px; 
    padding-left: 5px; 
    direction: ltr; 
    text-align: left; 
    background-color: rgb(255, 255, 255); 
    white-space: nowrap; 
    padding-right: 8px; 
    color: rgb(0, 0, 0); 
}  
.checkboxSpan{ 
    box-sizing: border-box; 
    position: relative; 
    line-height: 0; 
    font-size: 0px; 
    margin-top: 0px; 
    margin-right: 5px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    display: inline-block; 
    background-color: rgb(255, 255, 255); 
    border-width: 1px; 
    border-style: solid; 
    border-color: initial; 
    border-image: initial; 
    border-top-left-radius: 1px; 
    border-top-right-radius: 1px; 
    border-bottom-right-radius: 1px; 
    border-bottom-left-radius: 1px; 
    width: 13px; 
    height: 13px; 
    vertical-align: middle; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    border-color: rgb(198, 198, 198);  
} 


.blankDiv{ 
    position: absolute; 
    left: 1px; 
    top: -2px; 
    width: 13px; 
    height: 11px; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    display: none; /*when = block -> this is the "check" symbol*/ 
} 

.blankImg{ 
    position: absolute; 
    left: -52px; 
    top: -44px; 
    -webkit-user-select: none; 
    border-width: 0px; 
    border-style: initial; 
    border-color: initial; 
    border-image: initial; 
    padding: 0px; 
    margin: 0px; 
    -webkit-user-drag: none; 
    width: 68px; 
    height: 67px; 
} 

.checkboxLabel{ 
    vertical-align: middle; 
    cursor: pointer; 
} 


<div class="container"> 
    <div class="dropDownControl" id="ddControl" title="A custom drop down select with mixed elements" onclick="(document.getElementById('myddOptsDiv').style.display == 'block') ? document.getElementById('myddOptsDiv').style.display = 'none' : document.getElementById('myddOptsDiv').style.display = 'block';""> 
     My Box 
     <img class="dropDownArrow" src="http://maps.gstatic.com/mapfiles/arrow-down.png"/> 
    </div> 
    <div class = "dropDownOptionsDiv" id="myddOptsDiv"> 
     <div class = "dropDownItemDiv" id="mapOpt" title="This acts like a button or click event" onClick="alert('option1')">Option 1</div> 
     <div class = "dropDownItemDiv" id="satelliteOpt" title="This acts like a button or click event" onClick="alert('option2')">Option 2</div> 
     <div class="separatorDiv"></div> 
     <div class="checkboxContainer" title="This allows for multiple selection/toggling on/off" onclick="(document.getElementById('terrainCheck').style.display == 'block') ? document.getElementById('terrainCheck').style.display = 'none' : document.getElementById('terrainCheck').style.display = 'block';"> 
     <span role="checkbox" class="checkboxSpan "> 
      <div class="blankDiv" id="terrainCheck"> 
       <img class="blankImg" src="http://maps.gstatic.com/mapfiles/mv/imgs8.png" /> 
      </div> 
     </span>    
     <label class="checkboxLabel">On/Off</label>    
    </div>   
    </div> 
</div> 

आप यह भी देख सकते हैं एक काम example

Answer 3

कस्टम नियंत्रण आपको काफी कुछ भी आप चाहते हैं डाल करने की अनुमति मानचित्र पर - ड्रॉपडाउन/चयन, लोगो, बटन, जो भी हो। मैं सामग्री डिजाइन लाइट घटकों का उपयोग करने की सलाह दूंगा क्योंकि उनके पास Google लुक होगा।

आप निश्चित रूप से कस्टम नियंत्रण के माध्यम से Google कस्टम पर अपने कस्टम लोगो और कॉपीराइट जोड़ना चाहते हैं। अन्यथा, वे विशेष रूप से मोबाइल उपकरणों पर उचित रूप से प्रस्तुत नहीं करेंगे।

मुझे आधिकारिक Google Maps JavaScript API Custom Control example अपेक्षाकृत जटिल पाया गया और मैं स्थिति विकल्पों को कभी याद नहीं कर सकता। तो, मैं बनाया एक tiny 1.72 KB add-on JS on GitHub पुस्तकालय नियंत्रण-जे एस है कि आप केवल एक स्ट्रिंग के रूप में अपने कस्टम सामग्री बनाने के लिए सक्षम बनाता है, जैसे, var html = "<h1>Hi</h1>" तो किसी ऑब्जेक्ट को इसे पारित control कहा जाता है कि हर स्थिति एक विधि है जहां कहा जाता है (आईडीई IntelliSense संभव पदों की याद दिलाता है)।

तो, सिर्फ

var html = '<p id="control-text"> a bunch of html select menu goes in here </p>' 

//Global method that is fired when the API is loaded and ready 
function initMap() { 
    map = new google.maps.Map(document.getElementById("map"), mapOptions); 
    //intelleSense/Auto-complete works on IDE's 
    control.topCenter.add(html); 
}; 

/* 
 
control.js v0.1 - Add custom controls to Google Maps with ease 
 
Created by Ron Royston, www.rack.pub 
 
https://github.com/rhroyston/control 
 
License: MIT 
 
control.topCenter.add.(html) 
 
*/ 
 
var control=function(){function o(o){this.add=function(T){var t=document.createElement("div");if(t.innerHTML=T,o)switch(o){case"TOP_CENTER":map.controls[google.maps.ControlPosition.TOP_CENTER].push(t);break;case"TOP_LEFT":map.controls[google.maps.ControlPosition.TOP_LEFT].push(t);break;case"TOP_RIGHT":map.controls[google.maps.ControlPosition.TOP_RIGHT].push(t);break;case"LEFT_TOP":map.controls[google.maps.ControlPosition.LEFT_TOP].push(t);break;case"RIGHT_TOP":map.controls[google.maps.ControlPosition.RIGHT_TOP].push(t);break;case"LEFT_CENTER":map.controls[google.maps.ControlPosition.LEFT_CENTER].push(t);break;case"RIGHT_CENTER":map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(t);break;case"LEFT_BOTTOM":map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(t);break;case"RIGHT_BOTTOM":map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(t);break;case"BOTTOM_CENTER":map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(t);break;case"BOTTOM_LEFT":map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(t);break;case"BOTTOM_RIGHT":map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(t)}else console.log("err")}}var T={};return T.topCenter=new o("TOP_CENTER"),T.topLeft=new o("TOP_LEFT"),T.topRight=new o("TOP_RIGHT"),T.leftTop=new o("LEFT_TOP"),T.rightTop=new o("RIGHT_TOP"),T.leftCenter=new o("LEFT_CENTER"),T.rightCenter=new o("RIGHT_CENTER"),T.leftBottom=new o("LEFT_BOTTOM"),T.rightBottom=new o("RIGHT_BOTTOM"),T.bottomCenter=new o("BOTTOM_CENTER"),T.bottomLeft=new o("BOTTOM_LEFT"),T.bottomRight=new o("BOTTOM_RIGHT"),T}();