Javascript + google maps api (onclick + polyline tekenen) - Softwareontwikkeling

maandag 18 maart 2013 13:22

Acties:

Topicstarter

Dag allemaal, ik ben niet zo heel handig met javascript. Lezen gaat wel, maar schrijven is lastig. Ik zit nu al 2 dagen mijn tanden stuk te bijten op iets wat erg simpel zou moeten zijn. Ik wil via de google maps api een aantal routes laten tekenen.

Hieronder een voorbeeld van wat ik wil bereiken, maar het werkt niet. En ik heb geen idee WAAROM niet. Ik heb me een slag in de rondte gegoogled, maar ik kom er niet uit. Ik vermoed dat ik iets heel triviaal en heel simpel, compleet aan het verprutsen ben dus ik hoop dat iemand dit redelijk snel gezien heeft.

JavaScript:

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var x=new google.maps.LatLng(51.817072, 4.668734);

function initialize()
{
var mapProp = {
  center:x,
  zoom:17,
  mapTypeId:google.maps.MapTypeId.HYBRID
  };
  
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

}
function plotten()
 {

  var map = new google.maps.Map(document.getElementById("map-canvas"),
      mapOptions);
  var flightPlanCoordinates = [
            new google.maps.LatLng(51.816584, 4.664282),
            new google.maps.LatLng(51.817228, 4.665628),
            new google.maps.LatLng(51.818186, 4.666905),
            new google.maps.LatLng(51.817821, 4.668412),
            new google.maps.LatLng(51.818876, 4.669346),
            new google.maps.LatLng(51.819161, 4.669989),                
            new google.maps.LatLng(51.819290, 4.670182),
            new google.maps.LatLng(51.819406, 4.670451),
            new google.maps.LatLng(51.819257, 4.671513),
            new google.maps.LatLng(51.818999, 4.672103),            
            new google.maps.LatLng(51.818621, 4.671561),            
            new google.maps.LatLng(51.818014, 4.670703),
            new google.maps.LatLng(51.817009, 4.669442),            
            new google.maps.LatLng(51.815858, 4.669335),                
            new google.maps.LatLng(51.815649, 4.670665),            
            new google.maps.LatLng(51.815245, 4.672419),
            new google.maps.LatLng(51.815049, 4.673160),    
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
} 
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:1000px;height:800px;"></div>
<input type="button" onClick="plotten()" value="plot route">
</body>
</html>

maandag 18 maart 2013 13:29

Acties:

curvemod

Dit is natuurlijk een hele makkelijke TS, maar hiermee gaat niemand je helpen. Je moet uitleggen wat precies je probleem is, gedetailleerder dus, wat je geprobeerd hebt en waarom dat niet werkt. Niet je code dumpen en zeggen "Het werkt niet".

maandag 18 maart 2013 13:31

Acties:

Rekcor

Sowieso handig om http://jsbin.com/amelej/1/edit aan te maken.

maandag 18 maart 2013 13:33

Acties:

Dennis013

Topicstarter

OK, nou excuses dat ik het, in jouw ogen, zo simpel stel. Ik wil je wel verzekeren dat ik het niet zo aangepakt hebt.
Ik ben er wel echt 2 volle dagen mee aan het puzzelen geweest vorige week. Ik ben het trouwens niet met je eens dat ik het zo simpel doe. Het script laat zien wat ik geprobeerd te maken. Het probleem is dat de button niet de funtion uitvoert.

ik krijg het wel zo ver dat deze het onload uitvoert, maar ik heb echt te weinig javascript in de vingers om het zo werkend te krijgen.
Ik ben het aan het leren en als jij me nu zegt dat niemand me gaat helpen omdat ik het niet werkend krijg dan is het het kip-en-het-ei verhaal.

Daar aan toevoegend; ik heb talloze zoekqueries gedaan om een soort voorbeeld te vinden van wat ik probeer.
Gewoon een onclick actie en dan de googe maps api een aantal lijnen langs coordinaten te laten trekken.

[ Voor 14% gewijzigd door Dennis013 op 18-03-2013 13:34 ]

maandag 18 maart 2013 13:33

Acties:

Rekcor

Uncaught ReferenceError: mapOptions is not defined

maandag 18 maart 2013 13:35

Acties:

Dennis013

Topicstarter

Rekcor schreef op maandag 18 maart 2013 @ 13:31:
Sowieso handig om http://jsbin.com/amelej/1/edit aan te maken.

Ik ken dit niet? Is dit handig? Ik gebruik nu 'gewoon' dreamweaver als editor. Die geeft ook foutmeldingen, maar ik kan die nog niet allemaal meteen plaatsen.

Rekcor schreef op maandag 18 maart 2013 @ 13:33:
Uncaught ReferenceError: mapOptions is not defined

Waar zie je dit?

[ Voor 21% gewijzigd door Dennis013 op 18-03-2013 13:36 ]

maandag 18 maart 2013 13:36

Acties:

Rekcor

jsbin is handig voor dit soort fora, omdat anderen jouw code dan live kunnen bekijken en wijzigen.

met jouw code krijg ik de melding van 13:33u in jsbin (wel even op F12 drukken in FF/GC)

[ Voor 13% gewijzigd door Rekcor op 18-03-2013 13:37 ]

maandag 18 maart 2013 13:41

Acties:

Dennis013

Topicstarter

ok, ik kan zelf die melding niet terug vinden in het scherm, maar ik ga even na wat er fout kan zijn met die 'mapOptions '

Bedankt

maandag 18 maart 2013 14:19

Acties:

Bosmonster

*zucht*

Wat er fout kan zijn is vrij simpel: Je gebruikt een variabele die nooit aangemaakt is (mapOptions). Google Maps verwacht daar een object met, je raadt het al, map options.

Verder maak je in je plotten-functie een hele nieuwe map aan, ipv gebruik te maken van de map-instantie die je dan al hebt. En daar gebruik je dan een id "map-canvas" voor, die ik ook nergens tegenkom, dus die gaat nooit weggeschreven worden naar je pagina.

[ Voor 6% gewijzigd door Bosmonster op 18-03-2013 14:19 ]

maandag 18 maart 2013 15:09

Acties:

Rekcor

http://jsbin.com/amelej/3/

werkt (als je op Plot route drukt). Kwestie van variabelen goed definieren in de goede scope.

http://www.digital-web.com/articles/scope_in_javascript/

maandag 18 maart 2013 15:18

Acties:

Dennis013

Topicstarter

OK, ik kan hier heel wat mee waarschijnlijk. Ik laat even weten hoe het me vergaan is als ik hier weer een momentje voor heb.
Alvast vriendelijk bedankt.

Update:
Ik wil dit topic niet naar boven schoppen, dus vandaar deze update. Ik wil iedereen van harte bedanken. Ik heb weer wat geleerd en ik herken die variabelen nu een heel stuk beter.
Bedankt bedankt bedankt!

[ Voor 41% gewijzigd door Dennis013 op 19-03-2013 16:05 ]