如何在按鈕上顯示谷歌地圖

Question

在這里我正在使用google map API，在頁面上加載時間圖工作正常，但是我的要求是當我單擊“定位我”按鈕時，時間圖應該顯示我嘗試了很多，但我卻做不到，任何人都請更新我的代碼我正在嘗試病房的早晨，但我沒有得到答案，我是開發領域的新手

  function addressinitialize() { var input = document.getElementById('searchTextField'); var autocomplete = new google.maps.places.Autocomplete(input); google.maps.event.addListener(autocomplete, 'place_changed', function () { var place = autocomplete.getPlace(); console.log('Place Object',place) console.log(place.geometry.location.lat()); console.log(place.geometry.location.lng()); $('#latitude').val(place.geometry.location.lat()); $('#longitude').val(place.geometry.location.lng()); }); } google.maps.event.addDomListener(window, 'load', addressinitialize); function initialize() { var input = document.getElementById('searchTextField'); var autocomplete = new google.maps.places.Autocomplete(input); google.maps.event.addListener(autocomplete, 'place_changed', function () { var place = autocomplete.getPlace(); console.log('Place Object',place) console.log(place.geometry.location.lat()); console.log(place.geometry.location.lng()); $('#latitude').val(place.geometry.location.lat()); $('#longitude').val(place.geometry.location.lng()); }); } google.maps.event.addDomListener(window, 'load', initialize); var lat = $('#latitude').val(); var lng = $('#longitude').val(); var map; var marker; var myLatlng = new google.maps.LatLng(lat,lng); var geocoder = new google.maps.Geocoder(); var infowindow = new google.maps.InfoWindow(); function mapinitialize(){ var mapOptions = { zoom: 18, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("myMap"), mapOptions); marker = new google.maps.Marker({ map: map, position: myLatlng, draggable: true }); geocoder.geocode({'latLng': myLatlng }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0]) { $('#address').val(results[0].formatted_address); $('#latitude').val(marker.getPosition().lat()); $('#longitude').val(marker.getPosition().lng()); infowindow.setContent(results[0].formatted_address); infowindow.open(map, marker); } } }); google.maps.event.addListener(marker, 'dragend', function() { geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0]) { $('#address').val(results[0].formatted_address); $('#latitude').val(marker.getPosition().lat()); $('#longitude').val(marker.getPosition().lng()); infowindow.setContent(results[0].formatted_address); infowindow.open(map, marker); } } }); }); } google.maps.event.addDomListener(window, 'load', mapinitialize); function myFunction() { var panPoint = new google.maps.LatLng(document.getElementById("latitude").value, document.getElementById("longitude").value); map.panTo(panPoint); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwuev6Dj8Xvo7fePYs2YJ8KA84xxBCIUo&libraries=places"></script> <input type="PickupAddress" class="form-control" name="PickupAddress" placeholder="Sublocality" id="searchTextField" autocomplete="on" runat="server" required="" data-msg-required="Please enter Pick up Address" aria-required="true" > &nbsp;&nbsp;&nbsp;&nbsp;<button onclick="myFunction();document.getElementById('map').style.visibility = 'visible'">Locate Me</button> <div class="col-md-8" style="padding-left: 0px;visibility:hidden" id="map"> <label>Locate your Flat-room-mate on the map:</label> <br><br><br> <div id="myMap" style="height:400px;width:100%;"></div> <br/> <div class="col-md-12" style="padding-left:0px;"> ADDRESS: <input id="address" name="address" type="text" style="width:100%;" class="form-control border" /> LATITUDE: <input type="text" name="latitude" id="latitude"> <br> LONGITUDE: <input type="text" name="longitude" id="longitude"> </div> <br> </div> 

Answer 1

進行visibility:hidden在map然后在單擊button visible ：

 function addressinitialize() { var input = document.getElementById('searchTextField'); var autocomplete = new google.maps.places.Autocomplete(input); google.maps.event.addListener(autocomplete, 'place_changed', function () { var place = autocomplete.getPlace(); console.log('Place Object',place) console.log(place.geometry.location.lat()); console.log(place.geometry.location.lng()); $('#latitude').val(place.geometry.location.lat()); $('#longitude').val(place.geometry.location.lng()); }); } google.maps.event.addDomListener(window, 'load', addressinitialize); function displayMap() { document.getElementById('myMap').style.display = "block"; initialize(); mapinitialize(); var panPoint = new google.maps.LatLng(document.getElementById("latitude").value, document.getElementById("longitude").value); map.panTo(panPoint); } function initialize() { var input = document.getElementById('searchTextField'); var autocomplete = new google.maps.places.Autocomplete(input); google.maps.event.addListener(autocomplete, 'place_changed', function() { var place = autocomplete.getPlace(); console.log('Place Object', place) console.log(place.geometry.location.lat()); console.log(place.geometry.location.lng()); $('#latitude').val(place.geometry.location.lat()); $('#longitude').val(place.geometry.location.lng()); }); } google.maps.event.addDomListener(window, 'load', initialize); var lat = "12.9536392"; var lng = "77.69512600000007"; var map; var marker; var myLatlng = new google.maps.LatLng(lat, lng); var geocoder = new google.maps.Geocoder(); var infowindow = new google.maps.InfoWindow(); function mapinitialize() { var mapOptions = { zoom: 18, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("myMap"), mapOptions); marker = new google.maps.Marker({ map: map, position: myLatlng, draggable: true }); geocoder.geocode({ 'latLng': myLatlng }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0]) { $('#address').val(results[0].formatted_address); $('#latitude').val(marker.getPosition().lat()); $('#longitude').val(marker.getPosition().lng()); infowindow.setContent(results[0].formatted_address); infowindow.open(map, marker); } } }); google.maps.event.addListener(marker, 'dragend', function() { geocoder.geocode({ 'latLng': marker.getPosition() }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0]) { $('#address').val(results[0].formatted_address); $('#latitude').val(marker.getPosition().lat()); $('#longitude').val(marker.getPosition().lng()); infowindow.setContent(results[0].formatted_address); infowindow.open(map, marker); } } }); }); } 

 #myMap { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwuev6Dj8Xvo7fePYs2YJ8KA84xxBCIUo&libraries=places"></script> <input type="PickupAddress" class="form-control" name="PickupAddress" placeholder="Sublocality" id="searchTextField" autocomplete="on" runat="server" required="" data-msg-required="Please enter Pick up Address" aria-required="true"> &nbsp;&nbsp;&nbsp;&nbsp; <button onclick="displayMap();">Locate Me</button> <div class="col-md-8" style="padding-left: 0px;" id="map"> <label>Locate your Flat-room-mate on the map:</label> <br><br><br> <div id="myMap" style="height:400px;width:100%;"></div> <br/> <div class="col-md-12" style="padding-left:0px;"> ADDRESS: <input id="address" name="address" type="text" style="width:100%;" class="form-control border" /> LATITUDE: <input type="text" name="latitude" id="latitude"> <br> LONGITUDE: <input type="text" name="longitude" id="longitude"> </div> <br> </div> 

Answer 2

簡化解決方案：

 $(document).ready(function() { var input = document.getElementById('searchTextField'); var autocomplete = new google.maps.places.Autocomplete(input); google.maps.event.addListener(autocomplete, 'place_changed', function() { var place = autocomplete.getPlace(); $('#latitude').val(place.geometry.location.lat()); $('#longitude').val(place.geometry.location.lng()); }); createMap(); }); function createMap() { var lat = $('#latitude').val(); var lng = $('#longitude').val(); var map; var marker; var myLatlng = new google.maps.LatLng(lat, lng); var geocoder = new google.maps.Geocoder(); var infowindow = new google.maps.InfoWindow(); var mapOptions = { zoom: 18, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("myMap"), mapOptions); marker = new google.maps.Marker({ map: map, position: myLatlng, draggable: true }); geocoder.geocode({ 'latLng': myLatlng }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0]) { $('#address').val(results[0].formatted_address); $('#latitude').val(marker.getPosition().lat()); $('#longitude').val(marker.getPosition().lng()); infowindow.setContent(results[0].formatted_address); infowindow.open(map, marker); } } }); google.maps.event.addListener(marker, 'dragend', function() { geocoder.geocode({ 'latLng': marker.getPosition() }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[0]) { $('#address').val(results[0].formatted_address); $('#latitude').val(marker.getPosition().lat()); $('#longitude').val(marker.getPosition().lng()); infowindow.setContent(results[0].formatted_address); infowindow.open(map, marker); } } }); }); } 

 html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } .mr10 { margin-right: 10px; } .search-panel { direction: ltr; overflow: hidden; text-align: center; position: relative; color: rgb(86, 86, 86); font-family: Roboto, Arial, sans-serif; user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 8px; border-bottom-right-radius: 2px; border-top-right-radius: 2px; -webkit-background-clip: padding-box; background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 40px; border-left: 0px; } .details-div .col-md-12 { text-align: center; } #panel { position: absolute; top: 5px; right: 1%; margin-left: -180px; z-index: 5; background-color: #ffb052; border: 1px solid #999; color: #444; font-family: Arial; } .hidden { display: none } .w100 { width: 100%; } .mt10 { margin-top: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwuev6Dj8Xvo7fePYs2YJ8KA84xxBCIUo&libraries=places"></script> <div id="panel"> <div class="search-panel"> <input type="PickupAddress" class="form-control mr10" name="PickupAddress" placeholder="Sublocality" id="searchTextField" autocomplete="on" runat="server" required="" data-msg-required="Please enter Pick up Address" aria-required="true"><button onclick="createMap();$('.details-div').removeClass('hidden')">Locate Me</button> <div class="details-div mt10 hidden"> <div class="col-md-12"> <div> ADDRESS: <input id="address" name="address" type="text" class="form-control border" /></div> <div class="mt10"> LATITUDE: <input type="text" name="latitude" id="latitude"></div> <div class="mt10"> LONGITUDE: <input type="text" name="longitude" id="longitude"></div> </div> <br> </div> </div> </div> <div id="myMap" style="height:100%;width:100%;"></div>