Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to use a absolute path svg icon with AdvancedMarker?

Been working on moving on to AdvancedMarker since Marker is deprecated in Google Maps.
I’m trying to migrate a marker but they’re rendered it so complicated for nothing…

I used to have a simple svg marker

   new google.maps.Marker({
       position:loc,
       map:map,
       title: title,
       icon: '/img/marker.svg'
   });

Now after migration, I cannot for the life of me figure out how to use the same path for the absolute mess of PinElement.

    const pinElement = new google.maps.marker.PinElement({
        glyph: new URL('/img/marker.svg'),
    });

    new google.maps.marker.AdvancedMarkerElement({
        position: loc,
        map: map,
        title: title,
        content: pinElement
    }); 


    Failed to construct 'URL': Invalid URL

How do I load that URL WITHOUT specifying the domain in the glyph ? We use this in multiple env and so domain can change, that’s the reason I wish to use absolute URL.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I will answer my own question, I might help someone. After going through the documentation that is full of typos and mistakes, I found that solution on a random page :

     let img = document.createElement("img");            
 img.src ='/img/marker.svg';

 new google.maps.marker.AdvancedMarkerElement({
      position: loc,
      map: map,
      title: title,
      content: img
 });

  2. 0

    If you use a PinElement, your SVG file will be displayed inside the default balloon marker.

    async function initMap() {

  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  
  const center = { lat: 0, lng: 0 }

  const map = new Map(document.getElementById("map"), {
    center: center,
    zoom: 5,
    mapId: "4504f8b37365c3d0",
  });

  // A marker with a custom SVG glyph.
  const glyphImg = document.createElement("img");

  glyphImg.src =
    "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/check.svg";

  const glyphSvgPinElement = new PinElement({
   glyph: glyphImg,
   background: '#fff'
  });
  
  const glyphSvgMarkerView = new AdvancedMarkerElement({
    map,
    position: center,
    content: glyphSvgPinElement.element,
    title: "A marker using PinElement",
  });
}

initMap();
    #map {
  height: 180px;
}
    <div id="map"></div>

<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk", v: "beta"});</script>

    If you use your SVG as the AdvancedMarker content, the graphic will make the entire marker.

    async function initMap() {

  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
  const center = { lat: 0, lng: 0 };

  const map = new Map(document.getElementById("map"), {
    center: center,
    zoom: 5,
    mapId: "4504f8b37365c3d0",
  });

  const parser = new DOMParser();
  // A marker with a custom inline SVG.
  const pinSvgString = '<svg xmlns="http://www.w3.org/2000/svg" height="50" width="50" viewBox="0 0 100 100"><path d="M30,76q6-14,13-26q6-12,14-23q8-12,13-17q3-4,6-6q1-1,5-2q8-1,12-1q1,0,1,1q0,1-1,2q-13,11-27,33q-14,21-24,44q-4,9-5,11q-1,2-9,2q-5,0-6-1q-1-1-5-6q-5-8-12-15q-3-4-3-6q0-2,4-5q3-2,6-2q3,0,8,3q5,4,10,14z" fill="green"/></svg>';
  
  const pinSvg = parser.parseFromString(
    pinSvgString,
    "image/svg+xml"
  ).documentElement;

  const pinSvgMarkerView = new AdvancedMarkerElement({
    map,
    position: center,
    content: pinSvg,
    title: "A marker using a custom SVG image.",
  });
}

initMap();
    #map {
  height: 180px;
}
    <div id="map"></div>

<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk", v: "beta"});</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search