bradcornford / Googlmapper

An easy way to integrate Google Maps with Laravel
MIT License
464 stars 142 forks source link

Offset the label from the marker ? #365

Closed t-prod closed 4 years ago

t-prod commented 4 years ago

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

bradcornford commented 4 years ago

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.

t-prod commented 4 years ago

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

t-prod commented 4 years ago

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)

bradcornford commented 4 years ago

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], 
                        ]
                    ]
                ]
            );
bradcornford commented 4 years ago

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();',
t-prod commented 4 years ago

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.

bradcornford commented 4 years ago

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

bradcornford commented 4 years ago

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

 'labelOrigin' => [0, 10],
t-prod commented 4 years ago

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 ?

t-prod commented 4 years ago

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

bradcornford commented 4 years ago

Yes, it should work either way.

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

t-prod commented 4 years ago

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