"Google API show hide"
Bootstrap 3.0.0 Snippet by robinlieson92

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"> </script> <script type="text/javascript" async defer src="https://maps.googleapis.com/maps/api/js?key=aaa&libraries=places&callback=initMap"></script> </head> <body> <div class="container"> <div class="row"> <button type="button" name="button" id="button">Click Me!</button> </div> <div class="row" id="test"> <input id="searchInput" class="controls" type="text" placeholder="Enter a location"> <div id="map"> </div> <ul id="geoData"> <li>Full Address: <span id="location"></span></li> <li>Postal Code: <span id="postal_code"></span></li> <li>Country: <span id="country"></span></li> <li>Latitude: <span id="lat"></span></li> <li>Longitude: <span id="lon"></span></li> </ul> </div> </div> </body> </html>
hr { margin-top: 1px !important; margin-bottom: 1px !important; border-top : 1px solid #3c8dbc !important; } /*#test { display: none; }*/ #map { width: 100%; height: 200px; display: none; } #searchInput { display: none; } .controls { margin-top: 10px; border: 1px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 32px; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } #searchInput { background-color: #fff; font-family: Roboto; font-size: 15px; font-weight: 300; margin-left: 12px; padding: 0 11px 0 13px; text-overflow: ellipsis; width: 50%; } #searchInput:focus { border-color: #4d90fe; }
$(document).ready(function() { //The page has loaded. // $("#map").hide(); //Hide the location div. $("#button").click(function() { //if user clicked on location link. // if(document.getElementById('map').style.display == 'block'){ // document.getElementById('map').style.display = 'none'; $("#map").toggle(); $('#searchInput').show(); // } else { // document.getElementById('map').style.display = 'block'; google.maps.event.trigger(map, 'resize'); // } }); }); function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat: -33.8688, lng: 151.2195}, zoom: 13 }); var input = document.getElementById('searchInput'); map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); var autocomplete = new google.maps.places.Autocomplete(input); autocomplete.bindTo('bounds', map); var infowindow = new google.maps.InfoWindow(); var marker = new google.maps.Marker({ map: map, anchorPoint: new google.maps.Point(0, -29) }); autocomplete.addListener('place_changed', function() { infowindow.close(); marker.setVisible(false); var place = autocomplete.getPlace(); if (!place.geometry) { window.alert("Autocomplete's returned place contains no geometry"); return; } // If the place has a geometry, then present it on a map. if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); } marker.setIcon(({ url: place.icon, size: new google.maps.Size(71, 71), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 34), scaledSize: new google.maps.Size(35, 35) })); marker.setPosition(place.geometry.location); marker.setVisible(true); var address = ''; if (place.address_components) { address = [ (place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '') ].join(' '); } infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); infowindow.open(map, marker); //Location details for (var i = 0; i < place.address_components.length; i++) { if(place.address_components[i].types[0] == 'postal_code'){ document.getElementById('postal_code').innerHTML = place.address_components[i].long_name; } if(place.address_components[i].types[0] == 'country'){ document.getElementById('country').innerHTML = place.address_components[i].long_name; } } document.getElementById('location').innerHTML = place.formatted_address; document.getElementById('lat').innerHTML = place.geometry.location.lat(); document.getElementById('lon').innerHTML = place.geometry.location.lng(); }); }

Related: See More


Questions / Comments: