Develop Reference

Error MapSVG.Location is not a constructor

I am using the MapSVG plug in in WP and from the JS panel of the plug in I am trying to insert a marker, as per the documentation. But it gives me the error:
MapSVG.Location is not a constructor.
How can I solve this?
The code I use is as follows:
var location = new MapSVG.Location({
lat: 55.22,
lng: 64.12,
img: "/path/to/image.png"
});
var marker = new MapSVG.Marker({
location: location,
mapsvg: mapsvgInstance
});
// The marker is created but still not added to the map. Let's add it:
mapsvg.markerAdd(marker);
Taken from the official documentation at this link: https://mapsvg.com/docs/api/#mapsvgmarker
I've tried to do some research but can't figure out how I can solve the problem. Can you help me?
Currently the problem keeps recurring. The plug-in version is: 6.2.25 and the wp version is: 6.0.2

Google map API in my html website

hello I have a problem I wish to integrate ue google map in my site but I do not understand it appears when I update the page but then it disappears. In the console it says "no APIkey" but I did it several times. I followed the site: developers.google
but I do not understand where the error lies. I put the html part if a person understand the error please ! I also follow this topic google api in my website but nothing appears !
<div id="map"></div>
<script>
function initMap() {
var ff = {
lat: 50.638181,
lng: 3.058227
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: ff
});
var marker = new google.maps.Marker({
position: ff,
map: map
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWdGA-ndsHMtR5-cdZrc5SHtfKKBG5Bfg&callback=initMap">
</script>

Console says:-
https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error
so activate your google map API key under project.

Your API key is not activated. Make sure to generate a new one following the guide: https://developers.google.com/maps/documentation/javascript/get-api-key?hl=de

Sudden errors on Google Map: TypeError: _.x is not a function

I have a little Google Map with a few markers here: http://www.magicbad.com/kontakt/fachbetrieb-karte/
Since today (or maybe yesterday) there are suddenly errors popping up in the console, that I can't explain. The maps loads, but after a few seconds the errors pop up and you can't drag it anymore.
The code I use to initialize the map is (There is a little more to it with filters etc., but the errors pop up even when I switch off everything else):
google.load("maps", "3", {other_params:"sensor=false"});
function initialize() {
if($('.main.fullWidth').length > 0) var scroll = true;
else var scroll = false;
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(48.3, 14.3);
var myOptions = {
zoom: myZoom,
scrollwheel: scroll,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.LEFT_BOTTOM
}
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
$(document).ready(function(){
initialize();
});
The errors start of with: (few seconds after you load the page)
Uncaught TypeError: _.x is not a function / stats.js:9
Uncaught TypeError: Cannot set property 'Db' of undefined / common.js:216
Uncaught TypeError: a.set is not a function / js?v=3&sensor=false:38
And after that if you move your mouse over the map you get constant:
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. / common.js:31
Any ideas? The code might be messy, but this map has been up and running for years, why the sudden change?
Thank you for your help,
Florian

Alright, I found the problem. I used an old form of including the Google Maps Api script. When I switch that to exactly this:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
As mentioned in the GM basic tutorial here: https://developers.google.com/maps/documentation/javascript/tutorial it starts working again.
So if you run across any errors of this type, first check if you API inclusion is up to date.

Undefined function error when trying to addListener to multiple Markers

I'm building an app that displays a google map and populates it with a set of markers retrieved from a Json file. This works fine. It throws no errors and everything is good. I then wanted to trigger an InfoWindow when the markers are clicked so I followed the code on google maps api page but when I add the addListener function, the markers don't appear on the map (as if the function to draw them didn't work). In Chromes console, I get the following error:
Uncaught TypeError: undefined is not a function mapapp.js:65
This is section where the issue arises:
function drawMarkers(map){
var myMarker;
$.each(markers, function(index, item){
myMarker = new google.maps.Marker({
position: new google.maps.LatLng(item.latitude, item.longitude),
map: map,
animation: google.maps.Animation.DROP,
title: item.title
});
/*This is the error source. Line 65*/
google.maps.addListener(myMarker, 'click', function(){
alert("Clicked Marker");
});
});
}
The markers array is a global variable that populates with json data pulled from my web page. Like I said, the whole thing works without the listener code, but when the addListener code is added it fails to draw the markers on the map.
What is it in this line of code thats causing the error?

Typo:
google.maps.addListener()
should be
google.maps.event.addListener()

LEAFLET: Custom images in the Layer Control Tutorial?

I have followed the leaflet tutorial on how to create Layer Control and the custom markers:
Markers:http://leafletjs.com/examples/custom-icons.html
Control: http://leafletjs.com/examples/layers-control.html
I am using the control code and i would like to add my custom marker to this. When applying the code it the map goes blank and breaks. Im not sure if it's something do to with the positioning with the "add to map" and "bindpopup". Any help would be great.
CODE:
[CLOUDMADE API KEY AND INFO HERE]
var officeIcon = L.icon({
iconUrl: 'images/office1.png'
});
var london = L.marker([51.3512542357518,-0.461769104003906],{icon: officeIcon}).addTo(map).bindPopup('<b>Office Address</b>');
var cities = L.layerGroup([london]);
var minimal = L.tileLayer(cloudmadeUrl, {styleId: 22677}),
midnight = L.tileLayer(cloudmadeUrl, {styleId: 999}),
motorways = L.tileLayer(cloudmadeUrl, {styleId: 46561});
var map = L.map('map', {
center: new L.LatLng(54.980000,-1.5975022315979004),
zoom: 10,
layers: [minimal, motorways, cities]
});
var baseMaps = {
"Minimal": minimal,
"Night View": midnight,
};
var overlayMaps = {
"Motorways": motorways,
"Display Markers": cities
};
map.addControl(new MyControl());
L.control.layers(baseMaps, overlayMaps).addTo(map);

The problem is that you're adding the marker to the map before you have defined the map. I would recommend using firebug for firefox or the equivalent in chrome. That way you could look at the console and you would see the error:
'Uncaught TypeError: Cannot call method 'addLayer' of undefined'
L.Marker.L.Class.extend.addTo leaflet-src.js:2993
addVehicleContentUI obelix.dev:1074
(anonymous function) obelix.dev:718
(anonymous function) obelix.dev:1292
p.event.dispatch jquery-1.8.0.min.js:2
g.handle.h
This pointed me to the L.Marker which made me realise that you hadn't defined the map yet. The problem you have is that you're adding the marker to the map as well as adding it to the group layer. Just don't add it to the map (as per the tutorial you were following). so remove the code:
.addTo(map)
from:
var london = L.marker([51.3512542357518,-0.461769104003906],{icon: officeIcon}).addTo(map).bindPopup('<b>Office Address</b>');
The next problem is that MyControl isn't a control, I commented out the following line:
map.addControl(new MyControl());
From your code snippet, I presume you have a key from cloudmade. If so then it should work fine. I tested it locally and everything was good.
I do highly recommend getting firebug if you're using firefox or the equiv for chrome if you use chrome. Looking at the console will show you these problems and you can even set breakpoints and step through the javascript as it executes. An invaluable tool for javascript programming IMHO.
Cheers.