Google Maps markers werken niet meer?

[Anoniem: 426269]

Waarschijnlijk heeft er iets in het Google Maps gedeelte een update gehad, want mijn markers verschijnen niet meer op mijn Google Maps kaartje.

Wanneer ik in Chrome 'inspect element' doe, dan zie ik 2 regels met daarin foutmeldingen:
1. NoApiKeys
2. SensorNotRequired

Okee, blijkbaar heb je nu een API key nodig van Google. Als ik die aanvraag dan krijg ik er eentje en die moet ik dan als volgt aanroepen volgens deze https://developers.google...ation/javascript/tutorial pagina:

code:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

De oude aanroepactie was deze:

code:

<script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

Okee sensor hoeft blijkbaar niet meer, maar als ik de oude regel vervang door de nieuwe, met mijn key, dan krijg ik 2 errors:
1. Uncaught ReferenceError: google is not defined => bestaat de functie google.maps.MarkerImage niet meer? Want hij geeft hier een error op, bij var image = new google.maps.MarkerImage(blabla);
2. Uncaught InvalidValueError: initMap is not a function => initMap is het laatste stukje van de nieuwe regel. Maar als ik dat weglaat, en/of async defer weglaat, werkt het ook niet. Dan gebeurt er gewoon niets.

Heeft iemand misschien een zetje in de goede richting?

[Semyon]

De async defer manier van je script laden, vertelt de browser dat de browser verder kan gaan met je pagina over het netwerk te trekken, terwijl dat script ook nog geladen worden.

Dat betekent dat de browser verder met je pagina is gegaan, en blijkbaar komt het dan jouw script tegen, terwijl de Google Maps nog geladen worden. Omdat dat nog bezig is met laden, bestaat google.maps.MarkerImage nog niet. En daar valt de browser dan over. Je moet of wachten met je script tot de Google Maps er is. Of je moet je script zo inrichten dat het de Google Maps pas gebruikt als het er is.

Concreet zijn er 2 mogenlijkheden:
(1) Of je haalt de async defer en de callback=initMap weg, en dan wacht je browser met het uitvoeren van jouw script tot de Google Maps is binnengehaald (je key=XXXX laten staan).
Je script mag er nu van uitgaan dat de Google Maps er altijd is.
(2) Of je maakt een functie initMap. Het idee van de async defer is dat wanneer de google maps klaar is met laden, het een functie aanroept die jij hebt klaar gezet, waarvan jij moet zeggen hoe die heet. In dit geval heb je gezegd dat het initMap heet, maar blijkbaar heb je die functie niet klaar staan in je script. Het idee is dat als je voor de async defer manier gaat (die beter is voor het downloaden van webresources) je pas de Google Maps Api gaat gebruiken in je initMap functie en niet daar voor al.
Je doet iets als

code:

var initMap = function() {
  var image = new google.maps.MarkerImage(blabla);
};

Verder... de MarkerImage is al heel lang 'weggehaald'. Omdat mensen op het internet het gebruiken kan het niet echt worden verwijdered en blijft het altijd werken, maar het komt niet meer in de reference voor. Het idee is nu dat je google.maps.Icon gebruikt.
Dat is een object specificatie en niet een class, die dus moet je zelf maken met een object:

code:

var icon = {
  url: ...
  size: ...
};

en die geef je dan aan een google marker.
https://developers.google...ipt/examples/icon-complex is daar een voorbeeld van.

Fulldisclosure: ik ben een Google software engineer die aan Google Maps API werkt, maar alles is hier op personlijke titel

[Anoniem: 426269]

Zo! Bedankt voor al deze uitleg Semyon!

Semyon schreef op woensdag 21 september 2016 @ 00:25:
...
(1) Of je haalt de async defer en de callback=initMap weg, en dan wacht je browser met het uitvoeren van jouw script tot de Google Maps is binnengehaald (je key=XXXX laten staan).
Je script mag er nu van uitgaan dat de Google Maps er altijd is.
...

Deze eerste oplossing werkte hier niet hoor, helaas. Het bleef hier gewoon leeg allemaal. Ik vraag me nu wel af of die gegenereerde API key nog ergens gekoppeld moeten worden met de domeinnaam ofzo? Of dat ze ergens anders moeten worden opgeslagen of nog moeten worden bevestigd? Want ik heb door al mijn geprobeer 3 maal een API key laten genereren en die waren allemaal verschillend.

Die link naar 'Complex icons' is ook zeer handig! En doet me terugdenken aan een aantal jaar geleden toen ik op 4 van die 5 stranden was, haha.

[ Voor 5% gewijzigd door Anoniem: 426269 op 21-09-2016 00:56 ]

[Semyon]

Anoniem: 426269 schreef op woensdag 21 september 2016 @ 00:55:
Deze eerste oplossing werkte hier niet hoor, helaas.

Wat staat er op je console? Wat gebeurt er wel?

Anoniem: 426269 schreef op woensdag 21 september 2016 @ 00:55:
Het bleef hier gewoon leeg allemaal. Ik vraag me nu wel af of die gegenereerde API key nog ergens gekoppeld moeten worden met de domeinnaam ofzo?

Je kan ze of "unrestricted" maken, (iedereen op het internet kan je quota dan gebruiken) of je key aan domain koppelen. Je kan dat op Google Console doen.
Maar als dit fout gaat moet je een melding op je console hebben dat je key fout is/niet bij je domain hoort.

Anoniem: 426269 schreef op woensdag 21 september 2016 @ 00:55:
Die link naar 'Complex icons' is ook zeer handig! En doet me terugdenken aan een aantal jaar geleden toen ik op 4 van die 5 stranden was, haha.

Ik kom daar nog regelmatig Zomer is weer in aantocht!

[Anoniem: 426269]

Semyon schreef op woensdag 21 september 2016 @ 01:45:
Wat staat er op je console? Wat gebeurt er wel?

Die was echt blanco. Dit was in Chrome als ik 'inspect element' deed, geen foutmeldingen dan. Via Google Console had ik mijn domeinnaam nog niet gekoppeld, dus daar had ik nog niet gekeken. Maar ik denk dat het een andere fout was, zoals een cache probleem hier, want het werkt nu gewoon wel.
Eigenlijk was het enige dat ik hoefde te doen om geen foutmelding meer te krijgen (in mijn Chrome console) was js?sensor=false vervangen door js?key=MY_API_KEY en het werkt nu gewoon (weer).

Je kan ze of "unrestricted" maken, (iedereen op het internet kan je quota dan gebruiken) of je key aan domain koppelen. Je kan dat op Google Console doen.
Maar als dit fout gaat moet je een melding op je console hebben dat je key fout is/niet bij je domain hoort.

Ja perfect. Ik heb ze nu via de console aan een domeinnaam gekoppeld. Ik toen ik daarmee bezig was inderdaad nog een foutmelding opkomen toen ik nog niet helemaal klaar was ermee. Maar werkt nu goed en niemand kan mijn quota meer gebruiken. Nogmaals bedankt voor de tips!

Ik kom daar nog regelmatig Zomer is weer in aantocht!

Ha, erg mooi! Ik ben jaloers.
Ik weet nog dat ik op Cronulla waarschuwingsbordjes zag voor de blue ringed octopus, die daar ook vlak langs de kant onder de rotsjes zit. Ik las op wiki dat hij genoeg gif heeft om 26 volwassenen binnen een paar minuten te doden. Ook veel haaien toen ik er was (dec 2012 t/m jan 2013). Gezien op Bondi, Newcastle en op Manly iemand zijn vinger eraf gebeten. En nog niet zo lang ervoor was op Byron Bay iemand helemaal verslonden door een haai. Gelukkig heb ik daar alleen tussen de dolfijnen gesurft, althans zover ik het kon zien. Het was ook erg grappig om daar met een kerstmutsje op op het strand te lopen met 38 graden.