Please Help
Using Notepad++
Add a "Show/Hide Map"
button to the button group. Code the button’s behavior as follows:
if you map is showing the button should say “Hide Map” and clicking
on it will render the map invisible, and change the button text to
“Show Map.” Clicking on “Show Map” will cause the map to reappear
and change the button text back to “Hide Map.” Also, rather than an
alert to indicate lack of geolocation support, put the appropriate
message in the location div and disable the "Show Map" button (or
hide the button group altogether). Caution: hiding/showing the map
will not work in Internet Explorer versions less than 11 (and won’t
work in 11 unless compatibility view is turned off).
Adding this capability to your page will require a bit of research
and can be accomplished in multiple ways (one set of hints:
hidden, setAttribute).
<html>
<head>
<title>Google Map</title>
<style>
.alignbutton {
text-align: center;
}
.button {
position: absolute;
top: 50%;
}
</style>
</head>
<body>
<h3 align="center"><i>Unlock the Map by clicking Show
Button</i></h3>
<h3 align="center"><i>Hide the Map by clicking Hide
Button</i></h3>
<div class="alignbutton">
<button id="hide" onclick="hideMap()">Hide the
Map</button>
<button id="show" style="display:none"
onclick="showMap()">Show the Map</button>
</div>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function showMap(){
$("#show").hide();
$("#googleMap").show();
$("#hide").show();
}
function hideMap(){
$("#hide").hide();
$("#googleMap").hide();
$("#show").show();
}
function myMap() {
var googlemap= {
center:new google.maps.LatLng(0,0),
zoom:5,
};
var map = new
google.maps.Map(document.getElementById("googleMap"),googlemap);
}
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>
Use can give the latitude and longitude of the location you want in place of 0,0 in myMap() function.
Please Help Using Notepad++ Add a "Show/Hide Map" button to the button group. Code the button’s behavior as foll...