In this example, we'll use the target property to move the map around in our web page:
Working from the previous example, add a second
<div>tag for the map and a<button>tag after the<input>element we added for thebindTo()example. Change the class of both<div>tags tohalf-map—this class tells the<div>tag to only take up to 50 percent of the width of the page. When the user clicks the button, we'll move the map between the two<div>tags:<div id="map" class="half-map"></div> <div id="map2" class="half-map"></div> <input type="checkbox" id="visible" checked> Toggle Layer Visibility <button onclick="changeTarget();">Change Target</button>
Now, we can add a function to the end of the
<script>element that contains our new code, right after the code we added in thebindTo()example. The function will first callmap.getTarget()to get the ID of the element that the map...