Javascript 将自定义按钮放在google map v3中

我有工作谷歌地图时，用户点击按钮，它会去用户的位置。但我的问题是如何在谷歌地图中制作按钮？单击google map[]最大化后，将显示该按钮。我的代码是：

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

    <input id="lat" value="47.6145" />
    <input id="lng" value="-122.3418" />
    <div id="google_map"></div>


    <!-- Replace the value of the key parameter with your own API key. -->
    <script src="https://maps.googleapis.com/maps/api/js?key=APIKEY"></script>

    var map;

    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
      } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
      }
    }

    function showPosition(position) {

      $('#lat').val(position.coords.latitude);
      $('#lng').val(position.coords.longitude);

      map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
      //location.reload();

      x.innerHTML = "<p id='babi'>Latitude: " + position.coords.latitude +
        "</p><br><p id='setan'>Longitude: " + position.coords.longitude + "</p>";
    }

    $(document).ready(function() {
      var lng = $("#lng").val();
      var lat = $("#lat").val();
      var mapCenter = new google.maps.LatLng(lat, lng);
      // var mapCenter = new google.maps.LatLng(47.6145, -122.3418); //Google map Coordinates

      map_initialize(); // load map
      function map_initialize() {
        //Google map option
        var googleMapOptions = {
          center: mapCenter, // map center
          zoom: 17, //zoom level, 0 = earth view to higher value
          panControl: true, //enable pan Control
          zoomControl: true, //enable zoom control
          zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL //zoom control size
          },
          scaleControl: true, // enable scale control
          mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
        };

        map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);
      }
    });

单击按钮获取您的坐标

试试看
var映射；
函数getLocation（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（showPosition）；
}否则{
x、 innerHTML=“此浏览器不支持地理位置。”；
}
}
功能显示位置（位置）{
$（'#lat'）.val（位置坐标纬度）；
$（'#lng'）.val（位置坐标经度）；
setCenter（新的google.maps.LatLng（position.coords.latitude，position.coords.longitude））；
//location.reload（）；
x、 innerHTML=“
纬度：”+position.coords.Latitude+

经度：“+position.coords.Longitude+”
”；
}
$（文档）.ready（函数（）{
var lng=$（“#lng”）.val（）；
var lat=$（“#lat”）.val（）；
var mapCenter=new google.maps.LatLng（lat，lng）；
//var mapCenter=new google.maps.LatLng（47.6145，-122.3418）；//谷歌地图坐标
map_initialize（）；//加载映射
函数映射_初始化（）{
//谷歌地图选项
变量googleMapOptions={
中心：地图中心，//地图中心
缩放：17，//缩放级别，0=地球视图到更高的值
panControl:true，//启用平移控制
zoomControl:true，//启用缩放控制
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.SMALL//缩放控件大小
},
scaleControl:true，//启用缩放控制
mapTypeId:google.maps.mapTypeId.ROADMAP//google地图类型
};
map=new google.maps.map（document.getElementById（“google_-map”），googleMapOptions）；
}
});

当我使用[]将谷歌地图放大时，我只想让按钮在谷歌地图中试用

我的实际工作在这里：。。我只需要在我的谷歌地图中添加try it按钮，因为当我在地图中单击[]时，按钮不会显示

或者，如果有人知道如何将我的代码与下面的地理位置按钮集成，例如：。那会很感激的。

做一个类似的决定

将“按钮”和输入元素包装在

中：

将控件添加到映射：

代码片段：

/**
*CenterControl向地图添加一个控件，该控件在地图上重新居中
*所提供的坐标。
*此构造函数将控件DIV作为参数。
*@constructor
*/
功能中心控制（controlDiv，地图）{
//为控件边框设置CSS。
var controlUI=document.createElement（'div'）；
controlUI.style.backgroundColor='#fff'；
controlUI.style.border='2px solid#fff'；
controlUI.style.borderRadius='3px'；
controlUI.style.boxShadow='0 2px 6px rgba（0,0,0,3）'；
controlUI.style.cursor='pointer'；
controlUI.style.marginBottom='22px'；
controlUI.style.textAlign='center'；
controlUI.title='单击以重新居中地图'；
controlDiv.appendChild（controlUI）；
//为控件内部设置CSS。
var controlText=document.createElement（'div'）；
controlText.style.color='rgb（25,25,25）'；
controlText.style.fontFamily='Roboto，Arial，无衬线'；
controlText.style.fontSize='16px'；
controlText.style.lineHeight='38px'；
controlText.style.paddingLeft='5px'；
controlText.style.paddingRight='5px'；
controlText.innerHTML='中心地图'；
controlUI.appendChild（document.getElementById（'mapcontrol'））；
//设置click事件侦听器：只需将映射设置为Chicago。
/*controlUI.addEventListener（'单击'，函数（））{
赛特中心地图（芝加哥）；
}); */
}
var映射；
函数getLocation（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（showPosition）；
}否则{
x、 innerHTML=“此浏览器不支持地理位置。”；
}
}
功能显示位置（位置）{
$（'#lat'）.val（位置坐标纬度）；
$（'#lng'）.val（位置坐标经度）；
setCenter（新的google.maps.LatLng（position.coords.latitude，position.coords.longitude））；
//location.reload（）；
x、 innerHTML=“
纬度：”+position.coords.Latitude+

经度：“+position.coords.Longitude+”
”；
}
$（文档）.ready（函数（）{
var lng=$（“#lng”）.val（）；
var lat=$（“#lat”）.val（）；
var mapCenter=new google.maps.LatLng（lat，lng）；
//var mapCenter=new google.maps.LatLng（47.6145，-122.3418）；//谷歌地图坐标
map_initialize（）；//加载映射
函数映射_初始化（）{
//谷歌地图选项
变量googleMapOptions={
中心：地图中心，//地图中心
缩放：17，//缩放级别，0=地球视图到更高的值
panControl:true，//启用平移控制
zoomControl:true，//启用缩放控制
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.SMALL//缩放控件大小
},
scaleControl:true，//启用缩放控制
mapTypeId:google.maps.mapTypeId.ROADMAP//google地图类型
};
map=new google.maps.map（document.getElementById（“google_-map”），googleMapOptions）；
}
//创建DIV以保存控件并调用CenterControl（）
//构造函数传入这个DIV。
var centerControlDiv=document.createElement（'div'）；
var centerControl=新的centerControl（centerControlDiv，map）；
centerControlDiv.index=1；
map.controls[google.maps.ControlPosition.TOP\u CENTER].push（centerControlDiv）；
});
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#谷歌地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，
身体{
身高：100%；
保证金：0；
填充：0；
}

单击按钮获取您的坐标

试试看
<div id="mapcontrol">
  <p>Click the button to get your coordinates.</p>

  <button onclick="getLocation()">Try It</button>

  <input id="lat" value="47.6145" />
  <input id="lng" value="-122.3418" />
</div>

function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(document.getElementById('mapcontrol'));
}

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

    centerControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);