Advertisement
dammarpol

InitializeMap with Overlay

Sep 2nd, 2014
264
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var overlay;
  2. USGSOverlay.prototype = new google.maps.OverlayView();
  3. var info = new google.maps.InfoWindow();
  4.  
  5. function initialize() {
  6.   var mapOptions = {
  7.     zoom: 0,
  8. disableDefaultUI: true,
  9. streetViewControl: false,
  10. navigationControl: false,
  11. zoomControl: false,
  12. scaleControl: false,
  13. scrollwheel: false,
  14. disableDoubleClickZoom: true,
  15.     center: new google.maps.LatLng(28.70, -127.50),
  16.     mapTypeId: google.maps.MapTypeId.ROADMAP
  17.    
  18.   };
  19.  
  20.   var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  21.  
  22. var marker = new google.maps.Marker({
  23.     position: map.getCenter(),
  24.     map: map
  25.   });
  26.  
  27.   var swBound = new google.maps.LatLng(62.281819, -150.287132);
  28.   var neBound = new google.maps.LatLng(62.400471, -150.005608);
  29.   var bounds = new google.maps.LatLngBounds(swBound, neBound);
  30.     var allowedBounds = new google.maps.LatLngBounds(
  31.                   new google.maps.LatLng(28.70, -127.50),
  32.                   new google.maps.LatLng(48.85, -55.90)
  33.                 );
  34.                
  35.                 var boundLimits = {
  36.                     maxLat : allowedBounds.getNorthEast().lat(),
  37.                     maxLng : allowedBounds.getNorthEast().lng(),
  38.                     minLat : allowedBounds.getSouthWest().lat(),
  39.                     minLng : allowedBounds.getSouthWest().lng()
  40.                 };
  41.  
  42.                 var lastValidCenter = map.getCenter();
  43.                 var newLat, newLng;
  44.                 google.maps.event.addListener(map, 'center_changed', function() {
  45.                     center = map.getCenter();
  46.                     if (allowedBounds.contains(center)) {
  47.                        
  48.                         lastValidCenter = map.getCenter();
  49.                         return;
  50.                     }
  51.                     newLat = lastValidCenter.lat();
  52.                     newLng = lastValidCenter.lng();
  53.                     if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){
  54.                         newLng = center.lng();
  55.                     }
  56.                     if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){
  57.                         newLat = center.lat();
  58.                     }
  59.                     map.panTo(new google.maps.LatLng(newLat, newLng));
  60.                    
  61.                 });
  62.  
  63.   var srcImage = 'assets/pics/floorImage.jpg';
  64.  
  65.   overlay = new USGSOverlay(bounds, srcImage, map);
  66. }
  67.  
  68. function loadScript() {
  69.       var script = document.createElement('script');
  70.       script.type = 'text/javascript';
  71.       script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
  72.           'callback=initialize';
  73.       document.body.appendChild(script);
  74.     }
  75.    
  76. window.onload = loadScript;
  77. function USGSOverlay(bounds, image, map) {
  78.  
  79.       this.bounds_ = bounds;
  80.       this.image_ = image;
  81.       this.map_ = map;
  82.  
  83.       this.div_ = null;
  84.  
  85.       this.setMap(map);
  86.     }
  87.  
  88.     USGSOverlay.prototype.onAdd = function() {
  89.  
  90.       var div = document.createElement('div');
  91.       div.style.borderStyle = '0';
  92.       div.style.borderWidth = '100%';
  93.       div.style.position = 'b';
  94.  
  95.       var img = document.createElement('img');
  96.       img.src = this.image_;
  97.       img.style.width = '800px';
  98.       img.style.height = '500px';
  99.       img.style.position = 'absolute';
  100.       div.appendChild(img);
  101.  
  102.       this.div_ = div;
  103.  
  104.       var panes = this.getPanes();
  105.       panes.overlayLayer.appendChild(div);
  106.     };
  107.  
  108.     USGSOverlay.prototype.draw = function() {
  109.  
  110.       var overlayProjection = this.getProjection();
  111.  
  112.       var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  113.       var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
  114.  
  115.       var div = this.div_;
  116.       div.style.left = sw.x + '10';
  117.       div.style.top = ne.y + '10';
  118.       div.style.width = (ne.x - sw.x) + '';
  119.       div.style.height = (sw.y - ne.y) + '50';
  120.     };
  121.  
  122.     USGSOverlay.prototype.onRemove = function() {
  123.       this.div_.parentNode.removeChild(this.div_);
  124.       this.div_ = null;
  125.     };
  126.    
  127.  
  128.     google.maps.event.addDomListener(window, 'load', initialize);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement