Maps API

Beste allen,

Ik probeer tot vergeefs aan toe de Google Maps API te gebruiken. Ik probeer een marker te vervangen door mijn eigen logo en tenslotte wil ik de navigatie functie er ook in hebben.

Dit doe ik op basis van deze tutuorials:

http://dreamdealer.nl/tutorials/custom_marker_icons_using_the_google_maps_api.html
http://www.dreamdealer.nl/tutorials/getting_directions_with_google_maps.html

Daaruit vloeit deze code voort, maar hoe krijg ik mijn custom marker en de route planner in één werkend? Het wil mij niet gelukken.
Route code:
http://pastebin.com/i9uTBza5

En dan wil ik deze code van de marker er werkend bij voegen:
http://pastebin.com/Un9xDK9B

Wie kan mij helpen?

Iemand hier verstand van Java Script?

Probeer eens bij de route code het volgende aan te passen.

Van:

    
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title:"My location"
    });

Naar:

    var image = new google.maps.MarkerImage('marker.png',
        new google.maps.Size(65, 124),
        new google.maps.Point(0,0),
        new google.maps.Point(56, 122)
    );

    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title:"My location"
      icon: image
    });

Dan voeg je dus een gedeelte van de code met de custom marker toe aan de code van de routeplanner.
Je maakt weer een variabele aan die de image moet voorstellen en deze stel je vervolgens in als custom icon bij de marker.
Als je goed kijkt zie je ook gelijkenissen tussen de 2 links die je gestuurd hebt. Alleen heeft de code van de custom marker dus een parameter meer namelijk “icon” waar je dus de variabele van de custom image in zet.

Je zult uiteraard even de image naam enzo moeten goed zetten.

Hartelijk dank voor je reactie! :slight_smile:

Ik ga het morgen proberen, Mac staat even niet binnen handbereik.

Bedankt!

Het is gelukt dankzij jou, met deze code:

<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  function initialize() {
    var latlng = new google.maps.LatLng(51.764696,5.526042);
    directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = {
      zoom: 14,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
    var image = new google.maps.MarkerImage('logo.png',
        new google.maps.Size(65, 124),
        new google.maps.Point(0,0),
        new google.maps.Point(56, 122)
    );

    var shadow = new google.maps.MarkerImage('marker_shadow.png',
        new google.maps.Size(96, 59),
        new google.maps.Point(0,0),
        new google.maps.Point(32, 59)
    );

    var customMarker = new google.maps.Marker({
        position: latlng,
        map: map,
        shadow: shadow,
        title:"Carlos Gallupa HQ",
        icon: image
    });
}
  function calcRoute() {
    var start = document.getElementById("routeStart").value;
    var end = "51.764696,5.526042";
    var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }

Graag gedaan :wink: