Over HTML en CSS kan ik nog wel redelijk mee praten, maar daar houdt mijn kennis dan ook wel op. Van complexere talen zoals JavaScript heb ik echt geen verstand (hoewel ik wel begrijp hoe het werkt, alleen weet ik niet hoe je het opschrijft). Met een beetje knippen en plakken kan ik nog wel wat stappen maken, maar op dit moment loop ik vast.
Doel:Een interactief Google Maps kaartje met meerdere markers (locatievlaggen) integreren op een webpagina, waarbij er informatie in een tekstballon getoond wordt wanneer er op een marker geklikt wordt. De informatie per marker verschilt.
Wat lukt: De Google Maps kaart integreren op de webpagina Meerdere markers op de kaart vertonen Een tekstballon tonen wanneer er op een marker geklikt wordt
Wat mislukt: Verschillende informatie per marker in de tekstballon krijgen (is nu telkens dezelfde informatie)
Huidige status:http://www.marvinjames.nl/testmarker.html
Uitleg:In de array gegevens zijn meerdere locaties (locatienaam, lengtegraad, breedtegraad) opgenomen.Om meerdere markers te genereren wordt er een for-loop gebruikt.Om de een of andere reden lukt het de Javascript code wel om van de verschillende locaties de coördinaten uit te lezen, maar voor de informatie in de tekstballon enkel de laatste record uit de array gegevens gepakt!De markers staan dus wel op verschillende plaatsen, maar de informatie is overal hetzelfde.Ik vind het heel merkwaardig dat de verschillende coordinaten wel gepakt worden, maar de verschillende informatie niet.Daarentegen weet ik niet helemaal wat ik doe, dus ik zal zeker iets fout doen. Misschien weet iemand anders raad?
Ik heb de code hier niet vermeld in verband met de lap tekst. Deze kan op de URL hierboven teruggevonden worden (paginabron bekijken), maar als er behoefte is aan de code, kan ik hem er natuurlijk zo bij plakken.
Alvast bedankt! Ik zou er erg geholpen mee zijn.
Probeer dit: "flags[0]" eens te wijzigen in "flags(i)[0]".
Uiteraard zonder de aanhalingstekens.
Succes.
Bewerking: dat (i) moet gedaan worden met dezelfde brackets als om de '0'. Alleen wordt dat gezien als cursief plaatsen van tekst hier op het forum. Vandaar even de haakjes...
(Bewerkt door Mrmoon om 14:47, 13-12-2012)
Mrmoon om 14:33, 13-12-2012Probeer dit: "flags[0]" eens te wijzigen in "flags(i)[0]".
Allereerst bedankt voor de reactie.Het is me echter nog niet gelukt!
Voor de duidelijkheid hieronder de huidige code:
for (var i = 0; i < locations.length; i++) { var flags = locations[i]; var myLatLng = new google.maps.LatLng(flags[1], flags[2]); markers[i] = new google.maps.Marker({ map: map, position: myLatLng, icon: image, }); google.maps.event.addListener(markers[i], 'click', function() { var marker = this; infoWindow.setContent(flags[0]); infoWindow.open(map, marker); });};
markers[i] = new google.maps.Marker({ map: map, position: myLatLng, icon: image, });
google.maps.event.addListener(markers[i], 'click', function() { var marker = this; infoWindow.setContent(flags[0]); infoWindow.open(map, marker); });};
Wanneer ik het volgende verander:
infoWindow.setContent(flags[0]);veranderen ininfoWindow.setContent(flags[i][0]);
veranderen in
infoWindow.setContent(flags[i][0]);
(Bewerkt door Tsux om 15:08, 13-12-2012)
Ik snap wat er gebeurt. Echter is je array met gegevens naar mijn idee een geneste array. Oftewel een array in een array. Naar mijn idee zou het dus als volgt moeten zijn:
var gegevens = [ ['<strong>Locatie - Den Haag</strong><br />06 - 12 34 56 78', 52.0688811, 4.3076999,1], ['<strong>Locatie - Tilburg</strong><br />06 - 12 34 56 78', 51.5968067, 5.0942092,2], ['<strong>Locatie - Woerden</strong><br />06 - 12 34 56 78', 52.0861647, 4.8862794,3], ['<strong>Locatie - Almere</strong><br />06 - 12 34 56 78', 52.3701165, 5.2199218,4] ]; function codeAddress(locations) { var map = new google.maps.Map(document.getElementById("map_canvas"), { zoom: 7, center: new google.maps.LatLng(52.2,5.5), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infoWindow = new google.maps.InfoWindow(); var image = new google.maps.MarkerImage('http://www.marvinjames.nl/Google_Maps_Marker.png', new google.maps.Size(24, 31), new google.maps.Point(0,0), new google.maps.Point(12, 16)); var markers = []; for (var i = 0; i < locations.length; i++) { var flags = locations[i]; var myLatLng = new google.maps.LatLng(flags[i][1], flags[i][2]); markers[i] = new google.maps.Marker({ map: map, position: myLatLng, icon: image, }); google.maps.event.addListener(markers[i], 'click', function() { var marker = this; infoWindow.setContent(flags[i][0]); infoWindow.open(map, marker); }); }; };
var infoWindow = new google.maps.InfoWindow();
var image = new google.maps.MarkerImage('http://www.marvinjames.nl/Google_Maps_Marker.png', new google.maps.Size(24, 31), new google.maps.Point(0,0), new google.maps.Point(12, 16)); var markers = []; for (var i = 0; i < locations.length; i++) { var flags = locations[i]; var myLatLng = new google.maps.LatLng(flags[i][1], flags[i][2]);
google.maps.event.addListener(markers[i], 'click', function() { var marker = this; infoWindow.setContent(flags[i][0]); infoWindow.open(map, marker); }); }; };
Laat me anders even weten of dit werkt.
(Bewerkt door Tsux om 15:19, 13-12-2012)
for (var i = 0; i < locations.length; i++) { (function () {var flags = locations[i]; var myLatLng = new google.maps.LatLng(flags[1], flags[2]); markers[i] = new google.maps.Marker({ map: map, position: myLatLng, icon: image, }); google.maps.event.addListener(markers[i], 'click', function() { var marker = this; infoWindow.setContent(flags[0]); infoWindow.open(map, marker); }); })();
google.maps.event.addListener(markers[i], 'click', function() { var marker = this; infoWindow.setContent(flags[0]); infoWindow.open(map, marker); }); })();
Gast
