Original Url: http://forum-en.guildwars2.com/forum/community/api/GW2-google-dynamic-map-duplicate-problems

Lea.6194:

Hi!

I’m trying to create a web page with a dynamic map of Tyrie with markers on it. I’m using google map … but I noticed that markers and/or map is duplicate on the side of the google map. It’a like an infinite loop when you pan the page.

exemple on a well known map, I have the same problem :
http://gw2cartographers.com/

I’ve found a solution (on this forum) for hidding map but not markers …. Does someone know how to deal with this problem ?

Thanks in advance :-)

smiley.1438:

Theres actually no way to prevent the horizontal wrapping of the markers (and other overlays) – i’ve googled like 500 pages on that topic and didn’t yet find a solution. However, it is at least possible to lock the horizontal and vertical panning of the map, have a look at this: https://github.com/codemasher/gw2api-tools/blob/master/js/gw2location-gmaps.js#L88

(but anyway, i’d also be happy if someone has a handy solution to prevent overlay wrapping in GMaps)

Lea.6194:

Thank you for your answer :-).
I’m having a look at leaflet.com … is there the same problem with leaflet ?

smiley.1438:

No, leaflet has native support for custom maps and therefore also a nice bounding feature. But on the other hand it has still a lot of bugs and a lot of features are still missing, or only available as sometimes incomplete/undocumented/buggy plugins. So you’d best choose the map library based on the features your map should provide.

For example: i chose Google Maps for the location tracker because of it’s native support for SVG icons and stuff and i chose leaflet for the Wikimaps project because of it’s bounding features (and of course because it’s open source)

Lea.6194:

Thanks again :-)

I’m really new in javascript so your code is hard to transpose for me. I write js code a way more simple (newbie style? ^^) (but surely less optimized) …. if it’s not too long for you, is it possible that you guide me to introduce the mapobject in my code ?

Here is my function Initialize :

function initialize(){

gmap = new google.maps.Map(document.getElementById(“gw2map”) , {
zoom: 3,
minZoom: 2,
maxZoom: 7,
center: new google.maps.LatLng(0, 0),
streetViewControl: false,
geocode: false,
mapTypeId: “1”,
mapTypeControlOptions: {
mapTypeIds: [“1”]
}
});


get_tile = function(coords,zoom){
if(coords.y < 0 || coords.x < 0 || coords.y >= (1 << zoom) || coords.x >= (1 << zoom)){
return “./black.png”;
}
return “https://tiles.guildwars2.com/”gmap.getMapTypeId()“/1/”+zoom+"/“coords.x”/“coords.y”.jpg";
}

tile_size = new google.maps.Size(256,256);

tyria = new google.maps.ImageMapType({
maxZoom: 7,
alt: “Tyrie”,
name: “Tyrie”,
tileSize: tile_size,
getTileUrl: get_tile
});

gmap.mapTypes.set(“1”,tyria);


}

smiley.1438:

Ok, i’ve added some comments to the simple Google Maps example i created ages ago, so that it should be a good point to start from – i think it’ll answer most of your questions:

https://github.com/codemasher/gw2api-tools/blob/master/examples/gw2maps-gmaps-simple.html
(may look a bit messy, i forgot to uncheck “reformat code on commit” in phpstorm -.-)

Lea.6194:

Thanks for the comments but my simple map is working fine, I don’t want something complex.

I’ve tried to extract mapobject to create the object alone and use it after. Without too much options because I want only the map of Tyria.

But that doesn’t work (white page)…
(and I use mapobject.map.getMapTypeIdfor the get_tile function)

mapobject = {
continent: 1,
map: new google.maps.Map(document.getElementById(“gw2map”), {
zoom: 3,
minZoom: 1,
maxZoom: 7,
center: new google.maps.LatLng(0,0),
streetViewControl: false,
panControl: true,
zoomControl: true,
mapTypeId: “1”
mapTypeControlOptions: {
mapTypeIds: [“1”]
}
}) ,
layers: {},
markers: {},
popups: []
};

smiley.1438:

The commented example isn’t too complex and you should be able to strip a few lines of code so that you get what you want – just play a bit with it. I can’t teach you in Javascript – i assume that you at least know the basics of it.

Lea.6194:

I understand the page that’s not the matter
But as I want something very simple, I don’t want to write a compex and parametric code ;-)
Nevermind, thanks for your help, I’ll manage to find my error :-)

smiley.1438:

FYI: the code example i provided is just a slight modification of Google’s example for custom map layers. I have added 2 functions to translate latlng coordinates to pixel values and vice versa which is required if you want to draw any stuff on a GW2 map and this already makes about 1/3 of the code. Then i’ve addded a second imagemap layer to draw tyria and the mists and finally, i changed the function initialize() which you can find in most of Googles examples to a self invoking function to get rid of the <body onload="..."> because inline events are really bad practice (see: https://twitter.com/guypod/status/390140202393432065)
I’d also recommend you this interesting blogpost for reading: http://sparecycles.wordpress.com/2008/06/29/advanced-javascript/

Lea.6194:

ok, I will have a look at your links, thanks

It was just missing a comma on the mapobject code above .. my page is working, just have to adjust the value of allowed panning (which is too big when I’m zoom out)

I really would like that it should be impossible to pan outside of the map :-)
edit solved

Then, I’ll try to optimize the code ^^