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...