I want to automate the way to add points to Google My Maps. They don’t provide any API for that, so I thought I would use a custom user script to interact with the page.
I haven’t written it yet, for now, I’m only checking in the dev tools console if everything is accessible and if it will be possible to achieve.
Here is the problem I encountered: it’s possible to create a new point, edit the name, etc., but I’m stuck at adding a photo to the point. There are a lot of custom properties and solutions made by Google in that area and I’m looking for a solution that will work with that.
There is an input field where I can paste or type url to the photo. If I do this, the value is written to the attribute data-initial-value and then the photo appears below that input field, and the save button is activated.
<input type="text" class="whsOnd zHQkBf" jsname="YPqjbf" autocomplete="off" tabindex="0" aria-label="Wklej adres URL obrazu..." aria-disabled="false" autofocus="" data-initial-value="" badinput="false">
When I programmatically set the photo URL to either value or data-initial-value attributes, then nothing really happens, their custom JS isn’t activated, so the photo can’t be added that way.
input = document.querySelector(".whsOnd.zHQkBf");
input.setAttribute("data-initial-value", "https://picsum.photos/200");
input.setAttribute("value", "https://picsum.photos/200");
input.value = "https://picsum.photos/200";
You can see in this video how it behaves when I paste the link and then later when it’s set programmatically.
So, the question is if there is any way I can simulate paste or type action to that field, so their JS will detect it? Or is there any other solution how to make it work?
Steps to get this input on Google My Maps:
- Create and open map on https://www.google.com/maps/d/
- Click the pin icon in the toolbar to create a new point
- Click the photo icon in the edit dialog box
- Click the URL tab
Here is full HTML of this area with input:
<div
class="V6Fpqd-nUpftc"
jscontroller="qo18Ab"
jsaction="f9NQ3d:jSxSE;iUYTcf:MphkWb;E6LM8:eAlKye;GljaIf:qZ14Je;arml9e:LvSimf;TcIE3e:VZij4d;tJHP7e:ulAvwc"
jsname="oLnkS"
role="tabpanel"
>
<div jsname="V8jame"></div>
<div class="kPOohe-wZVHld-nUpftc-haAclf" jsname="StCdjf">
<div
class="kPOohe-wZVHld-nUpftc"
jsaction="rcuQ6b:rcuQ6b"
jscontroller="JKlM1b"
>
<div class="eXh7Ud" jscontroller="cDvIdc" jsaction="rcuQ6b:rcuQ6b;">
<div class="mPVwKb hCTQCe" jsname="L8jiB">
<div
class="ndlgBc"
jscontroller="KIcJpf"
jsaction="JIbuQc:LYGBsb(gQ2Xie),mm65pe(Slj9he);O22p3e:fpfTEe(cB3E7e);rcuQ6b:rcuQ6b;YqO5N:XNc1Le(cB3E7e); keydown:Hq2uPe(cB3E7e)"
>
<div jsname="ODTp8" class="hSF15e">
<div jsname="oK1IRd">
<div class="YHtwxf">
<div
class="rFrNMe qr4X2e zKHdkd"
jscontroller="pxq3x"
jsaction="clickonly:KjsqPd; focus:Jt1EX; blur:fpfTEe; input:Lg5SV"
jsshadow=""
jsname="cB3E7e"
>
<div class="aCsJod oJeWuf">
<div class="aXBtI I0VJ4d Wic03c">
<div class="Xb9hP">
<input
type="text"
class="whsOnd zHQkBf"
jsname="YPqjbf"
autocomplete="off"
tabindex="0"
aria-label="Wklej adres URL obrazu..."
aria-disabled="false"
autofocus=""
data-initial-value=""
/>
<div
jsname="LwH6nd"
class="ndJi5d snByac"
aria-hidden="true"
>
Wklej adres URL obrazu...
</div>
</div>
<span jsslot="" class="A37UZe sxyYjd MQL3Ob"
><span data-is-tooltip-wrapper="true"
><button
class="pYTkkf-Bz112c-LgbsSe pYTkkf-Bz112c-LgbsSe-OWXEXe-SfQLQb-suEOdc DmnNTb"
jscontroller="PIVayb"
jsaction="click:h5M12e; clickmod:h5M12e;pointerdown:FEiYhc;pointerup:mF5Elf;pointerenter:EX0mI;pointerleave:vpvbp;pointercancel:xyn4sd;contextmenu:xexox;focus:h06R8; blur:zjh6rb;mlnRJb:fLiPzd;"
data-idom-class="DmnNTb"
data-use-native-focus-logic="true"
jsname="gQ2Xie"
disabled=""
aria-label="Wyczyść podgląd adresu URL"
data-tooltip-enabled="true"
data-tooltip-id="tt-c4"
>
<span
class="OiePBf-zPjgPe pYTkkf-Bz112c-UHGRz"
></span
><span
class="RBHQF-ksKsZd"
jscontroller="LBaJxb"
jsname="m9ZlFb"
soy-skip=""
ssk="6:RWVI5c"
></span
><span
class="pYTkkf-Bz112c-kBDsod-Rtc0Jf"
jsname="S5tZuc"
aria-hidden="true"
><svg
class="Q6yead QJZfhe"
height="24"
viewBox="0 -960 960 960"
width="24"
>
<path
d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
></path></svg
></span>
<div class="pYTkkf-Bz112c-RLmnJb"></div>
</button>
<div
class="ne2Ple-oshW8e-V67aGc"
id="tt-c4"
role="tooltip"
aria-hidden="true"
>
Wyczyść podgląd adresu URL
</div></span
></span
>
<div class="i9lrp mIZh1c"></div>
<div jsname="XmnwAc" class="OabDMe cXrdqd"></div>
</div>
</div>
<div class="LXRPh">
<div jsname="ty6ygf" class="ovnfwe Is7Fhb"></div>
</div>
</div>
<div class="aRx7Te nbtmO" jsname="aZ2wEe">
<div
class="EmVfjc qs41qe"
data-loadingmessage="Ładuję"
jscontroller="qAKInc"
jsaction="animationend:kWijWc;dyRcpb:dyRcpb"
data-active="true"
jsname="aZ2wEe"
>
<div class="Cg7hO" aria-live="assertive" jsname="vyyg5">
Ładuję
</div>
<div jsname="Hxlbvc" class="xu46lf">
<div class="ir3uv uWlRce co39ub">
<div class="xq3j6 ERcjC">
<div class="X6jHbb GOJTSe"></div>
</div>
<div class="HBnAAc">
<div class="X6jHbb GOJTSe"></div>
</div>
<div class="xq3j6 dj3yTd">
<div class="X6jHbb GOJTSe"></div>
</div>
</div>
<div class="ir3uv GFoASc Cn087">
<div class="xq3j6 ERcjC">
<div class="X6jHbb GOJTSe"></div>
</div>
<div class="HBnAAc">
<div class="X6jHbb GOJTSe"></div>
</div>
<div class="xq3j6 dj3yTd">
<div class="X6jHbb GOJTSe"></div>
</div>
</div>
<div class="ir3uv WpeOqd hfsr6b">
<div class="xq3j6 ERcjC">
<div class="X6jHbb GOJTSe"></div>
</div>
<div class="HBnAAc">
<div class="X6jHbb GOJTSe"></div>
</div>
<div class="xq3j6 dj3yTd">
<div class="X6jHbb GOJTSe"></div>
</div>
</div>
<div class="ir3uv rHV3jf EjXFBf">
<div class="xq3j6 ERcjC">
<div class="X6jHbb GOJTSe"></div>
</div>
<div class="HBnAAc">
<div class="X6jHbb GOJTSe"></div>
</div>
<div class="xq3j6 dj3yTd">
<div class="X6jHbb GOJTSe"></div>
</div>
</div>
</div>
</div>
</div>
<div class="CpRZQe" role="alert">
Możesz użyć tylko takich obrazów, do których posiadasz
stosowne prawa.
</div>
<div
class="Gkzg6e nbtmO"
jsname="VEOBbf"
role="status"
aria-live="assertive"
>
<div class="Gkzg6e nbtmO" jsname="VEOBbf"></div>
<div class="nbtmO">
Nie możemy znaleźć obrazu lub uzyskać do niego dostępu pod
tym adresem URL. Sprawdź, czy adres został wpisany
poprawnie.
</div>
<div class="nbtmO">
Ten adres URL jest nieprawidłowy. Upewnij się, że zaczyna
się od http:// lub https://.
</div>
</div>
</div>
</div>
<div jsname="qlI0xc" class="nbtmO">
<div class="PDztrf"><img jsname="dGKeKb" class="LLY0Xe" /></div>
</div>
<div jsname="Zpe2Q" class="APdXXd">
<div
role="button"
class="U26fgb O0WRkf oG5Srb HQ8yf C0oVfc fuRKz M9Bg4d RDPZE"
jscontroller="VXdfxd"
jsaction="click:cOuCgd; mousedown:UX7yZ; mouseup:lbsD7e; mouseenter:tfO1Yc; mouseleave:JywGue; focus:AHmuwe; blur:O22p3e; contextmenu:mg9Pef;touchstart:p6p2H; touchmove:FwuNnf; touchend:yfqBxc(preventDefault=true); touchcancel:JMtRjd;"
jsshadow=""
jsname="Slj9he"
aria-label="wstaw obraz"
aria-disabled="true"
tabindex="-1"
>
<div class="Vwe4Vb MbhUzd" jsname="ksKsZd"></div>
<div class="ZFr60d CeoRYc"></div>
<span jsslot="" class="CwaK9"
><span class="RveJvd snByac">wstaw obraz</span></span
>
</div>
</div>
</div>
<div jsname="nlOOSe" class="TMnCxb nbtmO"></div>
</div>
</div>
</div>
</div>
</div>
</div>