Google Maps API: plot kaart na invoering coordinaten in form

dinsdag 11 februari 2014 16:19

Acties:

0 Henk 'm!

stijnos1991

Topicstarter

Ik probeer een simpel HTML formulier te maken, en samen te laten werken met Google Maps. Helaas kom ik niet veel verder.
Het is de bedoeling 4 velden: lengtegraad, breedtegraad, naam, details in te vullen, en deze dan weer te geven op de kaart.
Het HTML formulier is het probleem niet, maar hoe krijg ik de velden verstuurd naar de API?

Code tot dusver:

code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBI3QHVxdmyYZM0fpp1duYxRR7aFySlSJM&sensor=true">
    </script>
    <script type="text/javascript">
      function initialize() {
        document.getElementById('long').value
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
       
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <form name="input">
    <input name="long" id="long" type="text">Longitude<br>
    <input type="text" name="lat" id="lat">Latitude<br>
  <input type="text" name="name" id="name">Name<br>
  <input type="text" name="description" id="description">Description<br>
    <input type="submit" value="Submit" onclick="initialize();">
  </form>
    <div id="map-canvas" style="width: 400px; height: 400px;"></div></div>
  </body>
</html>

dinsdag 11 februari 2014 16:33

Acties:

0 Henk 'm!

Miyamoto

https://developers.google...javascript/tutorial?hl=nl

This documentation is designed for people familiar with JavaScript programming and object-oriented programming concepts. You should also be familiar with Google Maps from a user's point of view. There are many JavaScript tutorials available on the Web.

Enige kennis van JavaScript is vereist.

dinsdag 11 februari 2014 18:55

Acties:

0 Henk 'm!

stijnos1991

Topicstarter

Je moet ergens beginnen he.
Kan je me vertellen waar het hier fout gaat? Dit heb ik overgenomen uit meerdere tutorials, maar het wil nog niet werken:

code:

<script>
var latt = document.getElementById("latt");
var longg = document.getElementById("longg");

var myCenter=new google.maps.LatLng(latt,longg);

Met deze form:

code:

<form>
  Lattitude: <input type="text" id="latt" />
  Longtitude: <input type="text" id="longg" />
  <input type="button" value="Send" onClick="initialize();">

</form>

dinsdag 11 februari 2014 19:00

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Html
Javascript

stijnos1991 schreef op dinsdag 11 februari 2014 @ 18:55:
Je moet ergens beginnen he.
code:
1
var myCenter=new google.maps.LatLng(latt,longg);

Je hebt nu iets in myCenter gestopt... en dan? Misschien handig om dat "iets" dan ook weer te gebruiken om op de kaart te zetten?

Miyamoto schreef op dinsdag 11 februari 2014 @ 16:33:
Enige kennis van JavaScript is vereist.

Enige basiskennis programmeren ook.

[edit]
Overigens (bedenk ik nu pas): in latt en long zit ook nog eens iets anders dan jij waarschijnlijk verwacht. Als je eens in je console / debugger kijkt wat er precies in zit?

[ Voor 48% gewijzigd door RobIII op 11-02-2014 19:03 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 11 februari 2014 19:12

Acties:

0 Henk 'm!

stijnos1991

Topicstarter

Bedankt voor je antwoord.
Daarna begint het initiliseren van de kaart. Dat werkt, als ik de variabelen vastleg. Niet als ik ze ophaal uit van het formulier.

Overzicht hele code (anders dan uit de startpost, dit werkt namelijk wel)

code:

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBI3QHVxdmyYZM0fpp1duYxRR7aFySlSJM&sensor=false">
</script>

<script>

var latt = 37.4185;
var longg = 122.08774;
//var latt = document.getElementById("latt");
//var longg = document.getElementById("longg");

var myCenter=new google.maps.LatLng(latt,longg);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:10,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
  position:myCenter,
  });

marker.setMap(map);

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
  });

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<form>
  Lattitude: <input type="text" id="latt" />
  Longtitude: <input type="text" id="longg" />
  <input type="button" value="Send" onClick="initialize();">

</form>
  <br>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

Wat werkt wel: de lengte en breedtegraad vastgelegd in Javascript. De map laat de juiste positie zien.

code:

<script>

var latt = 37.4185;
var longg = 122.08774;

var myCenter=new google.maps.LatLng(latt,longg);

Wat werkt niet: de variabelen vast laten leggen door het HTML formulier.

code:

<script>

var latt = document.getElementById("latt");
var longg = document.getElementById("longg");

var myCenter=new google.maps.LatLng(latt,longg);

De kaart update niet als ik de twee variabelen invoer. Komt dit omdat ze niet goed worden doorgegeven of een andere reden?

dinsdag 11 februari 2014 19:41

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Html
Javascript

stijnos1991 schreef op dinsdag 11 februari 2014 @ 19:12:
De kaart update niet als ik de twee variabelen invoer. Komt dit omdat ze niet goed worden doorgegeven of een andere reden?

De functie heet getElementById, niet getValueFromElementById

quote: https://developer.mozilla...I/document.getElementById
Returns a reference to the element by its ID.

M.a.w.: Je stopt een reference naar een DOM element in je variabelen en niet (wat jij wil) de VALUE die in dat element staat

[ Voor 36% gewijzigd door RobIII op 11-02-2014 19:46 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 11 februari 2014 21:38

Acties:

0 Henk 'm!

stijnos1991

Topicstarter

Yes! Gelukt. Hartstikke bedankt. Dit was inderdaad de truc: var latt = document.getElementById('latt').value;

Onderwerpen