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
- <script src="https://maps.google.com/maps/api/js?sensor=false&v=3.15"></script>
- <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
- <script type="text/javascript">// <![CDATA[
- // Iniciamos el mapa
- //Variables del mapa, linea e imagenes
- var count = [];
- var line = [];
- var cabin = [];
- var lineSymbol = [];
- var lineCoordinates = new Array();
- var path= new Array();
- var rotacion = new Array();
- var offtime = new Array();
- var myTimer;
- var color = "blue";
- // imagenes en SVG para los iconos
- 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';
- rotacion["AB"] = 290;
- lineCoordinates["AB"] = [
- new google.maps.LatLng(40.42783482, -3.72206398),
- new google.maps.LatLng(40.41974079, -3.74871701)
- ];
- function initialize() {
- var mapOptions = {
- center: new google.maps.LatLng(40.42415921,-3.73606185),
- zoom: 15,
- };
- var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
- //Creamos la marca
- function marca(cabina,direccion) {
- // Definimos el simbolo
- lineSymbol = {
- path: path[AB],
- // fillColor: 'red',
- // fillOpacity: 0.8,
- scale: 0.1,
- strokeColor: color,
- strokeWeight: 2,
- rotation: rotacion[direccion]
- };
- // Creamos la linea de polyline.
- line[cabina] = new google.maps.Polyline({
- path: lineCoordinates[direccion],
- icons: [{
- icon: lineSymbol[cabina],
- offset: '100%'
- }],
- strokeWeight: 0,
- map: map
- });
- animateCircle(cabina);
- }
- }
- // Use the DOM setInterval() function to change the offset of the symbol
- // at fixed intervals.
- function animateCircle(cabin) {
- count[cabin] = 0;
- offtime[cabin] = window.setInterval(function() {
- count[cabin] = (count[cabin] + 1) % 200;
- var icons = line[cabin].get('icons');
- icons[0].offset = (count[cabin] / 2) + '%';
- line[cabin].set('icons', icons);
- if (count[cabin]>198) {
- icons[0].offset = '0%';
- line[cabin].set('icons', icons);
- window.clearInterval(offtime[cabin]);
- }
- if (count[cabin]==199) {
- line[cabin].set('icons');
- }
- }, 5900);
- }
- google.maps.event.addDomListener(window, 'load', initialize);
- // ]]></script>