Skip to Content Area

Google Maps Custom Markers Cut Off by Canvas Tiles

I recently discovered that the custom markers on a Google Map I created (http://www.parkcirca.com/Parking) were being hidden behind the the map tiles (this is fixed now). If you look at the first image in the slideshow, you can clearly see the edge of the grid where the markers are being cut off.

We are using Google's latest Google Maps API Version 3.8. We discovered that this is caused by the new Canvas tiles that are used to optimize how Google Maps display. If you inspect elements, you can see that the markers are actually tile layers. If I turn off 'optimized' (see code below) the markers display correctly!

var point = new google.maps.Marker({
'position': position,
'map': this.options.map.construct,
'icon': marker_data.custom_icon,
'title': marker_data.title,
'optimized': false
});

What is interesting is that if you use the default markers, the tiles do NOT hide the default markers (code below).

var point = new google.maps.Marker({
'position': position,
'map': this.options.map.construct,
'title': marker_data.title
});

The reason for this, is because somehow Google seems to be creating the canvases differently for their default markers. When a marker overlaps a tile they make sure that part of it shows up on each adjacent canvas.

I inspected the elements and deleted certain tiles, and you can see that the other half of the default marker still is shows up on the adjacent tile.

Does anyone knows a better solution? Or can you point out something I am doing wrong that is causing Google Maps API to treat my custom markers inferior? Or is this just a known/new bug?


Let's Get Started!

If you like doing everything yourself you can instantly create a website and just ask our support team for technical assistance. But if you want professional help with strategy, design, and website setup, tell us about your needs and we'll schedule a call to create a project that fits your needs and budget.

 
Make a Website

I would like a:

Cutting-Edge Website
Beautiful New Brand
Professional Consultation
This field is required.
This field is required.
This field is required.
This field is required.
Send
Reset Form