How to Trade Icon Bookmark Google Maps API V3

Asked

Viewed 2,604 times

-1

<script type = "text/javascript" >
var map;
var infowindow = new google.maps.InfoWindow();

function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer({
    suppressPolylines: true,
    infoWindow: infowindow
  });
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: -23.5505,
      lng: -46.6333
    }
  });
  directionsDisplay.setMap(map);
  calculateAndDisplayRoute(directionsService, directionsDisplay);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var waypts = [{
    location: '41.062317, 28.899756',
    stopover: true
  }, {
    location: '41.062276, 28.898866',
    stopover: true
  }, {
    location: '41.061993, 28.8982',
    stopover: true
  }];
  directionsService.route({
    origin: {
      lat: 41.063328,
      lng: 28.901215
    },
    destination: {
      lat: 41.060756,
      lng: 28.900046
    },
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setOptions({
        directions: response,
      })
      var route = response.routes[0];
      renderDirectionsPolylines(response, map);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });

}

google.maps.event.addDomListener(window, "load", initMap);

var polylineOptions = {
  strokeColor: '#C83939',
  strokeOpacity: 1,
  strokeWeight: 4,

};
//var colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF"];
var colors = "#4986E7";
var polylines = [];

function renderDirectionsPolylines(response) {
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < polylines.length; i++) {
    polylines[i].setMap(null);
  }
  var legs = response.routes[0].legs;
  for (i = 0; i < legs.length; i++) {
    var steps = legs[i].steps;
    for (j = 0; j < steps.length; j++) {
      var nextSegment = steps[j].path;
      var stepPolyline = new google.maps.Polyline(polylineOptions);
      stepPolyline.setOptions({
        strokeColor: colors,

      })
      for (k = 0; k < nextSegment.length; k++) {
        stepPolyline.getPath().push(nextSegment[k]);
        bounds.extend(nextSegment[k]);
      }
      polylines.push(stepPolyline);
      stepPolyline.setMap(map);
      // route click listeners, different one on each step
      google.maps.event.addListener(stepPolyline, 'click', function(evt) {
        infowindow.setContent("you clicked on the route<br>" + evt.latLng.toUrlValue(6));
        infowindow.setPosition(evt.latLng);
        infowindow.open(map);
      })
    }
  }
  map.fitBounds(bounds);
}
</script>
javascript

  • Could you add some description to your problem? What’s wrong with your code?

  • There is no mistake just like to change the Icone Marker, because this pattern and I am not able to change, if you can help me in the code I thank, I’m getting it.

2 answers

0

Friend, I changed the location icon on the page of the company where I work, you can see working here, Just click on "we’re here," good.. without further delay we’ll go to the code:

<script>                                        
    function initMap() {
       var location = new google.maps.LatLng(-31.7530300, -52.3335000);
       var mapCanvas = document.getElementById('map');
       var mapOptions = {
                    center: location,
                    zoom: 16,
                    panControl: false,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
       }
       var map = new google.maps.Map(mapCanvas, mapOptions);

       var markerImage = 'img/maps.png'; <-- aqui utilizei um ícone personalizado
       var marker = new google.maps.Marker({
                                    position: location,                                                 
                                    map: map,
                                    icon: markerImage
                                    });

        var contentString = '<div class="info-window">' +
                            '<h3>GloboSolution</h3>' +
                            '<div class="info-content">' +
                            'Rua Pinto Martins 292, Pelotas-RS <br>' +
                            'Horário de atendimento:<br> 09:00 as 12:00 - 14:00 as 18:30 seg-sex'+
                            '</div>' +
                            '</div>';

       var infowindow = new google.maps.InfoWindow({
                                                content: contentString,
                                                maxWidth: 400
                                            });



    map.addListener('idle', function () { 
           google.maps.event.trigger(this, 'resize');}); 
           infowindow.open(map, marker);   
    }

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

I hope it helps

-1

Here’s an example I used for my system:

https://developers.google.com/maps/documentation/javascript/custom-markers?hl=pt-br

Use this property:

    var image = new google.maps.MarkerImage('../imagens/truck.png',
    var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: image,
    shape: shape,
    title: beach[0],
    zIndex: beach[3]
});

Leaving the ICON property commented will display the default icon of the api. Otherwise you can set the image you want.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.