Horizontal repeating Google Maps Marker on ImageMapType

<!DOCTYPE html>
<html>
  <head>
    <title>Image map types</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var moonTypeOptions = {
  getTileUrl: function(coord, zoom) {
      var bound = Math.pow(2, zoom);
      return 'full-out' +
          '/' + zoom + '/' + coord.x + '/' +
          (bound - coord.y - 1) + '.png';
  },
  tileSize: new google.maps.Size(256, 256),
  maxZoom: 6,
  minZoom: 1,
  radius: 1738000,
  name: 'Moon'
};

var moonMapType = new google.maps.ImageMapType(moonTypeOptions);


function initialize() {
  var myLatlng = new google.maps.LatLng(0, 0);
  var mapOptions = {
    center: myLatlng,
    zoom: 1,
    streetViewControl: false,
    mapTypeControlOptions: {
      mapTypeIds: ['moon']
    }
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
  map.mapTypes.set('moon', moonMapType);
  map.setMapTypeId('moon');

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

      </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

I have above code to render a custom large 16834 * 16834 image of 19 mb which is broken into tiles using gdal2tiles and gdal_translate. In short, I have all the corresponding tiles. The above code is working perfectly fine rendering image and different zoom levels. However, when I add marker, it is displayed multiple times at lower zoom level. I would like the marker not repeat itself horizontally.

Is there any way to avoid horizontal repeating markers? Currently, I'm using Leaflet.js which doesn't repeat marker horizontally as Google Maps library.

I want to use Google maps because of its stability and popularity.

I'm using Ubuntu 14.04 as OS.

Upvotes: 1

Answers (2)

Syed Ali

Reputation: 279

For those who has still this problem, have a look at my solution.

1- Set the maps zoom to (2) and add marker positions (lat,long) i.e

  var minZoomLevel = 2;
  map.setZoom(minZoomLevel);
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < result.length; i++){
        var latlng = new google.maps.LatLng(result[i].Lat, result[i].Lng);
        bounds.extend(latlng);
    });

2- Attach a event listener on zoom changed i.e

google.maps.event.addListener(map, 'zoom_changed', function() {
        if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
    });

3- Attach a center changed listener (This done the trick) i.e

google.maps.event.addListener(map, 'center_changed', function() 
{ 
   checkBounds(bounds);
}



function checkBounds(allowedBounds) {
    if(allowedBounds.contains(map.getCenter())) {
        return;
    }
    var mapCenter = map.getCenter();
    var X = mapCenter.lng();
    var Y = mapCenter.lat();

    var AmaxX = allowedBounds.getNorthEast().lng();
    var AmaxY = allowedBounds.getNorthEast().lat();
    var AminX = allowedBounds.getSouthWest().lng();
    var AminY = allowedBounds.getSouthWest().lat();

    if (X < AminX) {X = AminX;}
    if (X > AmaxX) {X = AmaxX;}
    if (Y < AminY) {Y = AminY;}
    if (Y > AmaxY) {Y = AmaxY;}

    map.setCenter(new google.maps.LatLng(Y,X));
}

Every time you change the center, it will check your points and restrict map to certain area . Setting zoom will show only one world tile, and check bound will restrict the horizontal scrolling, thats how your markers will show only one time in map, set zoom according to your condition that fits in !!

Upvotes: 0

Dr.Molle

Reputation: 117354

set the optimized-option of the markers to false

Upvotes: 2

Horizontal repeating Google Maps Marker on ImageMapType

Answers (2)

Related Questions