Mit dem Laden der Karte akzeptieren Sie die Datenschutzerklärung von Google.
Mehr erfahren
wie bekomme ich aus line 55 den svg code heraus?
heißt also wenn ich den svg code nicht wie in line 65 vorlege sondern nur die url des svg (line55) dort hinterlege. Ziel ist ja den Marker als inline svg dort einzufügen.
Line 54 nutze ich dann nur für png files.
Line 72-78 zieht ja nur den svg tag aus 65 raus.
<div id="map-frame" class="mfp-hide mfp-with-anim">
[borlabs-cookie id="googlemaps" type="content-blocker"]
<div id="map"></div>
<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: "AIzaSyDngWe1G0zMpOsHMr02fAgViwrCyF2sNwM", v: "weekly"});
</script>
<script>
let map;
async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
// Setup for the new map
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 13,
center: { lat: 50.747962848639524, lng: 7.0845938513816895},
mapId: "WeberWebdesign",
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM,
},
fullscreenControl: false,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_LEFT,
},
});
const infowindow = new google.maps.InfoWindow;
// Create empty markers array
const markers = [];
// Create the location settings
const locations = [
{
contentString : '<img class="aligncenter" src="https://webers-testseite.de/wp-content/uploads/webers-webdesign-logo.svg" alt="Logo Weber" /><div class="avia-button-wrap avia-button-center custom-button btn-15"><a href="https://www.google.com/maps/dir//Weber,+digitale+Dienstleistung,+Ludwig-Schopp-Stra%C3%9Fe+27,+53117+Bonn,+Deutschland/@50.7563758,7.0549176,52m/data=!3m2!1e3!5s0x47bf1e2abbbfb67d:0x658a7e0391d30836!4m8!4m7!1m0!1m5!1m1!1s0x47bee1bd23796923:0x7fcf775f84623228!2m2!1d7.0548937!2d50.7564663?hl=de&entry=ttu" class="avia-button avia-icon_select-yes-right-icon avia-size-medium avia-position-center avia-color-theme-color" target="_blank" class="avia-button avia-icon_select-yes-right-icon avia-size-small avia-position-center popup-modal-dismiss"><span class="avia_iconbox_title">Routenplaner</span><span class="avia_button_icon avia_button_icon_right" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></a></div>',
description: 'Webers Webdesign',
latitude: 50.756464675842594,
longitude: 7.054893132760398,
icon: '/wp-content/uploads/maps-icon.svg',
svgUrl: '/wp-content/uploads/maps-icon.svg',
imageSize : "60px" ,
},
// next location
{
contentString : '<div style="" jstcache="0"><div jstcache="51" class="place-card place-card-large"> <div class="place-desc-large"> <div jstcache="24" class="place-name" jsan="7.place-name">Ernst-Moritz-Arndt-Haus</div> <div jstcache="25" class="address" jsan="7.address">Adenauerallee 79, 53113 Bonn, Deutschland</div> </div> <div jstcache="26" class="navigate"> <div jsaction="placeCard.directions" class="navigate"> <a aria-label="Rufen Sie die Wegbeschreibung zu dieser Adresse in Google Maps ab." target="_blank" jstcache="38" href="https://maps.google.com/maps/dir//Ernst-Moritz-Arndt-Haus+Adenauerallee+79+53113+Bonn+Deutschland/@50.7289879,7.1107364,16z/data=!4m5!4m4!1m0!1m2!1m1!1s0x47bee173ddd37c0f:0x95dfc1c606185784" class="navigate-link"> <div class="icon navigate-icon"></div> <div jstcache="39" class="navigate-text">Routenplaner</div> </a> </div> <div class="tooltip-anchor"> <div class="tooltip-tip-outer"></div> <div class="tooltip-tip-inner"></div> <div class="tooltip-content"> <div jstcache="40">Rufen Sie die Wegbeschreibung zu dieser Adresse in Google Maps ab.</div> </div> </div> </div> <div class="bottom-actions"> <div class="google-maps-link"> <a aria-label="Größere Karte ansehen" target="_blank" jstcache="31" href="https://maps.google.com/maps?ll=50.728988,7.110736&z=16&t=m&hl=de&gl=US&mapclient=embed&cid=10799563487707682692" jsaction="mouseup:placeCard.largerMap">Größere Karte ansehen</a> </div> </div> </div></div>',
description: 'Ernst-Moritz-Arndt Haus',
latitude: 50.7289874213096,
longitude: 7.110740360233977,
imageSize : "30px" ,
svgString : '<svg id="EMAH" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMax meet" xml:space="preserve" viewBox="1.88 0.98 56.23 79.03"><defs><style>.gmap0{fill:#ffffff;}.gmap1{fill:#ffb70a;}.gmap2{stop-color:#ffffff;}.gmap3{stop-color:#ffb70a;}</style><radialGradient id="kugelgradient" cx="-379.453" cy="-18.021" r="29.075" data-name="Unbenannter Verlauf 3" fx="-379.453" fy="-18.021" gradientTransform="rotate(161.23 -165.907 25.024) scale(.923)" gradientUnits="userSpaceOnUse"><stop class="gmap2" offset="0"></stop><stop class="gmap3" offset="1"></stop></radialGradient></defs><g><path d="M58.099 29.088C58.099 13.57 45.519.989 30 .989S1.901 13.57 1.901 29.088c0 13.241 16.446 29.337 19.483 34.353C26.221 71.429 26.528 79.995 30 80c3.472.005 3.866-8.485 8.823-16.432 4.985-7.993 19.276-21.238 19.276-34.479Z" class="gmap1"></path><path d="M5.624 37.055c4.512 13.463 19.084 20.718 32.547 16.206 13.463-4.512 20.718-19.084 16.206-32.547C49.864 7.251 35.292-.005 21.83 4.508S1.111 23.592 5.624 37.055Z" style="fill:url(#kugelgradient)"></path></g></svg>',
},
// erstmal Schluss mit den Orten
];
for (i = 0; i < locations.length; i++) {
if( locations[i].svgString ){
// falls ich die Marker speziell animieren möchte als inline svg setzen:
const parser = new DOMParser();
const pinSvg = parser.parseFromString((locations[i].svgString), "image/svg+xml").documentElement;
pinSvg.style.width = locations[i].imageSize;
var insertedImage = pinSvg;
}
else {
// eigene Marker Icons generieren ( geht auch mit svg als img)
const iconImage = document.createElement("img");
iconImage.src = locations[i].icon;
iconImage.style.width = locations[i].imageSize;
var insertedImage = iconImage;
}
// die Marker setzen
const marker = new AdvancedMarkerElement({
map: map,
position: {lat: locations[i].latitude , lng: locations[i].longitude},
title: locations[i].description,
content: insertedImage,
});
// die infoWindows mit eigenem Content ausrüsten
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i].contentString);
infowindow.open(map, marker);
}
})(marker, i));
// Push marker to markers array
markers.push(marker);
}
// Define the default marker, here for example the marker labeled "Marker 0"
const defaultMarker = markers[0];
// Trigger click on default marker
google.maps.event.trigger(defaultMarker, 'click');
}
initMap();
</script>
[/borlabs-cookie]
</div>