6 berichten aan het bekijken - 1 tot 6 (van in totaal 6)
  • Q:
    Bijdrager
    sallandsebeer

    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?

    Bijdrager
    sallandsebeer

    Iemand hier verstand van Java Script?

    Bijdrager
    jimeh

    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.

    Bijdrager
    sallandsebeer

    Hartelijk dank voor je reactie!:)

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

    Bijdrager
    sallandsebeer

    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);
          }
        });
      }
     
    Bijdrager
    jimeh

    Graag gedaan;)

6 berichten aan het bekijken - 1 tot 6 (van in totaal 6)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.