How to Change the Google Maps API V3 Bookmark Icon

Navigation
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>
    
asked by anonymous 01.02.2018 / 20:26

3 answers

0

But where do I put this code in my code, because I put it as mentioned and it continues the same thing, could show me in the code.

    
02.02.2018 / 13:47
0

Friend, I've changed the location icon on the company page where I work, you can see here , just click on "we're here", well .. without further delay let's 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>

Hope it helps

    
16.10.2018 / 22:12
-1

Here is an example I used for my system:

link

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]
});

If you leave the ICON property commented, it will display the api default icon. Otherwise you can set the image you want.

    
01.02.2018 / 20:32
How to separate records into blocks for parallel processing? TV style information bar (similar to tag marquee) [duplicate]