Keagan Chisnall
1 min readJul 20, 2020

--

Good question. One of the challenges with integrating Google Maps into Vue is around when Google Maps "unpacks" itself.

The order is as follows:

1. Vue loads

2. Google Maps JS runs and looks for the <div> with the ID it needs to target, and replaces the content of that <div> with the maps code.

3. Vue can now interact with the map

The problem is, if you try and reference the contents of the map <div> when Vue loads - they don't exist yet, so you will get an error. Even worse, Vue won't check back later when they have loaded.

So the getMap(callback) is a little try-wait-try again script I wrote that lets Vue load without getting an error if it can't find the <div> contents, and then also run some code when it is loaded.

There may be more efficient methods (and I use one in the x5-gmaps package I made - https://github.com/xon52/x5-gmaps) but this is one way.

--

--

Keagan Chisnall
Keagan Chisnall

Written by Keagan Chisnall

I have a background in process engineering, management, and consulting; but my passion is making systems and processes more efficient. Visit me: chisnall.io

No responses yet