Artifacts in Gmaps

Question

I'm working on embedding Google Maps with gMaps.js .

Basicly all the functions are working, but on some places the maps gives artifects.

Screenshot (Check Zoom control and Infowindow)

The following code is executed:

  var map = new GMaps({
        div: '#map_canvas',
        lat: 51.594664,
        lng: 4.778375,
        zoom: 16,
        zoomControl: true,
  scaleControl: false,
  scrollwheel: false,
  disableDoubleClickZoom: true,
    });


var image = new google.maps.MarkerImage(
    '[image-link]',
    new google.maps.Size(100,109),    // size of the image
    new google.maps.Point(0,0), // origin, in this case top-left corner
    new google.maps.Point(5, 25)    // anchor, i.e. the point half-way along the bottom of the image
);

map.addMarker({
    lat: 51.59554,
    lng: 4.789006,
    title: 'TEST',
    icon: image,
    infoWindow: {
        content: '<h2>TEST</h2><p>HTML Content</p>'
    }
});

var styles = [
  {
    "featureType": "landscape.man_made",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "visibility": "simplified" },
      { "color": "#21bbe2" }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road",
    "stylers": [
      { "visibility": "on" },
      { "hue": "#ff0011" },
      { "color": "#9e8baa" }
    ]
  }
]
  map.addStyle({
    styledMapName:"Styled Map",
    styles: styles,
    mapTypeId: "map_style"  
});

map.setStyle("map_style")

I can't find anything about this problem. I tried removing all parts of the code seperately, but that didn't work. It happens in both Chrome and Firefox. Any solutions?

score 2 · Accepted Answer · answered Jul 09 '13 at 09:47

This is almost always caused by CSS in your page that is overriding the styles used inside the map. I will bet that if you load the same map into a page that doesn't have your CSS in it, everything will display fine.

Of course now the problem will be to determine what bit of CSS is messing it up. One thing you could do would be to use the DOM inspector in Chrome (or use Firebug in Firefox, or whatever DOM inspector you like). Select one of the elements that has the artifacts, and then check the Styles panel for that element.

If my guess is right, you will see a style entry from your own CSS affecting the Maps API element.

Artifacts in Gmaps

1 Answers1