Añadir Iconos SVG en movimiento a Google Maps V3

04 de Sep, 2014

Se deben crear los iconos SVG, se pueden hacer en-linea a través de este link:

http://imagen.online-convert.com/es/convertir-a-svg

Inicializamos Google Maps

< View plain text >
code

  1. <script src="https://maps.google.com/maps/api/js?sensor=false&amp;v=3.15"></script>
  2. <script src="../js/markerwithlabel.js" type="text/javascript"></script>

Agregamos el icono en Svg y las variables que usaremos junto con el script de movimiento del mapa

< View plain text >
code

  1. <script type="text/javascript">// <![CDATA[
  2. // Iniciamos el mapa
  3. //Variables del mapa, linea e imagenes
  4. var count = [];
  5. var line = [];
  6. var cabin = [];
  7. var lineSymbol = [];
  8. var lineCoordinates = new Array();
  9. var path= new Array();
  10. var rotacion = new Array();
  11. var offtime = new Array();
  12. var myTimer;
  13. var color = "blue";
  14. // imagenes en SVG para los iconos
  15. path[1] = 'M4 307 c-2 -7 -3 -56 -2 -108 l3 -94 155 0 155 0 0 105 0 105 -153 3 c-121 2 -154 0 -158 -11z m296 -97 l0 -90 -70 0 -70 0 0 51 c0 42 2 49 13 40 8 -6 17 -8 21 -4 7 7 -32 53 -46 53 -4 0 -8 -31 -8 -70 l0 -70 -60 0 -60 0 0 90 0 90 140 0 140 0 0 -90z';
  16.  
  17. rotacion["AB"] = 290;
  18.  
  19. lineCoordinates["AB"] = [
  20. new google.maps.LatLng(40.42783482, -3.72206398),
  21. new google.maps.LatLng(40.41974079, -3.74871701)
  22. ];
  23.  
  24. function initialize() {
  25. var mapOptions = {
  26. center: new google.maps.LatLng(40.42415921,-3.73606185),
  27. zoom: 15,
  28. };
  29. var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  30.  
  31. //Creamos la marca
  32.  
  33. function marca(cabina,direccion) {
  34. // Definimos el simbolo
  35. lineSymbol = {
  36. path: path[AB],
  37. // fillColor: 'red',
  38. // fillOpacity: 0.8,
  39. scale: 0.1,
  40. strokeColor: color,
  41. strokeWeight: 2,
  42. rotation: rotacion[direccion]
  43. };
  44.  
  45. // Creamos la linea de polyline.
  46. line[cabina] = new google.maps.Polyline({
  47. path: lineCoordinates[direccion],
  48. icons: [{
  49. icon: lineSymbol[cabina],
  50. offset: '100%'
  51. }],
  52. strokeWeight: 0,
  53. map: map
  54. });
  55. animateCircle(cabina);
  56.  
  57. }
  58. }
  59. // Use the DOM setInterval() function to change the offset of the symbol
  60. // at fixed intervals.
  61.  
  62. function animateCircle(cabin) {
  63. count[cabin] = 0;
  64. offtime[cabin] = window.setInterval(function() {
  65. count[cabin] = (count[cabin] + 1) % 200;
  66.  
  67. var icons = line[cabin].get('icons');
  68. icons[0].offset = (count[cabin] / 2) + '%';
  69. line[cabin].set('icons', icons);
  70. if (count[cabin]&gt;198) {
  71. icons[0].offset = '0%';
  72. line[cabin].set('icons', icons);
  73. window.clearInterval(offtime[cabin]);
  74. }
  75. if (count[cabin]==199) {
  76. line[cabin].set('icons');
  77. }
  78. }, 5900);
  79. }
  80.  
  81. google.maps.event.addDomListener(window, 'load', initialize);
  82. // ]]></script>