[JS] Google Maps polygonen

zondag 14 maart 2010 23:00

Acties:

0 Henk 'm!

Topicstarter

Ik ben nu even aan het spelen met google Maps. Wat ik graag wil is het volgende; er moeten verschillende polygonen op de map verschijnen. Elk polygon moet zijn eigen .js-bestand hebben. Dus polygon1.js, polygon2,js, etc. Uiteindelijk maak ik wel iets waardoor het ook automatisch toegevoegd wordt in de code, maar eerst even dit:

Nu dacht ik het heel makkelijk te doen:

HTML:

<script type="text/javascript">
var map;

function initialize() {
  var hetcentrum = new google.maps.LatLng(53.0, 6.0);
  var myOptions = {
    zoom: 13,
    center: hetcentrum,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
<script type="text/javascript" src="test.js"></script>

Met in test.js:

JavaScript:

var myCoordinates = [
new google.maps.LatLng(53.1, 6.0),
new google.maps.LatLng(53.0, 6.1),
new google.maps.LatLng(52.1, 3.0),
new google.maps.LatLng(52.0, 3.1)
];
var polyOptions = {
paths: myCoordinates,
strokeColor: "#ff0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#ff0000",
fillOpacity: 0.35
}
var henk = new google.maps.Polygon(polyOptions);
henk.setMap(map);

Dit werkt (natuurlijk) niet. Ik heb het nagezocht en dit schijnt met scoping te maken te hebben. Ik heb de map-variabele al buiten de functie gezet, maar nog werkt het niet goed. Als ik de polygon-functie ín de initialize-functie zet, gaat het wél goed. Dus moet het volgens mij wel met scoping te maken hebben... Maar wat doe ik precies fout?

Na wat verder zoeken zag ik de methode
document.write() met daarin het script... maar dat werkt al helemaal niet

Wat wel werkt is alleen it.setMap(map) in de functie zetten, en de rest in test.js laten. Maar dat wil ik nou net anders

[ Voor 11% gewijzigd door maarud op 14-03-2010 23:27 ]

maandag 15 maart 2010 00:24

Acties:

0 Henk 'm!

SvMp

Je code is niet compleet volgens mij. Initialize wordt niet aangeroepen, en er wordt geen Google-api geladen. Ik vind het lastig om aan de hand van wat hier staat de fout te ontdekken. Wat gaat er precies fout? Wat zijn de foutmeldingen?

[ Voor 12% gewijzigd door SvMp op 15-03-2010 00:24 ]

maandag 15 maart 2010 01:14

Acties:

0 Henk 'm!

pieturp

gaffa!

Je kunt inderdaad natuurlijk nog geen "henk" maken als de Google API nog niet geladen is. Zet dat dus in een losse functie en roep die aan, vlak voor 't eind van de pagina of in je load event handler.

Ik zie in de code die je post niks geen scoping issues. 't Lijkt mij simpelweg met timing te maken te hebben. Maar *met SvMp: post even iets meer details.

... en etcetera en zo

maandag 15 maart 2010 14:12

Acties:

0 Henk 'm!

maarud

Topicstarter

De volledige code is als volgt:

HTML:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;

function initialize() {
  var hetcentrum = new google.maps.LatLng(55.0, 7.0);
  var myOptions = {
    zoom: 5,
    center: hetcentrum,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  henk.setMap(map);
  }
</script>

</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
  <script type="text/javascript" src="test.js"></script> 
</body>
</html>

dit werkt prima, omdat henk.setMap(map) in de functie staat. Maar als ik deze apart zet, in test.js bijvoorbeeld, dan doet ie het niet. Het is vast heel logisch maar volgens mij zie ik iets over het hoofd.

Wat uiteindelijk de bedoeling namelijk is, is dat ik 50 polygonen in een map wil stoppen (elk polygon zijn eigen naam dus) en die dus aan de map wil toevoegen. Maar dat wil ik niet handmatig doen (steeds naam.setMap(map) aan de code toevoegen) dus vandaar dat ik dat per polygon.js wil doen..

maandag 15 maart 2010 14:17

Acties:

0 Henk 'm!

pieturp

gaffa!

Zet dat hele codeblock met functie initialize 'ns onder test.js, dus net voor het einde van je body..

edit: Wacht. Dat heeft geen zin: je zult de code in test.js ook in een functie moeten wrappen en die aanroepen vanuit initialize.

[ Voor 40% gewijzigd door pieturp op 15-03-2010 14:22 ]

... en etcetera en zo

maandag 15 maart 2010 14:20

Acties:

0 Henk 'm!

maarud

Topicstarter

omg, natuurlijk, de polygon-functie doet niets als hij niet wordt aangeroepen... Verpakken in een functie en een body onload doen wonderen

nu moet het allemaal nog automatisch gebeuren.. Maar via internet kan je geen code toevoegen aan een pagina (elke nieuwe polygon in de map moet dus toegevoegd worden aan de body onload).

Dat wordt dus wat lokaal schrijven in visual basic ofzo

Of dmv een scriptje een directory checken op nieuw .js'jes, en die toevoegen... Aah, genoeg te doen

[ Voor 58% gewijzigd door maarud op 15-03-2010 14:42 ]

Onderwerpen