bradcornford/Googlmapper

Offset the label from the marker ?

t-prod opened this issue · 12 comments

Hi,

Thanks for your package, do you know how can we offset the label from the marker ?
I'm using informationWindow like this but it doesn't works :

Mapper::informationWindow(
                $client->latitude,
                $client->longitude,
                $html,
                [
                    'maxWidth'=> 350,
                    'autoClose' => true,
                    'label' => PHP_EOL.PHP_EOL.$client->title,
                    'markers' => [
                        'icon' => [
                            'labelOrigin' => [-100, -100], // nope
                            'origin' => [-50, -50], // nope
                        ]
                    ]
                ]
            );

See the example above :
image

Thanks for your help,

Regards

Hi there,

That should be how it works. I'll have to take a look at this to see if there's a issue. What version are you using?

Can you try removing the markers array item, and putting the icon array at the base of the array.

Hi,

Thanks for your answer, I'm using :

"cornford/googlmapper": "^3.3",

Change to this but it doesn't works :

Mapper::informationWindow(
                $client->latitude,
                $client->longitude,
                $html,
                [
                    'maxWidth'=> 350,
                    'autoClose' => true,
                    'label' => $client->title,
                    'icon' => [
                        'origin' => [-5, -10],
                    ]
                ]
            );

image

Other thing, do you know what changes to do to show infowindows on mouseover ?
This script worked years ago on one of my web app :

'eventMouseOver' => 'new google.maps.event.trigger(maps[0].markers['.$cpt.'], "click");',
'eventMouseOut' => 'maps[0].infowindows['.$cpt.'].close();',

Close still works but not mouseover (triggered to be a click)

Okay, i've spotted the issue with the icon, it's in two parts, the code wasn't adding the correct configuration for the icon, but also, Google only allow you to set label origin's on custom icons, The following should now work in current version v3.3.2:


Mapper::informationWindow(
                $client->latitude,
                $client->longitude,
                $html,
                [
                    'maxWidth'=> 350,
                    'autoClose' => true,
                    'label' => PHP_EOL.PHP_EOL.$client->title,
                    'markers' => [
                        'icon' => [
                           'url' => 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi-dotless2.png',
                            'labelOrigin' => [-10, -10],
                            'origin' => [0, 0], 
                        ]
                    ]
                ]
            );

As for the mouse events, you should be able to call as follows:

'eventMouseOver' => 'maps[0].infowindows['.$cpt.'].open(maps[0], this);',
'eventMouseOut' => 'maps[0].infowindows['.$cpt.'].close();',

Hi and thanks for the fix. Mouse events working well thanks for this ;)
Unfortunately I do not have any difference with label position it's still centered and above the marker like this :

image

If it's possible the have the label below the marker it woud be great ;)

I use the same code you give me above.

Did you update the package, and re-publish the assets?

Yes, you should be able to move the label origin below using the following:

 'labelOrigin' => [0, 10],

Yep, I already try this but nothing changes :

image

As you can see I have updated the package and redo a :

php artisan vendor:publish --provider="Cornford\Googlmapper\MapperServiceProvider" --tag=googlmapper

Icon array is missing and I think it's the problem. What do you think ?

OK I figured it out by analyzing the source code. The markers array is not necessary. The icon dimension directly in the array is OK and it's working. In the documentation you have a dimensions markers so I don't know what's the best for you ;)

Mapper::informationWindow(
                $client->latitude,
                $client->longitude,
                $html,
                [
                    'eventMouseOver' => 'maps[0].infowindows['.$cpt.'].open(maps[0], this);',
                    'eventMouseOut' => 'maps[0].infowindows['.$cpt.'].close();',
                    'maxWidth'=> 350,
                    'autoClose' => true,
                    'label' => $client->title,
                    'icon' => [
                        'url' => 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi-dotless2.png',
                        'labelOrigin' => [10, 50]
                    ]
                ]
            );

Thanks again for your help

Yes, it should work either way.

You can add --force to the publish command to force an update of assets.

It's working so I close this issue thanks again for your help ;)