Canvas Tiles Cut Off Custom Markers

[Chadwick Meyer]

I recently discovered that the custom markers on my maps were being
hidden behind the Google Maps tiles. You can clearly see the edge of
the grid where the markers are being cut off.
https://skitch.com/gutensite/8n8n5/find-parking-park-circa-mobile-app-for-peer-to-peer-shared-parking
(original page, that is now fixed: http://www.parkcirca.com/Parking)

I am using Google's latest Google Maps API Version: 3.8

To my surprise not many have complained about this recently (I looked
extensively). I discovered that this is caused by the new Canvas tiles
that are used to optimize the page. 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).
https://skitch.com/gutensite/8n8g3/find-parking-park-circa-mobile-app-for-peer-to-peer-shared-parking

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

But the reason for this, is because somehow Google seems to be adding
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 tile.
https://skitch.com/gutensite/8n88g/find-parking-park-circa-mobile-app-for-peer-to-peer-shared-parking

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.
https://skitch.com/gutensite/8n8e8/find-parking-park-circa-mobile-app-for-peer-to-peer-shared-parking

So I guess the question is, am I doing something wrong that is causing
Google Maps API to treat my custom markers inferior? Or is this a bug
in the API that no one has reported yet?

[geoco...@gmail.com]

On Feb 16, 10:09 am, Chadwick Meyer <chadw...@gutensite.com> wrote:
> I recently discovered that the custom markers on my maps were being
> hidden behind the Google Maps tiles. You can clearly see the edge of

> the grid where the markers are being cut off.https://skitch.com/gutensite/8n8n5/find-parking-park-circa-mobile-app...

> (original page, that is now fixed:http://www.parkcirca.com/Parking)
>
> I am using Google's latest Google Maps API Version: 3.8

Is it this issue in the issue tracker?
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3921

If so you might want to "star" it.

-- Larry

>
> To my surprise not many have complained about this recently (I looked
> extensively). I discovered that this is caused by the new Canvas tiles
> that are used to optimize the page. 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).https://skitch.com/gutensite/8n8g3/find-parking-park-circa-mobile-app...

>
> var point = new google.maps.Marker({
>         'position': position,
>         'map': this.options.map.construct,
>         'title': marker_data.title
>
> });
>
> But the reason for this, is because somehow Google seems to be adding
> 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 tile.https://skitch.com/gutensite/8n88g/find-parking-park-circa-mobile-app...

>
> 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.https://skitch.com/gutensite/8n8e8/find-parking-park-circa-mobile-app...

[Ryan Jones]

Hey Chad,

I had the exact same problem (I'm doing it with a ruby on rails gem, but the output was the same). This is the code I was using:

      marker.picture({ :picture => "/assets/home.png",

                       :width => "32",

                       :height => "37"

                     })

gmaps JSON: "picture":"/assets/home.png","width":"32","height":"37","lat":53.5402,"lng":-113.628

This ended up with the markers cut in half, and/or missing chunks due to canvas (I noticed it the most when I zoomed out), it didn't matter if optimized was true or false. I changed the code to this:

      marker.picture({ :picture => "/assets/home.png",

                       :width => 32,

                       :height => 37

                     })

gmaps JSON: "picture":"/assets/dayhome.png","width":32,"height":37,"lat":53.5402,"lng":-113.628

Once I removed the quotes and allowed js to treat it as a number everything worked perfect. And just for the record, I had to define the width and the height of the pin, otherwise it would default to the google maps pin size and cut off some of my marker.

I noticed if I shrunk down my pin to the same size as the google pin it worked just fine and I didn't end up with the canvas chunks. There must be some oddities and/or defaults happening behind the scenes when a width and height is passed in as a string.

Hopefully it saves you some grief in the future :)!

Thanks,

Ry

PS. First google groups post, I've attached some example pictures, hopefully they come through.

[gugguson]

Hello Ryan.

I'm also using the Rails plugin and have exactly the same problem with custom markers being cutoff.

I'm defining the markers in the model as the example code is and this is what I have:

  def gmaps4rails_marker_picture

    {

    "width" => 32,

    "height" => 37,

    "picture" => "/images/" + case

                                when !self.customer_id

                                  "unknown.png"

                                when self.customer.customer_type == 2

                                  "fillingstation2.png"

                                else

                                  "company.png"

                              end

    }

  end

I had the numbers in quotes as you but removed them and I get it with quotes in the html.  In your code you had stars instead but that isn't working.  Am I misanderstanding something?

Johann

[Andrew Leach]

On 2 April 2012 14:27, gugguson <gudbja...@gmail.com> wrote:
> Hello Ryan.
>
> I'm also using the Rails plugin and have exactly the same problem with
> custom markers being cutoff.

There's also this:
http://stackoverflow.com/questions/9934979/custom-icons-on-google-map-not-drawing-correctly/

...but so far, no-one has seen fit to include a link. Can't debug screenshots.

[Ryan Jones]

Hi Gugg,

Chances are you aren't converted it to JSON correctly. The outputted  JSON has to look like this: "picture":"/assets/dayhome.png","width":32,"height":37,"lat":53.5402,"lng":-113.628 

Here's snippet of the code I'm using (use it in your controller):

  def gmap_prepare_homes(homes)

    homes.to_gmaps4rails do |home, marker|

      marker.title home.name

      marker.picture({ :picture => "/assets/dayhome.png",

                       :width => 32,

                       :height => 37

                     })

    end

  end

I don't actually use the built in method  gmaps4rails_marker_picture which might be outputting the strings (and it looks like it does, here:  http://rubydoc.info/gems/gmaps4rails/0.7.5/Gmaps4rails/ActsAsGmappable/InstanceMethods )

If the numbers are in quotes you're going to have a bad time :(.

Ry

[gugguson]

Hello and thanks for your help.

I think the problem might be that I'm defining the markers in a model in Rails and it automaticly wraps the numbers for width and height with quotes.  I can't seem to be able to go around that.

My page is for a client behind a firewall so I can't provide a link.  Here is an example of map creation and some markers within the html:

function gmaps4rails_init() {
        Gmaps4Rails.map_options.auto_adjust = false;
      Gmaps4Rails.map_options.zoom = 6;
      Gmaps4Rails.map_options.center_latitude = 65;
      Gmaps4Rails.map_options.center_longitude = -19;
      Gmaps4Rails.initialize();
      Gmaps4Rails.markers = [{"description": "removed", "title": "xxx", "lng": "-23.48224639892578", "lat": "65.76090240478516", "width": "32", "height": "37", "picture": "/images/unknown.png", "loc_id": "7", "data2": "xxx"},
      {"description": "removed", "title": "xxxx", "lng": "-19.567293167114258", "lat": "65.59142303466797", "width": "32", "height": "37", "picture": "/images/unknown.png", "loc_id": "8", "data2": "xxxx"},
      .....

Also I tried to provide optimized=false but I read somewhere that it's not working.

Johann

On Monday, April 2, 2012 2:45:47 PM UTC, Andrew Leach wrote:

[Andrew Leach]

On 2 April 2012 17:28, gugguson <gudbja...@gmail.com> wrote:
>
> My page is for a client behind a firewall so I can't provide a link.  Here
> is an example of map creation and some markers within the html:

If it's behind a firewall then your client should have a Premier
Client ID and you should be able to leverage that for support from
Google.

If you are using the free API, the map must be public.

[gugguson]

Hello Ryan.

Thank you very much for your help.

I'm trying to implement your code within my controler.  I however always get marker as null.  Is there anything I have to do beforehand so it will work?

Johann