Ground Overlays

by timhuang

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>

CSS

/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

JavaScript

// This example uses a GroundOverlay to place an image on the map 
// showing an antique map of Newark, NJ. 

var historicalOverlay;

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 16,
        center: {
            lat: 24.305288018536345,
            lng: 120.72661597158344
        }
    });
    var imageBounds = {
        north: 24.30802066780279,
        south: 24.30290103873058,
        east: 120.7325680672775,
        west: 120.7225817773344
    };
    historicalOverlay = new google.maps.GroundOverlay('https://diary.tw/a-map.jpg', imageBounds, {opacity: 0.4});
    historicalOverlay.setMap(map);
    var marker = new google.maps.Marker({
      position:  {lat: 24.3047, lng: 120.7242},
      map: map,
      title: '台開積木概念館'
    });
    var marker2 = new google.maps.Marker({
      position:  {lat: 24.3067862, lng: 120.7297210},
      map: map,
      title: '入口'
    });    
    
}