Google maps markers vraag

[Verwijderd]

Beste tweakers,

Momenteel maak ik in een project gebruik van google maps api v3.
Ik kan op deze google maps statisch een aantal markers aanmaken.

code:

var markers = [
        ['test 1', 49, 4],
        ['test 2', 50, 4],
        ['test 3', 51, 4],
        ['test 4', 52, 4],
        ['test 5', 53, 34],
        ];

Het 1e element vd array komt in mijn infowindows, 2e is lat en 3e is longtitude.
Het is de bedoeling om dynamisch deze markers array aan te maken adhv waarden in een database.
Als test wou ik eerst men array anders opvullen dmv statische waarden.

code:

    var markers = [];
    for (var i = 0; i <= 5; i++) {
        markers.push('test', 49, i);
    }

Wanneer ik dus het 1e codeblok verander door het 2e, wordt mijn google maps niet meer weergegeven.
Zolang dit niet werk kan ik niet beginnen testen met het uitlezen van database waarden.
Iemand een verklaring waarom met het 2e codeblok mijn markers niet meer worden weergegeven?

[mhvis]

Het enige verschil dat ik zo zie is dat je geen cijfers meer achter 'test' hebt, waardoor de naam 'test' steeds hetzelfde is.
Test het eens op deze manier:

code:

    var markers = [];
    for (var i = 0; i <= 5; i++) {
        markers.push('test ' + i, 49, i);
    }

Ik heb overigens zelf niet zoveel ervaring hiermee hoor, dus ik kan het fout hebben.

Edit: ik zie het probleem nu, je krijgt op deze manier 1 lange array, terwijl je zonder de for-loop een array hebt met meerdere kleinere arrays van steeds 3 lang.
Dit zou volgens mij moeten werken:

code:

    var markers = [];
    for (var i = 0; i <= 5; i++) {
        markers.push(['test '+i, 49, i]);
    }

[ Voor 32% gewijzigd door mhvis op 26-08-2013 22:35 . Reden: zie hierboven ]

[Verwijderd]

Erg bedankt! morgen proberen om records uit men database uit te lezen! dit helpt mij al héél eind op weg!

[Verwijderd]

Update, ik ondervind problemen met het dynamisch opvullen van mijn array dmv een foreach loop.

code:

    var markers = [];

    @foreach(var test in Model) {
        markers.push(@test.Titel, @test.Longitude, @test.Latitude)   
    }

Bij bovenstaande code krijg ik de foutmelding dat markers niet bestaat in de bestaande context?
de markers array initaliseren binnen mijn foreach is toch ook geen optie aangezien hij die array dan steeds gaat aanmaken.

[RobIII]

Ik zie daar Razor syntax? In dat geval: doe eens "view source" op je pagina? Dan moet je 't meteen (kunnen) zien wat je probleem is. Beetje een kwestie van zelf verder kijken dan je neus lang is en basis debuggen

[mhvis]

Maar ik neem aan dat de data hier op dezelfde manier moet komen zoals in je eerste testje. Dan heb je met dit script weer gewoon hetzelfde probleem als hiervoor, dat je 1 lange array zal krijgen. Oplossing daarvoor kun je dus gewoon in mijn vorige post vinden .

[Verwijderd]

Ja, alleen moet ik mijn array opvullen dmv een foreach.
Op de 1 of andere manier kan ik mijn array niet initaliseren voor mijn foreach.



Ik ben echt niet goed in code schrijven dus zit al meerdere uren op te zoeken om dit kleine stuk werkend te krijgen

[mhvis]

code:

    var markers = [];
    @foreach(var test in Model) {
        markers.push([@test.Titel, @test.Longitude, @test.Latitude])   
    }

Ik heb nu alleen bovenstaande fix toegepast, kijk eens of het werkt. Maar kijk vooral even of je ziet en snapt wat nu het verschil is.

Je kunt online genoeg JavaScript-tutorials vinden overigens, neem er eens eentje door!

[Verwijderd]

mhvis schreef op donderdag 29 augustus 2013 @ 00:22:

code:

    var markers = [];
    @foreach(var test in Model) {
        markers.push([@test.Titel, @test.Longitude, @test.Latitude])   
    }

Ik heb nu alleen bovenstaande fix toegepast, kijk eens of het werkt. Maar kijk vooral even of je ziet en snapt wat nu het verschil is.

Je kunt online genoeg JavaScript-tutorials vinden overigens, neem er eens eentje door!

Dit lost mijn huidig probleem niet op (zie afbeelding) => de naam markers bestaat niet in de huidige context

[RobIII]

mhvis schreef op donderdag 29 augustus 2013 @ 00:22:

code:

    var markers = [];
    @foreach(var test in Model) {
        markers.push([@test.Titel, @test.Longitude, @test.Latitude])   
    }

Daar zie ik stiekem toch nogal wat potentiële probleempjes (Lees: exploit alert!)

1 Een titel is een string, daar zullen quotes omheen moeten. En dan moet je dus weer gaan oppassen dat je alles binnen die quotes correct escaped.

Neem als voorbeeld titel A: Hello world en titel B: "That's cool", he said
Je wil niet als output hebben:

JavaScript:

markers.push([Hello world, ..., ...]);
markers.push(["That's cool", he said, ..., ...]);

Dus je bent slim en zet quotes erom heen:

code:

markers.push(['@test.Titel', @test.Longitude, @test.Latitude])

Dat geeft met titel B nog steeds problemen omdat je niet correct escaped:

JavaScript:

markers.push(['Hello world', ..., ...]);
markers.push(['"That's cool", he said', ..., ...]);

En je lost 't dus ook niet op door " i.p.v. ' te gebruiken

code:

markers.push(["@test.Titel", @test.Longitude, @test.Latitude])

Geeft namelijk:

JavaScript:

markers.push(["Hello world", ..., ...]);
markers.push([""That's cool", he said", ..., ...]);

2 Long/Lat zijn, waarschijnlijk, floats; als je webserver toevallig op een "nl-NL" culture staat (bijvoorbeeld) dan zal hier 1,234, 5,678 uitgepoept worden door Razor:

JavaScript:

markers.push([..., 1,234, 5,678]);

Je wil dit natuurlijk naar een InvariantCulture afdwingen zodat je zeker weet dat er een punt als decimal-separator gebruikt wordt (vergeet niet een @using System.Globalization bovenaan je view toe te voegen ).

Nu ben ik geen Razor expert dus mogelijk kan dit efficiënter / korter / mooier, maar het resultaat zou 'tzelfde moeten zijn:

code:

var markers = [];
@foreach(var m in Model) {
    @: markers.push(['@Html.Raw(HttpUtility.JavaScriptStringEncode(m.Title))',  @m.Longitude.ToString(CultureInfo.InvariantCulture), @m.Latitude.ToString(CultureInfo.InvariantCulture)]);
}

Dit zal de gewenste output geven:

JavaScript:

var markers = [];
markers.push(['Hello world',  5.678, 1.234])
markers.push(['\"That\u0027s cool\", he said',  5.432, 9.876])

En nog een tikkie korter, zonder te klopen klooien met .push():

code:

var markers = [
@foreach(var m in Model) {
    @: ['@Html.Raw(HttpUtility.JavaScriptStringEncode(m.Title))',  @m.Longitude.ToString(CultureInfo.InvariantCulture), @m.Latitude.ToString(CultureInfo.InvariantCulture)],
}
];

Geeft:

JavaScript:

var markers = [
     ['Hello world',  5.678, 1.234],
     ['\"That\u0027s cool!\", he said',  5.432, 9.876],
];

Maar, nogmaals, dit zijn allemaal zaken die WhiteX prima zelf had kunnen ontdekken als 'ie even een "view-source" / "paginabron weergeven" had gedaan op de gegenereerde output (lees: "pagina"). Zoals ik zei: basis debuggen (en basis-kennis IMHO) maar vooral: verder kijken dan je neus lang is.

De fout die hier aangekaart wordt ("De naam markers bestaat niet in de huidige context") onstaat simpelweg omdat je tussen { en } haken zit; Razor ziet 't dan aan voor C# code (lees: context switch) waarin, uiteraard, de "markers" variabele inderdaad niet bestaat. Dat los je op door er een @: voor te zetten (of de te-outputten string tussen <text> en </text> te zetten) waarmee je aan Razor duidelijk maar dat 't een string-literal is en geen code.

[ Voor 30% gewijzigd door RobIII op 29-08-2013 02:45 ]

[mhvis]

Wauw, super bedankt voor je post!

Ik moet eerlijk bekennen dat ikzelf niet eens wist dat er zoiets als Razor bestond. Ik heb net deze pagina doorgekeken (ik ken w3fools.com overigens) en heb nu dus even wat Razor-kennis opgebouwd .
Nu ik ook weet dat het server-side is, zie ik meteen deze beveiligingsfout.

Sorry voor mijn onwetende reactie en bedankt voor de info

Misschien iets voor WhiteX om deze en deze pagina's eens door te nemen voor wat Razor-basiskennis en voor de rest goed de bovenstaande post doornemen ?

[R4gnax]

RobIII schreef op donderdag 29 augustus 2013 @ 02:10:
Nu ben ik geen Razor expert dus mogelijk kan dit efficiënter / korter / mooier

Dat klopt.
‌

code:

var markers = @(Html.Raw(new JavaScriptSerializer().Serialize(Model)));

JSON is niets anders dan een gelimiteerde subset van Javascript waarmee dit gewoon werkt. De Intellisense van Visual Studio zal misschien nog wel klagen, maar dat komt omdat Razor in JavaScript code blocks nog niet goed ondersteund wordt vanuit de JavaScript kant.

Waarschijnlijk is het netter om een JSON serializer gebruiken die attribuut markeringen ondersteunt om property namen op te geven, of die namen automatisch correct naar camelcase kan converteren via een generieke resolver/converter/etc. (Json.NET ondersteunt bijvoorbeeld allebei.) En het is waarschijnlijker ook netter om een extension method op HtmlHelper te maken die de serialisatie af kan handelen, maar het onderliggende idee blijft hetzelfde.

[ Voor 3% gewijzigd door R4gnax op 30-08-2013 11:17 ]

[RobIII]

R4gnax schreef op vrijdag 30 augustus 2013 @ 11:16:
Dat klopt.
‌

code:

var markers = @(Html.Raw(new JavaScriptSerializer().Serialize(Model)));

JSON is niets anders dan een gelimiteerde subset van Javascript waarmee dit gewoon werkt. De Intellisense van Visual Studio zal misschien nog wel klagen, maar dat komt omdat Razor in JavaScript code blocks nog niet goed ondersteund wordt vanuit de JavaScript kant.

Waarschijnlijk is het netter om een JSON serializer gebruiken die attribuut markeringen ondersteunt om property namen op te geven, of die namen automatisch correct naar camelcase kan converteren via een generieke resolver/converter/etc. (Json.NET ondersteunt bijvoorbeeld allebei.)

Ja, maar dat geeft toch
 [{"Title":"Foo","Lat":1.23,"Long":4.56},{"Title":"Bar","Lat":7.89,"Long":9.87}]
i.p.v.
 [{"Foo",1.23,4.56},{"Bar",7.89,9.87}]
?

Ik weet niet of/hoe Google maps om gaat met die propertynamen.

R4gnax schreef op vrijdag 30 augustus 2013 @ 11:16:
En het is waarschijnlijker ook netter om een extension method op HtmlHelper te maken die de serialisatie af kan handelen, maar het onderliggende idee blijft hetzelfde.

Uiteraard is 't netter dit even in een method te mikken i.p.v. in je view zo specifiek te zijn.

[R4gnax]

RobIII schreef op vrijdag 30 augustus 2013 @ 15:46:
[...]

Ja, maar dat geeft toch
 [{"Title":"Foo","Lat":1.23,"Long":4.56},{"Title":"Bar","Lat":7.89,"Long":9.87}]
i.p.v.
 [{"Foo",1.23,4.56},{"Bar",7.89,9.87}]
?

Ik weet niet of/hoe Google maps om gaat met die propertynamen.

Het tweede is niet geldig JavaScript, dus dat werkt sowieso niet. Misschien bedoelde je een syntax met geneste arrays? D.w.z. [["Foo",1.23,4.56],["Bar",7.89,9.87]]

De TS claimt gebruik te maken van de Google Maps v3 API:

Verwijderd schreef op maandag 26 augustus 2013 @ 22:15:
Momenteel maak ik in een project gebruik van google maps api v3.

De v3 API werkt alleen helemaal niet met zulke data arrays voor markers. Het aanmaken van een set markers op basis van een set marker data ziet er in de v3 API op z'n simpelst ongeveer zo uit:

JavaScript:

markers = markers.map( function( marker ) {
  return new google.maps.Marker({
    position : new google.maps.LatLng( marker.lat, marker.lng ),
    map      : map,
    title    : marker.title
  });
});

Zie ook : https://developers.google...pt/examples/marker-simple

[RobIII]

R4gnax schreef op zaterdag 31 augustus 2013 @ 11:39:
Het tweede is niet geldig JavaScript, dus dat werkt sowieso niet. Misschien bedoelde je een syntax met geneste arrays? D.w.z. [["Foo",1.23,4.56],["Bar",7.89,9.87]]

Euh, my bad. Inderdaad, beetje te snel getypz0rt

De TS claimt gebruik te maken van de Google Maps v3 API:

R4gnax schreef op zaterdag 31 augustus 2013 @ 11:39:
De v3 API werkt alleen helemaal niet met zulke data arrays voor markers. Het aanmaken van een set markers op basis van een set marker data ziet er in de v3 API op z'n simpelst ongeveer zo uit:

JavaScript:

markers = markers.map( function( marker ) {
  return new google.maps.Marker({
    position : new google.maps.LatLng( marker.lat, marker.lng ),
    map      : map,
    title    : marker.title
  });
});

Zie ook : https://developers.google...pt/examples/marker-simple

Oh, dat kan best; geen idee van. Ging er eigenlijk van uit dat wat in de TS stond wel de bedoeling was