Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom Map Types: repeating maps and markers. How to adding padding to map?

With the Google Maps API (v3) I've created a custom map type for a fictional game world. By default, maps, even custom map types, repeat horizontally (see image below).


enter image description hereLarger Image here


Is it possible to keep the map from repeating horizontally? For my map, it does not represent a planet or spherical world, so having it repeat horizontally forever doesn't make sense at all. I have figured out how to simply not load tiles for the repeated maps on the left and right like so:

enter image description hereLarger Image here


HOWEVER, when you create markers, the markers still show up for all the repeated maps:

enter image description hereLarger Image here

Is it possible to keep the markers from repeating? Or is it possible to keep the map from repeating at all? That way I don't have to deal with markers repeating?


Work Around: Limit Panning beyond the Map Bounds I've read various work-arounds that discuss simply limiting how far the user can pan to the left or right. This won't work for me because I have to allow the user to zoom all the way out and view the entire map at once. If they zoom all the way out, repeated markers are still visible, which is unacceptable.


Is it possible to adding a bunch of padding to the map? That way there is a large amount of space between the maps:

enter image description hereLarger Image here

If I was able to add enough padding, then limiting the panning would work for me, because any repeated markers could be pushed far enough away by the padding that the user would never see them.


Finally my code, pretty simple:

(note: the map tile images I'm using are not available online yet)

<!DOCTYPE html>
<html style='height: 100%'>
    <head>
        <link rel="stylesheet" type="text/css" href="normalize.css" />
        <style>
            html, body { height: 100%;}
            #map_canvas { height: 1000px;}
        </style>


    </head>
    <body style='height: 100%'>
        <div id="map_canvas"></div>

        <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type='text/javascript'>

            var options =
            {
                getTileUrl: function(coord, zoom)
                {
                    // Don't load tiles for repeated maps
                    var tileRange = 1 << zoom;
                    if ( coord.y < 0 || coord.y >= tileRange || coord.x < 0 || coord.x >= tileRange )
                        return null;

                    // Load the tile for the requested coordinate
                    var file = 'images/zoom' + zoom + '/tile_' + zoom + '_' + (coord.x) + '_' + (coord.y) + '.jpg';

                    return file;
                },
                tileSize: new google.maps.Size(256, 256),
                minZoom: 1,
                maxZoom: 9,
                radius: 1738000, // I got this from an example in the api, I have no idea what this does
                name: 'Map',
            };

            var mapOptions =
            {
                center: new google.maps.LatLng(0,0),
                zoom: 2,
                backgroundColor: '#000',
                streetViewControl: false,
                mapTypeControl: false
            };

            var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
            var mapType = new google.maps.ImageMapType(options);
            map.mapTypes.set('map', mapType);
            map.setMapTypeId('map');

            var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(0,0),
                    map: map,
                    title: "Test"
            });

            </script>
    </body>
</html>
like image 380
Jake Wilson Avatar asked Nov 05 '12 06:11

Jake Wilson


2 Answers

In answer to the question: Is it possible to keep the markers from repeating?

Yes.

From Google Maps JavaScript API V3 Reference (3.19), if you set the markerOptions property optimized to false for your marker, it does not repeat but only shows up on the center map.

See: https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions

So, in your code, I would modify var marker as such (adding optimized: false):

var marker = new google.maps.Marker({ position: new google.maps.LatLng(0,0), map: map, title: "Test" optimized: false });

According to Google's docs (I've added the bolding),

Optimization renders many markers as a single static element. Optimized rendering is enabled by default. Disable optimized rendering for animated GIFs or PNGs, or when each marker must be rendered as a separate DOM element (advanced usage only).

I set optimized to false and then looked through the page to find the id (or at least class) associated with my markers. I was going to make the "extra" markers non-visible. It turns out the elements are there but have no id or class. Just as I was contemplating other ways to identify them using jQuery, I happened to look up at my "map" and realized the "extra" markers were gone! ☺

A word of caution: based on Google's docs, I suspect this behavior (the "extra" markers not showing up) may be an unintended "feature".

Cheers, Bruce.

like image 98
Bruce A. Knack Avatar answered Sep 21 '22 14:09

Bruce A. Knack


Looks to me like you just need to change your starting zoom and min zoom limit.

Even google runs into repeats when you are at zoom level 1, but it doesn't let you zoom out lower than that.

Just add minZoom and maxZoom properties to your options object to limit the zooming.

like image 38
Adam Avatar answered Sep 23 '22 14:09

Adam