4

I am new to google-maps. I am working on a project where i have to show a polyline with an arrow head. The size of the polyline is perfect but the arrow appears too big. i am simply using this code.

var lineSymbol = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
    scale: 2
    };
var a = new google.maps.LatLng(lat1, lon1);
var b = new google.maps.LatLng(lat2,lon2);
var myTrip = [a, b];
var flightPath = new google.maps.Polyline({
       path: myTrip,
       icons: [{
         icon: lineSymbol,
         offset: '100%'
       }],
       strokeColor: "#8B0000",
       strokeOpacity: 0.8,
       strokeWeight: 6
 });

These links below are the ones i have seen but they are not close to what i need :)

The links i have seen are

Community
  • 1
  • 1
Tamoor Rahil
  • 69
  • 1
  • 6
  • The API doesn't change the size(scale) of symbols when the zoom changes, so how can the marker get too big when the size didn't change? – Dr.Molle Sep 22 '14 at 22:04
  • i scale the symbol on zoom in and out events of map like scale = map.getZoom() * ;. There are 0-21 zoom levels so you do the math how you want to scale your symbol accordingly. – Abs Sep 23 '14 at 05:27
  • Its like that the scale isnt applied.. It seems the same to me :/ – Tamoor Rahil Sep 25 '14 at 08:01
  • @Abs should i save my symbols in a list then? as may be at one time i can have like 30 on the map.. but thanks for the comment... It gives more meaning than any post i have seen :) – Tamoor Rahil Sep 25 '14 at 08:04

1 Answers1

0

You can use the strategy described in your first link to do what you want. 

google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomLevel = map.getZoom();
    //this is where you will change your icon...     
  });

Inside that listener you can change the icon's scale property of your icon as well as any other properties you want to modify (maybe stroke weight, etc).

emersonthis
  • 32,822
  • 59
  • 210
  • 375