CODEWITHSUNDEEP
javascripthtmlgoogle-maps
Peter Pik
Peter Pik

Reputation: 11193

Creating own map from image and add pins

I'm looking for the best solution to create my own map. i have this image below, which i would like to be able to create some kind of map where you can scroll around it and zoom in. If possible i would also like to be able to drag pins on locations. is this possible to do this in google maps or am i looking at other solutions to do this? i do know when using such a small image it will become pixelated when zooming, but how can i achieve something like this?

enter image description here

Upvotes: 0

Views: 1509

Answers (1)

geocodezip
geocodezip

Reputation: 161324

One option is to use your image as a Ground Overlay, see the example in the documentation

code snippet:

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(
      'https://i.sstatic.net/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>

Upvotes: 1

Related Questions