I need you help. I use the Plugin WP GPX MAPS together with another google map (integrated in sabai google maps) plugin. unfortunately the map of WP GPX maps is not showing up because of "a javascript error that is telling there are 2 instances of Google Maps API being loaded"
I have already searched for a solution in stackoverflow and found out that I have to add this code line
google.maps.event.trigger(map, "resize");
in my js file wp-gpx-maps.js https://github.com/wp-plugins/wp-gpx-maps/blob/master/WP-GPX-Maps.js
but I do not know if this is right and where in wp-gpx-maps.js I have to include this line.
can you pls. help me and point out in which line I have to put google.maps.event.trigger(map, "resize");
thank you very much!
See Problem here https://www.tourendatenbank.com/touren/gipfel/gangolfsberg
it's only a compatibility problem with your tab plugin.
this is your code:
jQuery(document).ready(function() {
var sabai_wpgpxmaps = function() {
<<wp-gpx-maps code>>
};
if (jQuery("#sabai-inline-content-wpgpxmaps").is(":visible")) {
sabai_wpgpxmaps();
} else {
jQuery("#sabai-inline-content-wpgpxmaps-trigger").on("shown.bs.sabaitab", function(e, data){
sabai_wpgpxmaps();
});
}
});
the function sabai_wpgpxmaps is never been called
Related
I have a directory website with placed you can have lunch. On the homepage you an search on your location or type in a city / lunchroom you know. When you press search you will see the result page with several listings. Here you can also choose to view the map (this is a Mapbox Api).
On the map the listings are shown, but the map doesn't automatically zoom in to your location. The map just shows the center of all listings. I want to show the listings within a 10km radius of the position you searched for.
On the MapBox website this is called GeoLocate (locate the user) and there is code for this you can use. So I changed the code to my preference only now I need to add it to my Wordpress theme. I'm using Directory theme Guido.
The code in the theme edit builder is different from the code I've made and I hope you can help me adjust the code properly. I'll show you both type of codes here so maybe that gives a better understanding:
This is the Wordpress Guido code in theme editor:
if ( $item.data('latitude') !== "" && $item.data('latitude') !== "" ) {
var zoom = (typeof MapWidgetZoom !== "undefined") ? MapWidgetZoom : 15;
self.addMakerToMap($item);
map.addLayer(markers);
map.setView([$item.data('latitude'), $item.data('longitude')], zoom);
$(window).on('update:map', function() {
map.setView([$item.data('latitude'), $item.data('longitude')], zoom);
});
$('.location-map-view').on('click', function(e){
e.preventDefault();
$('#single-listing-street-view-map').hide();
$('#'+map_e_id).show();
$('.location-street-view').removeClass('hidden');
$(this).removeClass('hidden').addClass('hidden');
map._onResize();
});
And the code for the MapBox Geolocate I need to add can be found here exactly: https://docs.mapbox.com/mapbox-gl-js/example/locate-user/
Hope anyone can help, thanks in advance
I am new to Google analytics and Google Tag Manager and currently I am confused with using external JS libraries. Any help would be appreciated.
I need to use 'https://cdnjs.cloudflare.com/ajax/libs/fingerprintjs2/2.1.0/fingerprint2.min.js' in my custom javascript code in google tag manager. I have tried to include the script as a custom html or even custom template. The script is successfully added to the head and I see it in the inspection. But in my custom JS code , when I try to call and use library functions , it throws exception saying that the lib object is not defined.
I tried sequencing tags also , to make sure script loading tags are fired before my custom js code execution. But that did not fix the problem.
Any suggestion on how to include external JS libraries in your GTM custom JS code? I hope I explained the problem properly.
Thanks !
This example posted by jwest75674 should help. As you need to declare var = fingerprint in your script to allow Google Tag Manager to capture the data after the script has run
In short, you can copy the script below an add it as Custom HTML Tag in GTM (https://github.com/Valve/fingerprintjs2)
<script src="https://cdn.jsdelivr.net/npm/fingerprintjs2#2.1.0/dist/fingerprint2.min.js"></script>
<script type="text/javascript">
var fingerprint; // Variable to allow the Google Tag Manager to capture the data after this script has run.
if (window.requestIdleCallback) {
requestIdleCallback(function () {
Fingerprint2.get(function (components) {
console.log(components) // an array of components: {key: ..., value: ...}
})
})
} else {
setTimeout(function () {
Fingerprint2.get(function (components) {
console.log(components) // an array of components: {key: ..., value: ...}
})
}, 500)
}
</script>
Thanks in advance. I'm trying to figure out how to add client faces (images) to certain locations on a map using the Nokia Here Map Image API.
I am able to do this via the Javascript API, but unfortunately I also need to be able to download an image for use in a generated PDF file, and I can't figure out how to add external images to the map.
Any help would be much appreciated. :)
I didn't exactly understand your requirement but if you want to convert the canvas which shows the map to an Image, you can do that with the map caprutre event, something like following should work
map.capture(function(canvas) {
if (canvas) {
var img = new Image();
img.src = canvas.toDataURL("img/jpeg");
window.open(img.src);
} else {
// For example when map is in Panorama mode
alert('Capturing is not supported');
}
}, [ui], 0, 0, document.getElementById("mapContainer").offsetWidth, document.getElementById("mapContainer").offsetHeight);
I have a webmap with GMaps & GEarth integrated, in order for the user to switch between different views.
I load 3 KML files and control their visibility using checkboxes. This example here uses the same function stackOverflowQuestion
When I switch views Map - Satellite - Earth I have my KMLs working on Map & Satellite view, BUT not on Earth View.
function init() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(xx, xx),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
googleEarth = new GoogleEarth(map);
google.maps.event.addListenerOnce(map, 'tilesloaded', addOverlays);
}//end init
[...]
function OnOffKML(i) {
if(currentKmlObjects[i].getMap() === null) {
currentKmlObjects[i].setMap(map);
}
else {
currentKmlObjects[i].setMap(null);
}
}
this function works for Google Maps Api 3, but not for Google Earth plugin...
Does this mean I have to use the fetch{} for it to show on GE? Is there a workaround?
Could I exclude my toggleKML{} for the earth view in any way?
OK,
The problem here is that we cannot code for GM Api 3 and expect to have results for GE Api as well.
Sure the two can be integrated but you have to decide that one of the two will have limited functionality.
Thus I decided to split the application up, work separately and efficiently.
As for GE method for KML usage, I have used the fetch{} function, along with checkbox selection.
That is not strictly true, you would just need to reload your Kml into the earth API.
You could modify your OnOffKML function to act differently depending on the current mode (earth/maps).
The problem you have currently is that you are using Google Maps Api methods, on the Google Earth plugin.
Anyhow, something like the following would work, allowing the method to handle both.
function OnOffKML(i) {
if(googleEarth.getWindow().getVisibility()) {
// code for earth api
} else {
// code for maps api
}
}
I am porting app from API v.2 to API v.3
App have function that allows user to draw a polyline. Every time new vertex is inserted path length is updated. How to do it in v.3 as drawing library has events only on "polylinecomplete".
Editing events described here, may be used only on existing polylines. This do not make me happy as I can receive my polyline object only when drawing is done...
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
if (event.type == google.maps.drawing.OverlayType.POLYLINE) {
my_polyline = event.overlay
drawingManager.setMap(null);
}
});
I know this question is quite old. Just in case someone falls into the same problem :
The editing event api is plenty usefull :
google.maps.event.addListener(your_polyline.getPath(), 'insert_at', function(index) {
// Do what you like when you insert a new point on your polyline here.
});
google.maps.event.addListener(your_polyline.getPath(), 'set_at', function(index) {
// Do what you like when you move an existing point on your polyline here.
});