The following HTML code (refresh.html) is adapted from the Google Map Hello World example. Three radio buttons are added above the map that share the same name place. Each button has an onclick() methods defined that call the myredraw() function that is defined in the an external Javascript file named refreshlib.js that is in the same directory as the HTML file.
refresh.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Radio button markers</title> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> <script> // initMap function loads the default map and markers. function initMap() { var myLatLng = {lat: -25.363, lng: 131.044}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: myLatLng }); var marker = new google.maps.Marker({ position: myLatLng, map: map }); } </script> <!-- Load Google Maps API once page fully parsed --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCL2TgIlv88fAyVN3boa_OE-88NS01K6yM&callback=initMap"> </script> <!-- Link to external Javascript file --> <script type="text/javascript" src="refreshlib.js"></script> </head> <body> <!-- Three radio buttons named 'place' --> <input type="radio" name="place" value="1" checked onclick="myredraw(this);" /> 1<br> <input type="radio" name="place" value="2" onclick="myredraw(this);" /> 2<br> <input type="radio" name="place" value="3" onclick="myredraw(this);" /> 3 <!-- The HTML division within which the map is displayed --> <div id="map"></div> </body> </html>
The myredraw() function first creates an array that contains the HTML elements named 'place', i.e. the radio buttons. This array is looped though until the the checked element is located.
The value of the checked element is obtained (radio_value) and an if...else if...else clause used to
create a Google Maps LatLng object with a different coordinate pair.
The map division is then obtained, and the new zoom and map center set. Finally a new marker is added.
refreshlib.js
function myredraw() { // Get array of input objects named 'place' var radios = document.getElementsByName('place'); // Loop through the array of HTML elements named 'place' // and return the value of the checked radio button. for (var i = 0, length = radios.length; i < length; i++) { if (radios[i].checked) { // Get value of checked var radio_value = radios[i].value; // only one radio can be logically checked, don't check the rest break; } } // Conditional clause in now used to specify what occurs // depending on the value of the checked radio button. // In this case a Google Maps LatLng element is created with // different coordinates. if (radio_value == 1) { var myLatLng = {lat: -25.363, lng: 131.044}; } else if (radio_value == 2) { var myLatLng = {lat: 50, lng: 135}; } else { var myLatLng = {lat: 3, lng: 145}; } // map div ig obtained forom var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: myLatLng }); var marker = new google.maps.Marker({ position: myLatLng, map: map });
No comments:
Post a Comment