Hoe functie oproepen

matistop333 · 10 November 2014

Hallo,
wou lang geleden eens iets proberen maar heb dit opgegeven omdat ik niet wist hoe je afstanden kon berekenen. Nu weet ik dat namelijk wel en ben hier nu ook druk mee bezig Heb alleen een klein probleempje, ik gebruik de google maps api en in deze example code staat een button <button type="button" onclick="calculateDistances();">Calculate
distances</button> en als je daarop drukt dan berekent het de afstand. Maar ik wil dat dit automatisch gebeurt zonder op de knop te drukken, dat het gewoon meteen op de pagina staat. Heb dit al geprobeert door <button type="button" onclick="calculateDistances();">Calculate
distances</button> te vervangen door calculateDistances(); maar dit lukt niet, en zou ook totaal niet weten hoe dit moet.

Weet niet of je het nodig hebt, maar hier is de volledige code:

Display Spoiler

PHP

<!DOCTYPE html>
<html>
  <head>
    <title>Distance Matrix service</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var map;
var geocoder;
var bounds = new google.maps.LatLngBounds();
var markersArray = [];


var origin2 = '<?php echo $_GET['punt1']; ?>, Belgium';
var destinationA = '<?php echo $_GET['punt2']; ?>, Belgium';


var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';


function initialize() {
  var opts = {
    center: new google.maps.LatLng(55.53, 9.4),
    zoom: 10
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), opts);
  geocoder = new google.maps.Geocoder();
}


function calculateDistances() {
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix(
    {
      origins: [origin2],
      destinations: [destinationA],
      travelMode: google.maps.TravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.METRIC,
      avoidHighways: false,
      avoidTolls: false
    }, callback);
}


function callback(response, status) {
  if (status != google.maps.DistanceMatrixStatus.OK) {
    alert('Error was: ' + status);
  } else {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;
    var outputDiv = document.getElementById('outputDiv');
    outputDiv.innerHTML = '';
    deleteOverlays();


    for (var i = 0; i < origins.length; i++) {
      var results = response.rows[i].elements;
      addMarker(origins[i], false);
      for (var j = 0; j < results.length; j++) {
        addMarker(destinations[j], true);
        outputDiv.innerHTML += results[j].distance.text + '<br>';
      }
    }
  }
}


function addMarker(location, isDestination) {
  var icon;
  if (isDestination) {
    icon = destinationIcon;
  } else {
    icon = originIcon;
  }
  geocoder.geocode({'address': location}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      bounds.extend(results[0].geometry.location);
      map.fitBounds(bounds);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location,
        icon: icon
      });
      markersArray.push(marker);
    } else {
      alert('Geocode was not successful for the following reason: '
        + status);
    }
  });
}


function deleteOverlays() {
  for (var i = 0; i < markersArray.length; i++) {
    markersArray[i].setMap(null);
  }
  markersArray = [];
}


google.maps.event.addDomListener(window, 'load', initialize);


    </script>
  </head>
  <body>
    <div id="content-pane">
      <div id="inputs">
        <pre>
        </pre>
        <p><button type="button" onclick="calculateDistances();">Calculate
          distances</button></p>
      </div>
      <div id="outputDiv"></div>
    </div>
    <div id="map-canvas"></div>
  </body>
</html>

Toon Meer

Victor · 10 November 2014

Tussen script tags zetten. Anders is het gewoon tekst.

T.Nijborg · 11 November 2014

Citaat van victor

Tussen script tags zetten. Anders is het gewoon tekst.

Inderdaad dus gewoon ergens:

Code

<script>
calculateDistances();
</script>

matistop333 · 11 November 2014

Bedankt, nu werkt het wel

DNS update Directadmin

PC probleem

Let op Vimexx klanten

wie kan mij helpen met Security aanscherpen voor nmijn website

Ik ben op zoek naar een goede hosting

App bouwer gezocht

4G met USB Dongle - windows 11 Chrome of Firefox - browser probleem

Hosting en websites op maat

Xenforo buckaroo plugin

300+ Nieuwe domeinnamen Maart 2024

Actieve crime

Hoe functie oproepen

Participate now!

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Het Belang van Standaardisatie

De Revolutionaire Rol van IT in Alzheimeronderzoek

Functioneel ontwerp

Access Control List implementatie in PHP/MySQL - deel 1/2

Access Control List implementatie in PHP/MySQL - deel 2/2

Delen

Gebruikers die dit topic bekijken