Eigene Karte aus Bild erstellen und Pins hinzufügen

Question

Ich suche die beste Lösung, um meine eigene Karte zu erstellen. Ich habe dieses Bild unten, das ich in der Lage sein möchte, eine Art Karte zu schaffen, wo Sie herum scrollen und hineinzoomen können. Wenn möglich, würde ich auch in der Lage sein, Stifte auf Positionen zu ziehen. Ist dies in Google Maps möglich, oder suche ich nach anderen Lösungen, um dies zu tun? Ich weiß, wenn man ein so kleines Bild verwendet, wird es beim Zoomen verpixelt, aber wie kann ich so etwas erreichen?

Answer 1

Eine Möglichkeit ist, Ihr Image als Ground Overlay zu verwenden, finden Sie in der example in the documentation

Code-Schnipsel:

var historicalOverlay; 
 

 
function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 15, 
 
    center: {lat: 40.740, lng: -74.18} 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    position: map.getCenter(), 
 
    map: map 
 
    }); 
 
    var imageBounds = { 
 
    north: 40.773941, 
 
    south: 40.712216, 
 
    east: -74.12544, 
 
    west: -74.22655 
 
    }; 
 

 
    historicalOverlay = new google.maps.GroundOverlay(
 
     'http://i.stack.imgur.com/0mgx2.jpg', 
 
     imageBounds); 
 
    historicalOverlay.setMap(map); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

html, body { 
 
    height:100%; 
 
    width: 100%; 
 
} 
 
#mapContainer { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-bottom: 2.5%; 
 
    margin-top: 2.5%; 
 
} 
 

 
#map { 
 
    height: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="mapContainer"> 
 
    <div id="map"></div> 
 
</div>