tag:blogger.com,1999:blog-76601195875031196772024-03-12T17:33:59.376-07:00Viviendo el presente por que es lo unico que podemos controlarNo soy un experto.... pero me gusta compartir lo que aprendo leyendo de otras personas e internet.saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.comBlogger269125tag:blogger.com,1999:blog-7660119587503119677.post-19883342092400418182018-01-17T14:39:00.001-08:002018-04-10T17:15:04.324-07:00Example how to slice a image into a tiles with aws lambda and upload them to S3 with nodejs<br />
This is a example code that I made to test the concept. The function was triggered by a "Put on a bucket" that means when a image is uploaded to the bucket on S3.<br />
<br />
I hope this will help others solve problems<br />
<br />
<br />
<br />
<script src="https://gist.github.com/SaulBurgos/7ab6341988255c9d35b44ccf9cf1b21c.js"></script>
<br />
<br />
<br />
<div style="border: 1px solid gray;padding: 10px;background: #FFC107;color:white">
<div style="font-size: 20px;font-weight: bold;line-height: 23px;margin-bottom: 12px;">
<span>Upload your 360° photos and create a virtual tour in minutes without programming skills. </span><br />
</div>
<div style="text-align: center;font-weight: bold;">
<span><a href="https://www.paneek.net/#/home" target="_blank" style="font-size: 16px;font-weight: normal;">Paneek is a free online virtual tour creator</a>. Try it!</span><span>.</span>
</div>
</div>saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-22536287176665944572017-11-03T11:09:00.001-07:002017-11-03T11:09:25.060-07:00Docker Postgre persist data with volume: Error could not link file pg_xlog on windows 10 with toolbox<br />
This is a problem that could happen if you try to mount a volume in this way:<br />
<br />
https://stackoverflow.com/questions/45632593/postgres-docker-container-data-fails-to-mount-to-local<br />
<b></b><br />
<b>I solved this problem creating a volume : </b><br />
<b></b><br />
docker volume créate --name paneek<br />
<br />
and later only using it on my docker-compose.yml:<br />
<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; font-weight: normal; line-height: 19px; white-space: pre;">
<div>
<span style="color: #569cd6;">version</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">'2'</span></div>
<div>
<span style="color: #569cd6;">services</span><span style="color: #d4d4d4;">:</span></div>
<div>
<span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">app</span><span style="color: #d4d4d4;">:</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">build</span><span style="color: #d4d4d4;">:</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">context</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">./</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">dockerfile</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">app.dockerfile</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">working_dir</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">/var/www</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">volumes</span><span style="color: #d4d4d4;">:</span></div>
<div>
<span style="color: #d4d4d4;"> - </span><span style="color: #ce9178;">./:/var/www</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">links</span><span style="color: #d4d4d4;">:</span></div>
<div>
<span style="color: #d4d4d4;"> - </span><span style="color: #ce9178;">pgsql</span><span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">web</span><span style="color: #d4d4d4;">:</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">build</span><span style="color: #d4d4d4;">:</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">context</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">./</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">dockerfile</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">web.dockerfile</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">working_dir</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">/var/www</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">volumes_from</span><span style="color: #d4d4d4;">:</span></div>
<div>
<span style="color: #d4d4d4;"> - </span><span style="color: #ce9178;">app</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">ports</span><span style="color: #d4d4d4;">:</span></div>
<div>
<span style="color: #d4d4d4;"> - </span><span style="color: #ce9178;">80:80</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">links</span><span style="color: #d4d4d4;">:</span></div>
<div>
<span style="color: #d4d4d4;"> - </span><span style="color: #ce9178;">app</span></div>
<br /><div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">pgsql</span><span style="color: #d4d4d4;">:</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">image</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">"postgres:9.5"</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #608b4e;">#to be available to use pgadmin</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">ports</span><span style="color: #d4d4d4;">:</span></div>
<div>
<span style="color: #d4d4d4;"> - </span><span style="color: #ce9178;">5432:5432</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">environment</span><span style="color: #d4d4d4;">:</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">POSTGRES_USER</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">postgres</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">POSTGRES_DB</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">postgres</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">POSTGRES_PASSWORD</span><span style="color: #d4d4d4;">: </span><span style="color: #ce9178;">local</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">volumes</span><span style="color: #d4d4d4;">:</span></div>
<div>
<span style="color: #d4d4d4;"> - </span><span style="color: #ce9178;">paneek:/var/lib/postgresql/data</span><span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #569cd6;">volumes</span><span style="color: #d4d4d4;">:</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">paneek</span><span style="color: #d4d4d4;">:</span></div>
</div>
<b></b><i></i><u></u><sub></sub><sup></sup><strike></strike><br />
<b><br /></b>
Note: On Windows with toolbox there is not another way to do it.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-64237967804802585662017-10-26T10:46:00.000-07:002017-10-26T10:46:10.279-07:00Redirect http to https on PHP with Heroku using .htaccess<br />
There is one thing that you need to understand with SSL
and Heroku. The SSL connection is actually terminated before the request
reaches your app, it is done heroku routing layer and all requests are
sent to your app using plain HTTP.<br />
<br />
To know if a request
was made using HTTPS you need to check the X-Forwarded-Proto HTTP
header for its value. "https" means it used SSL, "http" means it didn't.
You should then perform the URL rewrite based on this. This is an
example of how you can do this using the .htaccess file.<br />
<br />
##Force SSL <br />
<br />
#Normal way (in case you need to deploy to NON-heroku)<br />
RewriteCond %{HTTPS} !=on<br />
<br />
#Heroku way<br />
RewriteCond %{HTTP:X-Forwarded-Proto} !https <br />
<br />
#If neither above conditions are met, redirect to https<br />
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]<br />
<br />
<br />
The secret sauce is the line with HTTP:X-Forwarded-Proto.<br />
<br />
<br />
links:<br />
<a href="https://devcenter.heroku.com/articles/http-routing" target="_blank">https://devcenter.heroku.com/articles/http-routing</a> <br />
<a href="https://stackoverflow.com/questions/26489519/how-to-redirect-to-https-with-htaccess-on-heroku-cedar-stack" target="_blank">https://stackoverflow.com/questions/26489519/how-to-redirect-to-https-with-htaccess-on-heroku-cedar-stack</a><br />
<br />saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-24718135594690622362017-07-06T09:57:00.001-07:002017-07-06T09:57:47.730-07:00Javascript reduce function<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; font-weight: normal; line-height: 19px; white-space: pre;">
<div>
<span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">users</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> [{ </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id:</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">1</span><span style="color: #d4d4d4;">, </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name:</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">'saul'</span><span style="color: #d4d4d4;">, </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">age:</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">2</span><span style="color: #d4d4d4;">, </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">pets:</span><span style="color: #d4d4d4;"> [</span><span style="color: #ce9178;">'cat'</span><span style="color: #d4d4d4;">,</span><span style="color: #ce9178;">'dog'</span><span style="color: #d4d4d4;">] </span></div>
<div>
<span style="color: #d4d4d4;"> },</span></div>
<div>
<span style="color: #d4d4d4;"> { </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id:</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">1</span><span style="color: #d4d4d4;">, </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name:</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">'andrie'</span><span style="color: #d4d4d4;">, </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">age:</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">6</span><span style="color: #d4d4d4;">, </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">pets:</span><span style="color: #d4d4d4;"> [</span><span style="color: #ce9178;">'cat'</span><span style="color: #d4d4d4;">]</span></div>
<div>
<span style="color: #d4d4d4;"> },</span></div>
<div>
<span style="color: #d4d4d4;"> { </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">id:</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">1</span><span style="color: #d4d4d4;">, </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">name:</span><span style="color: #d4d4d4;"> </span><span style="color: #ce9178;">'manuel'</span><span style="color: #d4d4d4;">, </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">age:</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">6</span><span style="color: #d4d4d4;">, </span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">pets:</span><span style="color: #d4d4d4;"> [] </span></div>
<div>
<span style="color: #d4d4d4;"> }];</span></div>
<br />
<div>
<span style="color: #9cdcfe;">users</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">reduce</span><span style="color: #d4d4d4;">((</span><span style="color: #9cdcfe;">accumulator</span><span style="color: #d4d4d4;">, </span><span style="color: #9cdcfe;">currentElement</span><span style="color: #d4d4d4;">, </span><span style="color: #9cdcfe;">index</span><span style="color: #d4d4d4;">, </span><span style="color: #9cdcfe;">array</span><span style="color: #d4d4d4;">) </span><span style="color: #569cd6;">=></span><span style="color: #d4d4d4;"> {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">return</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">accumulator</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">concat</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">currentElement</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">pets</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;">}, []);</span></div>
<br />
<div>
<span style="color: #608b4e;">//result</span></div>
<div>
<span style="color: #d4d4d4;">[</span><span style="color: #ce9178;">"cat"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"dog"</span><span style="color: #d4d4d4;">, </span><span style="color: #ce9178;">"cat"</span><span style="color: #d4d4d4;">]</span></div>
</div>
<br />
<br />
Reduce toma una callback y un valor initial opcional que es el acumulador que es pasado a la callback en cada iteracion. Entonces Reduce empieza a iterear por cada elemento llamando a la callback pasando el acumulador y el element sobre el cual se esta iterando.<br />
<br />
La primera vez acumulador es un arreglo vacio por que es el valor inicial, las siguientes veces acumulador tiene el valor retornado por la previa interacion. Asi es como al final de la iteracion reduce devuelve el valor de "accumulator".<br />
<br />
Aqui un ejemplo usando objectos<br />
<br />
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; font-weight: normal; line-height: 19px; white-space: pre;">
<div>
<span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">myArr</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> [</span></div>
<div>
<span style="color: #d4d4d4;"> { </span><span style="color: #9cdcfe;">rating:</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">5</span><span style="color: #d4d4d4;"> },</span></div>
<div>
<span style="color: #d4d4d4;"> { </span><span style="color: #9cdcfe;">price:</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">200</span><span style="color: #d4d4d4;"> },</span></div>
<div>
<span style="color: #d4d4d4;"> { </span><span style="color: #9cdcfe;">distance:</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">10</span><span style="color: #d4d4d4;"> }</span></div>
<div>
<span style="color: #d4d4d4;">];</span></div>
<br />
<div>
<span style="color: #569cd6;">var</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">myObj</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">myArr</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">reduce</span><span style="color: #d4d4d4;">(</span><span style="color: #569cd6;">function</span><span style="color: #d4d4d4;">( </span><span style="color: #9cdcfe;">memo</span><span style="color: #d4d4d4;">, </span><span style="color: #9cdcfe;">item</span><span style="color: #d4d4d4;"> ) {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">memo</span><span style="color: #d4d4d4;"> </span><span style="color: #d4d4d4;">=</span><span style="color: #d4d4d4;"> </span><span style="color: #4ec9b0;">Object</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">assign</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">memo</span><span style="color: #d4d4d4;">, </span><span style="color: #9cdcfe;">item</span><span style="color: #d4d4d4;">);</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">return</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">memo</span></div>
<div>
<span style="color: #d4d4d4;">}, {} );</span></div>
<br />
<div>
<span style="color: #608b4e;">//result</span></div>
<div>
<span style="color: #d4d4d4;">{</span><span style="color: #9cdcfe;">rating</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">5</span><span style="color: #d4d4d4;">, </span><span style="color: #9cdcfe;">price</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">200</span><span style="color: #d4d4d4;">, </span><span style="color: #9cdcfe;">distance</span><span style="color: #d4d4d4;">: </span><span style="color: #b5cea8;">10</span><span style="color: #d4d4d4;">}</span></div>
</div>
<br />
<br />
Espero haber despejado dudas<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-63680834130335723172017-01-02T11:44:00.002-08:002018-04-10T17:15:57.602-07:00Entendiendo Shadow DOM V1 y custom elements V1Shadow DOM es uno de los 4 estandares de Componentes web<br />
<ul>
<li><a href="https://www.html5rocks.com/en/tutorials/webcomponents/template/" target="_blank">HTML Templates</a></li>
<li><a href="https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom" target="_blank">Shadow DOM</a></li>
<li><a href="https://developers.google.com/web/fundamentals/getting-started/primers/customelements" target="_blank">Custom elements</a></li>
<li><a href="https://www.html5rocks.com/en/tutorials/webcomponents/imports/" target="_blank">HTML Imports</a></li>
</ul>
Con Shadow DOM puedes crear nuevos elementos HTML y CSS, con su propio scope. Y puede ser combinado con "Custom elements" haciendo un unico elemento con sus propio html, css, js.<br />
<br />
<b>DOM Aislado:</b> Todo el html esta aislado del html principal, intentar esto: document.querySelector() , no va a devolver nada.<br />
<br />
<b>CSS aislado:</b> Todo el CSS dentro del elemento no afectara al html principal. Puedes usar id, clases con el mismo nombre y no tendras problemas.<br />
<br />
Con esto tenemos un panorama de que podemos construir nuestras aplicaciones web en pequeños pedazos y unirlos a como queramos.<br />
<br />
Por el momento Web components no es del todo estandar en los navegadores, pero por suerte podemos usar un polyfills.<br />
<br />
<a href="http://webcomponents.org/polyfills/" target="_blank">http://webcomponents.org/polyfills/</a><br />
<br />
<br />
Ejemplos de como usar Shadow DOM, por ahora solo funciona en chrome (Solo tienes que examinar el codigo para ver como funciona.):<br />
<a href="https://saulburgos.github.io/practices/2017/shadowdom/" target="_blank">https://saulburgos.github.io/practices/2017/shadowdom/</a><br />
<a href="https://saulburgos.github.io/practices/2017/customelements/" target="_blank">https://saulburgos.github.io/practices/2017/customelements/</a><br />
<br />
Como Shadow y custom elements no son totalemente estandar por el momento, no puedes usarlos cuando quieras, a menos que uses <a href="https://www.polymer-project.org/" target="_blank">https://www.polymer-project.org</a> , que es una library con todos los polyfills necesarios para que funcione en todos los navegadores<br />
<br />
<b>Confusion</b><br />
<br />
"Web components" es el termino que encapsula 4 tipos de API hasta el momente: html templates, shadow dom, html import y custom elements. Pero en internet mucha gente se refiere a "web components" al uso mezclado de estas APIs. Por ejemplo : shadow dom y custom elements.<br />
<br />
Asi que no te confundas si en un tutorial ves este tipo de uso.<br />
<br />
<br />
links:<br />
<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements" target="_blank">https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements</a><br />
<a href="https://developers.google.com/web/fundamentals/getting-started/primers/customelements" target="_blank">https://developers.google.com/web/fundamentals/getting-started/primers/customelements</a> <br />
<a href="https://www.smashingmagazine.com/2016/12/styling-web-components-using-a-shared-style-sheet/" target="_blank">https://www.smashingmagazine.com/2016/12/styling-web-components-using-a-shared-style-sheet/</a> <br />
<a href="https://hayato.io/2016/shadowdomv1/" target="_blank">https://hayato.io/2016/shadowdomv1/</a> <br />
<a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/template" target="_blank">https://developer.mozilla.org/en/docs/Web/HTML/Element/template</a><br />
<a href="https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/" target="_blank">https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/</a> <br />
<br />
<br />
<br />
<br />
<div style="border: 1px solid gray;padding: 10px;background: #FFC107;color:white">
<div style="font-size: 20px;font-weight: bold;line-height: 23px;margin-bottom: 12px;">
<span>Upload your 360° photos and create a virtual tour in minutes without programming skills. </span><br />
</div>
<div style="text-align: center;font-weight: bold;">
<span><a href="https://www.paneek.net/#/home" target="_blank" style="font-size: 16px;font-weight: normal;">Paneek is a free online virtual tour creator</a>. Try it!</span><span>.</span>
</div>
</div>saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-8929792834594224832016-12-31T14:30:00.002-08:002016-12-31T14:30:39.840-08:00Entendiendo la Web notification APILa <a href="https://developer.mozilla.org/en/docs/Web/API/notification" target="_blank">Web notification API</a> nos permite mandar notificaciones a los usuario a como lo hacen las app nativas.<br />
<br />
Para usar primero necesitamos que el usuario de permiso con el siguiente codigo:<br />
<br />
<br />
<pre style="background: #ffffff; color: black;">Notification<span style="color: blue;">.</span>requestPermission<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>status<span style="color: blue;">)</span> <span style="color: blue;">{</span> <span style="color: green;">// status is "granted", if accepted by user</span>
<span style="color: blue; font-weight: bold;">var</span> notificationMsg <span style="color: blue;">=</span> <span style="color: blue; font-weight: bold;">new</span> Notification<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">Title</span><span style="color: #0000e6;">'</span><span style="color: blue;">,</span> <span style="color: blue;">{</span>
body<span style="color: blue;">:</span> <span style="color: #0000e6;">'</span><span style="color: #0000e6;">I am the body text!</span><span style="color: #0000e6;">'</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span></pre>
<br />
Puesdes ver la demo en este link: <a href="https://saulburgos.github.io/practices/2017/webnotification/" target="_blank">https://saulburgos.github.io/practices/2017/webnotification/</a> <br />
<br />
Una vez con el permiso, usamos el objecto Notificacion para crear un instancia del mensaje que queremos usar. Mas adelante si necesitamos verificar este permiso de nuevo podemos consulta la propiedad "permission", que puede tener los valores de : "default, granted, denied"<br />
<br />
<pre style="background: #ffffff; color: black;">Notification<span style="color: blue;">.</span>permission</pre>
<br />
Esta API comunmente se usa en conjunto con los services worker y <a href="https://developer.mozilla.org/en/docs/Web/API/Push_API" target="_blank">push API</a>, para notificar de la manera en como lo hacen las app nativas cuando no tienes la app abierta<br />
<br />links<br />
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API</a><br />
<a href="https://developer.mozilla.org/en/docs/Web/API/notification" target="_blank">https://developer.mozilla.org/en/docs/Web/API/notification</a><br />
saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-84128961537529823232016-12-30T13:41:00.001-08:002016-12-30T13:41:24.128-08:00¿ Como saber con javascript si estas online ó offline ?El objeto "navigation" puede ayudarnos con esto:<br />
<br />
<a href="https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine</a><br />
<br />
Solo tenemos que consultar esta propiedad que nos devolvera un valor true/false.<br />
<br />
<pre style="background: #ffffff; color: black;">window<span style="color: blue;">.</span>navigator<span style="color: blue;">.</span>onLine<span style="color: blue;">;</span></pre>
<br />
Su uso es:<br />
<br />
<pre style="background: #ffffff; color: black;"><span style="color: blue; font-weight: bold;">if</span> <span style="color: blue;">(</span>navigator<span style="color: blue;">.</span>onLine<span style="color: blue;">)</span> <span style="color: blue;">{</span>
console<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">log</span><span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">online</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span> <span style="color: blue; font-weight: bold;">else</span> <span style="color: blue;">{</span>
console<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">log</span><span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">offline</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span></pre>
<pre style="background: #ffffff; color: black;"><span style="color: blue;"> </span></pre>
<pre style="background: #ffffff; color: black;"><span style="color: blue;">
</span></pre>
Tambien podemos escuchar un eventos para saber cuando hay conexión :<br />
<br />
<pre style="background: #ffffff; color: black;">window<span style="color: blue;">.</span>addEventListener<span style="color: blue;">(</span><span style="color: #0000e6;">"</span><span style="color: #0000e6;">offline</span><span style="color: #0000e6;">"</span><span style="color: blue;">,</span> <span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>e<span style="color: blue;">)</span> <span style="color: blue;">{</span>
console<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">log</span><span style="color: blue;">(</span><span style="color: #0000e6;">"</span><span style="color: #0000e6;">offline</span><span style="color: #0000e6;">"</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
window<span style="color: blue;">.</span>addEventListener<span style="color: blue;">(</span><span style="color: #0000e6;">"</span><span style="color: #0000e6;">online</span><span style="color: #0000e6;">"</span><span style="color: blue;">,</span> <span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>e<span style="color: blue;">)</span> <span style="color: blue;">{</span>
console<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">log</span><span style="color: blue;">(</span><span style="color: #0000e6;">"</span><span style="color: #0000e6;">online</span><span style="color: #0000e6;">"</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span></pre>
<br />
links<br />
<br />
<a href="https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine</a>
<br />
<br />
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<br />
<div id="mc_embed_signup">
<form action="//codingonweb.us10.list-manage.com/subscribe/post?u=3ee9f953357bd224bcd1ede57&id=f608ca4d35" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Te gusto este articulo ? Suscribete para recibir mis ultimas noticias</label>
<input class="email" id="mce-EMAIL" name="EMAIL" placeholder="email address" required="" type="email" value="" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<br />
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_3ee9f953357bd224bcd1ede57_f608ca4d35" tabindex="-1" type="text" value="" /></div>
<div class="clear">
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-31769450337750175762016-12-29T15:27:00.001-08:002016-12-30T13:38:37.135-08:00Entendiendo la Cache API<br />
Comunmente esta API es usada en conjunto con la API Service worker, pero puedes usarlo independientemente aunque no he encontrado un ejemplo de su uso fuera de esta API. Segun la definicion se usa para guardar objectos "<a href="https://developer.mozilla.org/en-US/docs/Web/API/Request" target="_blank">Request</a>" y "<a href="https://developer.mozilla.org/en-US/docs/Web/API/Response" target="_blank">Response</a>", esto significa que puedes dar las peticiones que haces al server y tambien las respuestas del server.<br />
<br />
Una parte importante a saber que casi todos los metodos de esta API usan promesas. Para crear un espacio donde cachear todos nuestros assets solo necesitamos llamar este metodo del objecto "caches"<br />
<br />
<pre style="background: #ffffff; color: black;">caches<span style="color: blue;">.</span>open<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">test-cache</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>cache<span style="color: blue;">)</span> <span style="color: blue;">{</span>
<span style="color: green;">// Cache is created and accessible</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span></pre>
<br />
El nombre 'test-cache' es una namespace o identificador de la cache que hemos creado. De esta manera podemos usarla luego. <br />
<br />
Para agregar elementos a la cache creada se usa comunmente los metodos "Add" y "addAll".<br />
<br />
<pre style="background: #ffffff; color: black;">cache<span style="color: blue;">.</span>add<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">/sw-test/index.html</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span><span style="color: blue;">)</span> <span style="color: blue;">{</span>
<span style="color: green;">//request have been added to the cache</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
cache<span style="color: blue;">.</span>addAll<span style="color: blue;">(</span><span style="color: blue;">['/', '/images/logo.png']</span><span style="color: blue;"></span><span style="color: blue;">)</span><span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span><span style="color: blue;">)</span> <span style="color: blue;">{</span>
<span style="color: green;">//requests have been added to the cache</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span></pre>
<br />
La diferencia es que en la segunda se pasa un arreglo de urls. Algo que destacar aqui es que usar el metodo "add" es lo mismo que usar fetch de formal normal con put de esta manera:<br />
<br />
<pre style="background: #ffffff; color: black;">fetch<span style="color: blue;">(</span>url<span style="color: blue;">)</span><span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span> <span style="color: blue;">(</span>response<span style="color: blue;">)</span> <span style="color: blue;">{</span>
<span style="color: blue; font-weight: bold;">if</span> <span style="color: blue;">(</span><span style="color: blue;">!</span>response<span style="color: blue;">.</span>ok<span style="color: blue;">)</span> <span style="color: blue;">{</span>
<span style="color: blue; font-weight: bold;">throw</span> <span style="color: blue; font-weight: bold;">new</span> TypeError<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">bad response status</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span>
<span style="color: blue; font-weight: bold;">return</span> cache<span style="color: blue;">.</span>put<span style="color: blue;">(</span>url<span style="color: blue;">,</span> response<span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span><span style="color: blue;">);</span></pre>
<pre style="background: #ffffff; color: black;"><span style="color: blue;"></span></pre>
<br />
O peticiones personalizadas con el object "Request" de esta forma:<br />
<br />
<pre style="background: #ffffff; color: black;">cache<span style="color: blue;">.</span>add<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">new</span> Request<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">/page/1</span><span style="color: #0000e6;">'</span><span style="color: blue;">,</span> <span style="color: blue;">{</span> <span style="color: green;">/* request options */</span> <span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">)</span><span style="color: blue;">;</span></pre>
<pre style="background: #ffffff; color: black;"><span style="color: blue;"> </span></pre>
"add" and "addAll" son como atajos del metodo "put" por que con este metodo pones en cache usando key/value de esta manera:<br />
<br />
<pre style="background: #ffffff; color: black;">fetch<span style="color: blue;">(</span>url<span style="color: blue;">)</span><span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span> <span style="color: blue;">(</span>response<span style="color: blue;">)</span> <span style="color: blue;">{</span>
<span style="color: blue; font-weight: bold;">return</span> cache<span style="color: blue;">.</span>put<span style="color: blue;">(</span>url<span style="color: blue;">,</span> response<span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span></pre>
<br />
<h3>
Revisar la cache</h3>
Para revisar que hemos puesto en la cache primero necesitamos abrirla y despues explorar los elementos usando el metodo "keys"de esta manera:<br />
<br />
<pre style="background: #ffffff; color: black;">caches<span style="color: blue;">.</span>open<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">test-cache</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>cache<span style="color: blue;">)</span> <span style="color: blue;">{</span> </pre>
<pre style="background: #ffffff; color: black;"> </pre>
<pre style="background: #ffffff; color: black;"> cache<span style="color: blue;">.</span>keys<span style="color: blue;">(</span><span style="color: blue;">)</span><span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>cachedRequests<span style="color: blue;">)</span> <span style="color: blue;">{</span>
<span style="color: green;">// [] Array of all of caches keys</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span></pre>
<br />
Para buscar dentro se usan los metodos "match", "matchAll":<br />
<br />
<pre style="background: #ffffff; color: black;">caches<span style="color: blue;">.</span>open<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">test-cache</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>cache<span style="color: blue;">)</span> <span style="color: blue;">{</span>
cache<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">match</span><span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">/page/1</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>matchedResponse<span style="color: blue;">)</span> <span style="color: blue;">{</span>
console<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">log</span><span style="color: blue;">(</span>matchedResponse<span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span></pre>
<br />
En el ejemplo anterior, estamos buscando el objecto en cache que correspondo con la peticion a 'page/1'<br />
<br />
Otros usos comunes serian leer y buscar:<br />
<br />
<pre style="background: #ffffff; color: black;">caches<span style="color: blue;">.</span>open<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">test-cache</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>cache<span style="color: blue;">)</span> <span style="color: blue;">{</span>
cache<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">delete</span><span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">/page/1</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
caches<span style="color: blue;">.</span>keys<span style="color: blue;">(</span><span style="color: blue;">)</span><span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>cacheKeys<span style="color: blue;">)</span> <span style="color: blue;">{</span>
console<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">log</span><span style="color: blue;">(</span>cacheKeys<span style="color: blue;">)</span><span style="color: blue;">;</span> <span style="color: green;">// Get all the namespace created</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
caches<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">delete</span><span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">test-cache</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span><span style="color: blue;">)</span> <span style="color: blue;">{</span>
console<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">log</span><span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">Cache successfully deleted!</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span></pre>
<br />
Dentro de un service worker, el proceso seria algo asi:<br />
<br />
<ul>
<li>El service worker intercepta todas las peticiones al server, ya sean ajax o cargar otras paginas web.</li>
<li>Una vez interceptada la peticion, revisamos en nuestra cache si esa peticion ya esta en la cache</li>
<li>Si es asi devolvemos el objecto en cache.</li>
<li>Si no dejamos que la peticion siga su curso, al terminar la metemos al cache.</li>
</ul>
<br />
Ejemplo de esto:<br />
<br />
<pre style="background: #ffffff; color: black;"><span style="color: green;">//trigger on url changes and requests to the server</span>
serviceWorker<span style="color: blue;">.</span>addEventListener<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">fetch</span><span style="color: #0000e6;">'</span><span style="color: blue;">,</span> <span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>event<span style="color: blue;">)</span> <span style="color: blue;">{</span>
<span style="color: green;">//search in the cache for the request that is in progress</span>
<span style="color: blue; font-weight: bold;">var</span> cacheFound <span style="color: blue;">=</span> caches<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">match</span><span style="color: blue;">(</span>event<span style="color: blue;">.</span>request<span style="color: blue;">)</span><span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>response<span style="color: blue;">)</span> <span style="color: blue;">{</span>
<span style="color: blue; font-weight: bold;">if</span> <span style="color: blue;">(</span>response<span style="color: blue;">)</span> <span style="color: blue;">{</span>
<span style="color: green;">//return the object cached</span>
<span style="color: blue; font-weight: bold;">return</span> response<span style="color: blue;">;</span>
<span style="color: blue;">}</span> <span style="color: blue; font-weight: bold;">else</span> <span style="color: blue;">{</span>
<span style="color: green;">//if not, we make the normal request</span>
<span style="color: blue; font-weight: bold;">return</span> fetch<span style="color: blue;">(</span>event<span style="color: blue;">.</span>request<span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: green;">//we pass the promise </span>
event<span style="color: blue;">.</span>respondWith<span style="color: blue;">(</span>cacheFound<span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span></pre>
<br />
Aqui he hecho un <a href="https://saulburgos.github.io/practices/2017/servicesworker/offline/" target="_blank">ejemplo del uso de la cache API sin un service worker</a><br />
<br />
Links<br />
<br />
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Cache" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/Cache</a><br />
<a href="https://davidwalsh.name/cache" target="_blank">https://davidwalsh.name/cache</a>
<br />
<br />
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<br />
<div id="mc_embed_signup">
<form action="//codingonweb.us10.list-manage.com/subscribe/post?u=3ee9f953357bd224bcd1ede57&id=f608ca4d35" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Te gusto este articulo ? Suscribete para recibir mis ultimas noticias</label>
<input class="email" id="mce-EMAIL" name="EMAIL" placeholder="email address" required="" type="email" value="" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<br />
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_3ee9f953357bd224bcd1ede57_f608ca4d35" tabindex="-1" type="text" value="" /></div>
<div class="clear">
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-48273662425451867472016-12-29T11:33:00.004-08:002016-12-29T11:33:55.929-08:00Entendiendo la Promise APILas promesas son ahora la manera preferida de trabajar y en el futuro sera muy pocos los casos en los que necesitaras una callback. jQuery tiene su propio <a href="https://api.jquery.com/deferred.promise/" target="_blank">sistema de promesas</a>.<br />
<br />
Pero ahora tenemos una <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank">API promise nativa</a> que podemos usar. Su uso es muy sencillo:<br />
<br />
<pre style="background: #ffffff; color: black;"><span style="color: blue; font-weight: bold;">var</span> promise <span style="color: blue;">=</span> <span style="color: blue; font-weight: bold;">new</span> Promise<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>resolveFn<span style="color: blue;">,</span> rejectFn<span style="color: blue;">)</span> <span style="color: blue;">{</span>
<span style="color: green;">//you can do here operations and later decided if resolve or reject the promise</span>
<span style="color: green;">//using the objects</span>
<span style="color: blue; font-weight: bold;">setTimeout</span><span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span><span style="color: blue;">)</span> <span style="color: blue;">{</span>
resolveFn<span style="color: blue;">(</span><span style="color: maroon;">10</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span><span style="color: blue;">,</span> <span style="color: maroon;">3000</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: green;">//when is resolve</span>
promise<span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>result<span style="color: blue;">)</span> <span style="color: blue;">{</span>
console<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">log</span><span style="color: blue;">(</span>result<span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: green;">//when is rejected</span>
promise<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">catch</span><span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>result<span style="color: blue;">)</span> <span style="color: blue;">{</span>
console<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">log</span><span style="color: blue;">(</span>result<span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span></pre>
<br />
Despues de haber instanciado el objecto "Promise" tienes los metodos "resolveFn" y "rejectFn" los cuales puedes ejecutar cuando tu quieras en un futuro, los cuales van a ejecutar los metodos pasados a "then" y "catch".<br />
<br />
Un interesante metodo de "Promise" es "all", el cual recibe un arreglo de promesas y ejecuta "then" cuando todas han sido "resolve".<br />
<br />
<pre style="background: #ffffff; color: black;">Promise<span style="color: blue;">.</span>all<span style="color: blue;">(</span><span style="color: blue;">[</span>promise1<span style="color: blue;">,</span> promise2<span style="color: blue;">]</span><span style="color: blue;">)</span><span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>results<span style="color: blue;">)</span> <span style="color: blue;">{</span>
<span style="color: green;">// Both promises resolved</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span>
<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">catch</span><span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>error<span style="color: blue;">)</span> <span style="color: blue;">{</span>
<span style="color: green;">// One or more promises was rejected</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span></pre>
<br />
Link<br />
<br />
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise</a><br />
<a href="https://davidwalsh.name/promises">https://davidwalsh.name/promises</a><br />
<br />
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<br />
<div id="mc_embed_signup">
<form action="//codingonweb.us10.list-manage.com/subscribe/post?u=3ee9f953357bd224bcd1ede57&id=f608ca4d35" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Te gusto este articulo ? Suscribete para recibir mis ultimas noticias</label>
<input class="email" id="mce-EMAIL" name="EMAIL" placeholder="email address" required="" type="email" value="" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<br />
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_3ee9f953357bd224bcd1ede57_f608ca4d35" tabindex="-1" type="text" value="" /></div>
<div class="clear">
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-26302251212216326242016-12-29T11:02:00.001-08:002016-12-29T15:37:00.208-08:00Entendiendo la Fetch APIAhora ya no usamos Ajax para hacer peticiones al server ahora usamos Fetch. Por que ? por que nos permite usar promesas en lugar de callbacks, permitiendo un codigo mas limpio. <br />
<br />
Una peticion con fetch basica es de la siguiente manera:<br />
<br />
<pre style="background: #ffffff; color: black;">fetch<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">./api/some.json</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>respond<span style="color: blue;">)</span><span style="color: blue;">{</span>
<span style="color: green;">//exito</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">catch</span><span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>err<span style="color: blue;">)</span> <span style="color: blue;">{</span>
<span style="color: green;">//Error en la peticion</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span></pre>
<br />
La promesa se mira en accion con los metodos "then" y "catch", a los cuales se le pasa metodos para ser ejecutados cuando terminen.<br />
<br />
Then : Es ejecutado cuando la peticion termina correctamente.<br />
catch: Es ejecutado cuando en la peticion ocurrio un error.<br />
<br />
Fetch retorna un objecto stream cuando la peticion es exitosa, el cual tiene muchos metodos para usar. Puedes consultarlos <a href="https://streams.spec.whatwg.org/" target="_blank">aqui</a>. El ejemplo completo seria asi:<br />
<br />
<pre style="background: #ffffff; color: black;">fetch<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">./api/some.json</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>response<span style="color: blue;">)</span> <span style="color: blue;">{</span>
<span style="color: blue; font-weight: bold;">if</span> <span style="color: blue;">(</span>response<span style="color: blue;">.</span>status <span style="color: blue;">!==</span> <span style="color: maroon;">200</span><span style="color: blue;">)</span> <span style="color: blue;">{</span>
console<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">log</span><span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">Looks like there was a problem. Status Code: </span><span style="color: #0000e6;">'</span> <span style="color: blue;">+</span>
response<span style="color: blue;">.</span>status<span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue; font-weight: bold;">return</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span>
<span style="color: green;">// Examine the text in the response </span>
response<span style="color: blue;">.</span>json<span style="color: blue;">(</span><span style="color: blue;">)</span><span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>data<span style="color: blue;">)</span> <span style="color: blue;">{</span>
console<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">log</span><span style="color: blue;">(</span>data<span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">catch</span><span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>err<span style="color: blue;">)</span> <span style="color: blue;">{</span>
console<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">log</span><span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">Fetch Error :-S</span><span style="color: #0000e6;">'</span><span style="color: blue;">,</span> err<span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span></pre>
<br />
Otras propiedades interesantes del objecto response son:<br />
<br />
<pre style="background: #ffffff; color: black;">fetch<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">users.json</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span>response<span style="color: blue;">)</span> <span style="color: blue;">{</span>
console<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">log</span><span style="color: blue;">(</span>response<span style="color: blue;">.</span>headers<span style="color: blue;">.</span>get<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">Content-Type</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
console<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">log</span><span style="color: blue;">(</span>response<span style="color: blue;">.</span>headers<span style="color: blue;">.</span>get<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">Date</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
console<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">log</span><span style="color: blue;">(</span>response<span style="color: blue;">.</span>status<span style="color: blue;">)</span><span style="color: blue;">;</span>
console<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">log</span><span style="color: blue;">(</span>response<span style="color: blue;">.</span>statusText<span style="color: blue;">)</span><span style="color: blue;">;</span>
console<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">log</span><span style="color: blue;">(</span>response<span style="color: blue;">.</span>type<span style="color: blue;">)</span><span style="color: blue;">;</span>
console<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">log</span><span style="color: blue;">(</span>response<span style="color: blue;">.</span>url<span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span></pre>
<br />
El objecto response puede ser de varios tipos para una mejor descripcion visita este <a href="https://developers.google.com/web/updates/2015/03/introduction-to-fetch#response_types" target="_blank">link</a>. <br />
<br />
<br />
Adicionalmente puedes usar los objectos "<a href="https://developer.mozilla.org/en-US/docs/Web/API/Request" target="_blank">Request</a>" y "<a href="https://developer.mozilla.org/en-US/docs/Web/API/Headers" target="_blank">Header</a>" para personalizar los peticiones fetch. Tomando un ejemplo de david walsh, seria asi:<br />
<br />
<pre style="background: #ffffff; color: black;"><span style="color: green;">// Create an empty Headers instance</span>
<span style="color: blue; font-weight: bold;">var</span> headers <span style="color: blue;">=</span> <span style="color: blue; font-weight: bold;">new</span> Headers<span style="color: blue;">(</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: green;">// Add a few headers</span>
headers<span style="color: blue;">.</span>append<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">Content-Type</span><span style="color: #0000e6;">'</span><span style="color: blue;">,</span> <span style="color: #0000e6;">'</span><span style="color: #0000e6;">text/plain</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
headers<span style="color: blue;">.</span>append<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">X-My-Custom-Header</span><span style="color: #0000e6;">'</span><span style="color: blue;">,</span> <span style="color: #0000e6;">'</span><span style="color: #0000e6;">CustomValue</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: green;">// Check, get, and set header values</span>
headers<span style="color: blue;">.</span>has<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">Content-Type</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">;</span> <span style="color: green;">// true</span>
headers<span style="color: blue;">.</span>get<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">Content-Type</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">;</span> <span style="color: green;">// "text/plain"</span>
headers<span style="color: blue;">.</span>set<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">Content-Type</span><span style="color: #0000e6;">'</span><span style="color: blue;">,</span> <span style="color: #0000e6;">'</span><span style="color: #0000e6;">application/json</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: green;">// Delete a header</span>
headers<span style="color: blue;">.</span><span style="color: blue; font-weight: bold;">delete</span><span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">X-My-Custom-Header</span><span style="color: #0000e6;">'</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: green;">// Add initial values</span>
<span style="color: blue; font-weight: bold;">var</span> headers <span style="color: blue;">=</span> <span style="color: blue; font-weight: bold;">new</span> Headers<span style="color: blue;">(</span><span style="color: blue;">{</span>
<span style="color: #0000e6;">'</span><span style="color: #0000e6;">Content-Type</span><span style="color: #0000e6;">'</span><span style="color: blue;">:</span> <span style="color: #0000e6;">'</span><span style="color: #0000e6;">text/plain</span><span style="color: #0000e6;">'</span><span style="color: blue;">,</span>
<span style="color: #0000e6;">'</span><span style="color: #0000e6;">X-My-Custom-Header</span><span style="color: #0000e6;">'</span><span style="color: blue;">:</span> <span style="color: #0000e6;">'</span><span style="color: #0000e6;">CustomValue</span><span style="color: #0000e6;">'</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
<span style="color: blue; font-weight: bold;">var</span> request <span style="color: blue;">=</span> <span style="color: blue; font-weight: bold;">new</span> Request<span style="color: blue;">(</span><span style="color: #0000e6;">'</span><span style="color: #0000e6;">https://davidwalsh.name/some-url</span><span style="color: #0000e6;">'</span><span style="color: blue;">,</span> <span style="color: blue;">{</span>
headers<span style="color: blue;">:</span> <span style="color: blue; font-weight: bold;">new</span> Headers<span style="color: blue;">(</span><span style="color: blue;">{</span>
<span style="color: #0000e6;">'</span><span style="color: #0000e6;">Content-Type</span><span style="color: #0000e6;">'</span><span style="color: blue;">:</span> <span style="color: #0000e6;">'</span><span style="color: #0000e6;">text/plain</span><span style="color: #0000e6;">'</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span>
<span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span>
fetch<span style="color: blue;">(</span>request<span style="color: blue;">)</span><span style="color: blue;">.</span>then<span style="color: blue;">(</span><span style="color: blue; font-weight: bold;">function</span><span style="color: blue;">(</span><span style="color: blue;">)</span> <span style="color: blue;">{</span> <span style="color: green;">/* handle response */</span> <span style="color: blue;">}</span><span style="color: blue;">)</span><span style="color: blue;">;</span></pre>
<br />
Es una manera facil y alternativa del uso de ajax.<br />
<br />
Links:<br />
<br />
<a href="https://davidwalsh.name/fetch" target="_blank">https://davidwalsh.name/fetch</a><br />
<a href="https://developers.google.com/web/updates/2015/03/introduction-to-fetch" target="_blank">https://developers.google.com/web/updates/2015/03/introduction-to-fetch</a> <br />
<a href="https://developer.mozilla.org/en/docs/Web/API/Fetch_API" target="_blank">https://developer.mozilla.org/en/docs/Web/API/Fetch_API</a><br />
<a href="https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/" target="_blank">https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/</a>
<br />
<br />
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<br />
<div id="mc_embed_signup">
<form action="//codingonweb.us10.list-manage.com/subscribe/post?u=3ee9f953357bd224bcd1ede57&id=f608ca4d35" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Te gusto este articulo ? Suscribete para recibir mis ultimas noticias</label>
<input class="email" id="mce-EMAIL" name="EMAIL" placeholder="email address" required="" type="email" value="" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<br />
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_3ee9f953357bd224bcd1ede57_f608ca4d35" tabindex="-1" type="text" value="" /></div>
<div class="clear">
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-38969654128023450662016-11-16T10:52:00.001-08:002016-11-16T10:53:20.733-08:00Libro Google maps Javascript - Capítulo 6 : Hacer un preview de Google streetview desde un input file<br />
<h1 dir="ltr" id="docs-internal-guid-c2688cff-424f-9a2c-1cc6-75a646913e39" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 10pt; text-align: left;">
<span style="background-color: transparent; color: black; font-family: "trebuchet ms"; font-size: 21.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><a href="http://webmasternoob.blogspot.com/2016/01/libro-google-maps-javascript-indice.html" style="font-size: 21.3333px; line-height: 1.38;" target="_blank">Volver al indice</a></span></h1>
<br />
<br />
<br />
Hace pocos dias tuve la necesidad de crear una previsualización de un panorama google streetview usando un input file, esto fue para el proyecto de <a href="http://www.paneek.net/" target="_blank">Tours virtuales</a> . Por que muchos usuarios estaban subiendo imagenes incorrectas y hasta que eran procesadas podian ver los resultados finales. Esta era tediso asi que , he creado una funcionalidad de previsualización. <br />
<br />
En el siguiente link puedes ver el resultado:<br />
<br />
<a href="https://jsfiddle.net/SaulBurgos/rg5o213b/3/" target="_blank">https://jsfiddle.net/SaulBurgos/rg5o213b/3/</a><br />
<br />
Los pasos son los siguientes:<br />
<ol>
<li> En el input file definimos un metodo que sera llamado "createPreview" cuando el input cambie</li>
<li>"createPreview" usan la API <a href="https://developer.mozilla.org/en/docs/Web/API/FileReader" target="_blank">FileReader</a> para leer el archivo</li>
<li>Creamos la instancia de FileReader y definimos 2 metodos para escuchar los eventos: "onload" y "onprogress"</li>
<li>onload se dispara cuando FileReader lee completamente el archivo, pero la imagen aun no ha sido cargada</li>
<li>Para cargar la imagen creamos una imagen con la <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image" target="_blank">Image</a> API, al igual que con FileReader podemos definier un metodo para correrlo cuando la imagen ha sido cargada con "onload"</li>
<li>Despues solo usamos canvas para crear un objecto donde poner esta imagen. Esta parte es la mas importante por que aqui se redimensiona la imagen a 1024x512. De esta manera evitamos que el navegador se congele, por si el usuario ingresa resolusiones muy grandes.</li>
<li>El metedo encargado de la redimension es "<a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage" target="_blank">drawImage</a>" , despues con el metodo "toDataURL" obtenemos la nueva imagen redimensionada y la pasamos a Google streetview</li>
</ol>
<br />
<br />
<hr />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.paneek.net/" target="_blank"><img alt="http://www.paneek.net/" border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZWyramNx_49pVlGMpPhvR_HcMEGsFjJEaWvA_d2YJBteZ2ujk55toqHfNhWLu7O0Gy-_0jYJOmF-cCyZr2vqTLGcC_hfVdD111eVaNBlBuU8Kx0b40Vl-hFDz3mYcKhbOgzRb5bq1_Y4/s400/Crea+tour+virutalesordinary.png" width="400" /></a></div>
<br />
<br />
<br />
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<br />
<div id="mc_embed_signup">
<form action="//codingonweb.us10.list-manage.com/subscribe/post?u=3ee9f953357bd224bcd1ede57&id=f608ca4d35" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Te gusto este articulo ? Suscribete para recibir mis ultimas noticias</label>
<input class="email" id="mce-EMAIL" name="EMAIL" placeholder="email address" required="" type="email" value="" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<br />
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_3ee9f953357bd224bcd1ede57_f608ca4d35" tabindex="-1" type="text" value="" /></div>
<div class="clear">
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-65234544968334989152016-09-12T14:20:00.001-07:002016-09-12T14:20:27.355-07:00Como sincronizar el scroll de 2 divs con hijos de tamaños diferentes en Javascript<br />
Para que este post pueda ser encontrado en ingles pondre esta linea:<br />
<br />
How do I synchronize the scroll position of two divs with different height ?<br />
<br />
Hoy en el trabajo nos sentamos un buen amigo mio y yo e hicimos este pequeño demo de como funciona. La verdad que todo el credito se lo lleva mi amigo Hod es su algoritmo . Yo solo ayude con la parte de Javascript y unas pocas cosas<br />
<br />
Espero que a alguien le sea util.<br />
<br />
<br />
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="300" src="//jsfiddle.net/SaulBurgos/x39w6a3h/28/embedded/" width="100%"></iframe>
<br />
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<br />
<div id="mc_embed_signup">
<form action="//codingonweb.us10.list-manage.com/subscribe/post?u=3ee9f953357bd224bcd1ede57&id=f608ca4d35" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Te gusto este articulo ? Suscribete para recibir mis ultimas noticias</label>
<input class="email" id="mce-EMAIL" name="EMAIL" placeholder="email address" required="" type="email" value="" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<br />
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_3ee9f953357bd224bcd1ede57_f608ca4d35" tabindex="-1" type="text" value="" /></div>
<div class="clear">
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-24964239479359647012016-08-25T16:40:00.001-07:002016-11-16T10:09:08.393-08:00Libro Google maps Javascript - Capítulo 6 : Descargar imagenes de Google maps streetview<br />
<h1 dir="ltr" id="docs-internal-guid-c2688cff-424f-9a2c-1cc6-75a646913e39" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 10pt; text-align: left;">
<span style="background-color: transparent; color: black; font-family: "trebuchet ms"; font-size: 21.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><a href="http://webmasternoob.blogspot.com/2016/01/libro-google-maps-javascript-indice.html" style="font-size: 21.3333px; line-height: 1.38;" target="_blank">Volver al indice</a></span></h1>
<br />
<br />
Si estas buscando como descargar las imagenes de <a href="https://www.google.com/streetview/" target="_blank">Google streetview </a>la unica forma de hacerlo es atraves de su <a href="https://developers.google.com/maps/documentation/streetview/?hl=en" target="_blank">API</a><br />
<br />
Es facil de usar solo tienes que pasar estos parametros:<br />
<br />
https://maps.googleapis.com/maps/api/streetview?size=600x300&location=46.414382,10.013988&heading=151.78&pitch=-0.76<br />
<br />
Si copias y pegas ese link en tu navegar podras ver la imagen. Ten en cuanta que si quieres usar la version gratis solo puedes descargar imagenes de 600x300 , si las quieres en HD y mas grande tienes que pasar por caja aqui la descripcion de precio de google<br />
<br />
<a href="https://developers.google.com/maps/documentation/streetview/usage-limits">https://developers.google.com/maps/documentation/streetview/usage-limits</a><br />
<br />
He creado un ejemplo donde puedes probar la API, Solo mueve el visor donde tu quieras y has click en el boton "get image".<br />
<br />
<a href="http://jsfiddle.net/SaulBurgos/g3r8Lkws/2/">http://jsfiddle.net/SaulBurgos/g3r8Lkws/2/</a><br />
<br />
<br />
<hr />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.paneek.net/" target="_blank"><img alt="http://www.paneek.net/" border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZWyramNx_49pVlGMpPhvR_HcMEGsFjJEaWvA_d2YJBteZ2ujk55toqHfNhWLu7O0Gy-_0jYJOmF-cCyZr2vqTLGcC_hfVdD111eVaNBlBuU8Kx0b40Vl-hFDz3mYcKhbOgzRb5bq1_Y4/s400/Crea+tour+virutalesordinary.png" width="400" /></a></div>
<br />
<br />
<br />
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<br />
<div id="mc_embed_signup">
<form action="//codingonweb.us10.list-manage.com/subscribe/post?u=3ee9f953357bd224bcd1ede57&id=f608ca4d35" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Te gusto este articulo ? Suscribete para recibir mis ultimas noticias</label>
<input class="email" id="mce-EMAIL" name="EMAIL" placeholder="email address" required="" type="email" value="" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<br />
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_3ee9f953357bd224bcd1ede57_f608ca4d35" tabindex="-1" type="text" value="" /></div>
<div class="clear">
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-38438061305654268322016-08-19T21:08:00.001-07:002016-08-19T21:08:39.523-07:00Javascript : testeando Page Visibility APIUn ejemplo practico de uso de Page Visibility API , es para saber si el usuario cambia de tab en el misma ventana del navegador, pero no funciona si el usuario se pasa a otra ventana. El soporte para esta api es muy decente :<a href="http://caniuse.com/#feat=pagevisibility" target="_blank"> http://caniuse.com/#feat=pagevisibility</a><br />
<div>
<br /></div>
<div>
Posibles usos</div>
<div>
<ul>
<li>Pausar video o sonidos</li>
<li>Detener animaciones que nadie esta viendo</li>
<li>Detener llamadas al servidor si nadie las vera</li>
</ul>
<div>
<br /></div>
<div>
Ahora un ejemplo</div>
<div>
</div>
<div>
<br />
Visita este <a href="http://jsfiddle.net/SaulBurgos/vn7jre4x/" target="_blank">link</a> y veras como el video es detenido cuando cambias de tab. </div>
<div>
<br /></div>
</div>
<div>
Link:</div>
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API">https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API</a></div>
<div>
<a href="https://www.smashingmagazine.com/2015/01/creating-sites-with-the-page-visibility-api/">https://www.smashingmagazine.com/2015/01/creating-sites-with-the-page-visibility-api/</a></div>
<div>
<br /></div>
<div>
<br /></div>
<br />
<br />
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<br />
<div id="mc_embed_signup">
<form action="//codingonweb.us10.list-manage.com/subscribe/post?u=3ee9f953357bd224bcd1ede57&id=f608ca4d35" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Te gusto este articulo ? Suscribete para recibir mis ultimas noticias</label>
<input class="email" id="mce-EMAIL" name="EMAIL" placeholder="email address" required="" type="email" value="" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<br />
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_3ee9f953357bd224bcd1ede57_f608ca4d35" tabindex="-1" type="text" value="" /></div>
<div class="clear">
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-68735152533557008292016-08-15T20:47:00.001-07:002016-08-15T20:48:26.985-07:00Si programas tienes que usar una guia de estilos para tu codigo...Si actualmente estas programando y no estas usando una guía de estilo para tu código de acuerdo al lenguaje que usas, estas cometiendo un gran error...<br />
<div>
<br />
Una guía de estilo de código en palabras simples es como tu código luce , como lo ven los demás. Si miras todo el código que has escrito hasta ahora podrás notar un cierto patrón, ese es tu propio estilo. <br />
El problema con esto es que no es entandar y la mayoría de las veces solo tu podrás entenderlo. <br />
<br />
No serial genial que todos escribieran el código como tu lo haces ? .... Por esa razón mi buen amigo es que existen las guía de estilo de código, para que todos podamos leer y entender el código de los demás.<br />
<br />
Una guía de estilo de código por lo general tiene lo siguiente:<br />
<br />
<ul>
<li>Como y cuando usar comentarios</li>
<li>Como usar y cuanto espacio e indentación deberías de utilizar</li>
<li>Nombres adecuados para tus variables y funciones</li>
<li>Como agrupar tu código</li>
<li>Que técnicas usar o cuales no, dependiendo del lenguaje</li>
</ul>
<div>
Si tu objetivo es trabajar en una gran empresa, necesitas aprender los estilos de código para cada lenguaje que usas. Es un gran dolor de cabeza cuando un nuevo programador quiere escribir código a como le da la gana, Si tu eres uno de estos seguramente no vas a durar mucho.</div>
<div>
<br /></div>
<div>
Una rápida búsqueda en Google puede ayudarte a encontrar los estilos que buscas, pero a continuación podre algunos</div>
<div>
<br /></div>
<div>
<ul>
<li><a href="https://github.com/google/styleguide" target="_blank">Estilos de codigos de google</a></li>
<li><a href="http://docs.jquery.com/JQuery_Core_Style_Guidelines" target="_blank">JQuery</a></li>
<li><a href="https://www.google.com.ni/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=javascript%20good%20parts" target="_blank">Javascript the Good parts </a></li>
<li><a href="https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-2-coding-style-guide.md" target="_blank">PHP PSR-2</a></li>
</ul>
<div>
<br />
Link:<br />
<a href="https://www.smashingmagazine.com/2012/10/why-coding-style-matters/">https://www.smashingmagazine.com/2012/10/why-coding-style-matters/</a></div>
<div>
<br />
<br />
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<br />
<div id="mc_embed_signup">
<form action="//codingonweb.us10.list-manage.com/subscribe/post?u=3ee9f953357bd224bcd1ede57&id=f608ca4d35" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Te gusto este articulo ? Suscribete para recibir mis ultimas noticias</label>
<input class="email" id="mce-EMAIL" name="EMAIL" placeholder="email address" required="" type="email" value="" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<br />
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_3ee9f953357bd224bcd1ede57_f608ca4d35" tabindex="-1" type="text" value="" /></div>
<div class="clear">
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
</div>
saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-76110013689079674832016-07-23T10:36:00.001-07:002016-07-23T10:38:30.690-07:00Mejora tu codigo CSS, no hagas desastres !!<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
En este post voy a repasar algunas técnicas, ideas y metodologías que uso para escribir un código CSS escalable, mantenible, predecible y reusable. </div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
El 99% de los programadores está de acuerdo: “Nombrar cosas es por mucho lo más difícil de hacer cuando programas”. Buscar los nombres correctos para variables, métodos ó los nombres de clases para elementos HTML es muy complicado, esto es debido por que no podemos predecir el futuro de los diseños y funcionalidades. Por ejemplo:</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
El nombre de una clase de un elemento HTML puede tener mucho sentido hoy, pero si el diseño cambia una semana después, ese nombre de clase puede no encajar en la nueva estructura. También pasa lo mismo cuando una característica es añadida ó removida en una aplicación debido a que el cliente así lo decidió. Como resultado de estos cambios tenemos que hacer un <a data-mce-href="http://es.wikipedia.org/wiki/Refactorizaci%C3%B3n" href="http://es.wikipedia.org/wiki/Refactorizaci%C3%B3n" target="_blank" title="¿ que es refactoring ? ">refactoring</a> de nuestro código para que ahora pueda tener sentido. Este ciclo se repite constantemente a lo largo de cualquier proyecto, por lo cual tenemos que tener mucho cuidado cuando nombramos los elementos.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
No existe una técnica única para nombrar elementos correctamente, pero existen ciertas guías que pueden ayudarnos. En este artículo quiero enfocarme en cómo nombrar los elementos en CSS.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
En el momento en el que estemos bloqueados y no sabemos que nombre de clase ponerle a un elemento HTML, usa las siguientes sugerencias, las cuales podemos dividir en:<br />
<br /></div>
<h3 style="color: #333333; font-family: "arial" , "helvetica" , sans-serif;">
Nombres de clases funcionales</h3>
<div>
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Ejemplos de estos nombres: <em>save_button , delete_button , selected_tab</em>. El nombre de estos elementos está basado en la función que desempeñan. Con solo leer el nombre sabemos que ese boton es por ejemplo para guardar.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
El diseño puede cambiar pero la función de ese elemento no lo hará. Nombrar elementos de esta manera seria lo ideal pero no a todos los elementos podemos darles nombres basados en su funcion. Por ejemplo una caja de texto necesita una sombra para verse bien ó un icono tiene que ser azul por que se mira bonito.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
No todo estilo visual en un sitio web tiene una justificación funcional para poder nombrarlo.</div>
<h3 style="color: #333333; font-family: Arial, Helvetica, sans-serif;">
<br /></h3>
<h3 style="color: #333333; font-family: Arial, Helvetica, sans-serif;">
Nombres de clases basado en el contenido</h3>
<div>
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Ejemplo de estos nombres: <em>intro_text , description_item , image_product</em>. Este tipo de nombres describen el contenido de los elementos. Esta es la manera más obvia y facil de nombrar elementos. En sitios web pequeños es lo mejor que puedes hacer, pero para grandes proyectos no es lo ideal escribir todo tu estilo usando una única clase.</div>
<h3 style="color: #333333; font-family: Arial, Helvetica, sans-serif;">
<br /></h3>
<h3 style="color: #333333; font-family: Arial, Helvetica, sans-serif;">
Nombres de clases basado en la presentación</h3>
<div>
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Ejemplos de estos nombres: <em>red_button , big_text , vertical_menu, horizontal_menu , bold_text</em> . Este tipo de nombres describe el estilo del elemento, es decir la manera en como lucen y son presentados en el sitio web. También este tipo de nombres son muy descriptivos para cualquier programador, por ejemplo: “border_image” con solo leer ese nombre sabes que el estilo seria unos bordes en la imagen.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
La ventaja de estos nombres es que son reutilizables, por ejemplo “big_text” puede ser usado en muchos elementos donde queremos el texto en grande, no importa si es un título de página, nombre de persona ó título de producto, solamente nos interesa que sea un grande.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Piensa en esto : Los nombres de clases tienen significado y propósito, evita nombres que no sean descriptivos. Mantén en mente que los nombres de clases son para programadores, no para usuarios., Piensa en que un nombre de clase con solo leerla tiene que entregar toda la información posible sobre lo que hace a los programadores y a tu futuro yo.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Siempre debemos procurar que nuestro código CSS sea:</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<span data-mce-style="color: #0000ff;" style="color: blue;"><strong><span data-mce-style="color: #00ccff;" style="color: #00ccff;">Predecible:</span> </strong></span>Tus reglas CSS deben comportarse como su nombre lo indica. Cuando cambias ó actualizas un estilo solo debe afectar la parte que estas trabajando, no debería de afectar otra partes adicionales Ejemplo: <em>vertical_menu , big_button, text_center .</em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em><br /></em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
En estos ejemplos se puede ver claramente la intención del estilo.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<span data-mce-style="color: #00ccff;" style="color: #00ccff;"><strong>Reusable: </strong></span>Tus estilos deberían de ser lo suficientemente abstractos y estar lo menos atados posibles a un elemento en específico, para permitirte construir nuevos estilos a partir de ellos, sin tener que reescribir el mismo estilo de nuevo. Ejemplo: <em>shadow_big , round_square.</em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em><br /></em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Estas dos clases se puede usar en un mismo elemento para darle sombras y crear bordes redondeados y así crear un nuevo estilo combinado.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<span data-mce-style="color: #00ccff;" style="color: #00ccff;"><strong>Mantenible: </strong></span>Cuando el diseño web cambia y hay nuevos elementos en escena, tu código CSS no debería de sufrir un cambio drástico, un nuevo elemento Y no debería de afectar al elemento X antiguo.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Ejemplo: Si tienes un sidebar a la izquierda y el nuevo diseño dice que ahora son 2 sidebar al mismo tiempo en ambos lados. Con solo crear una clase nueva llamada “sidebar_rigth” deberías de solucionar el problema</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em><div class=”sidebar sidebar_left”>menu</div></em><br />
<em><div class=”sidebar sidebar_rigth”>menu</div></em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em><br /></em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
De esta manera la clase “sidebar” aplica el estilo general y las otras solo cambian la posición.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<strong><span data-mce-style="color: #00ccff;" style="color: #00ccff;">Escalable:</span> </strong>Esto significa que tu código CSS debe de ser fácilmente editable por una persona o por un equipo, que no tiene una curva de aprendizaje alta y es facilisimo de entender. Solo por que tu eres el único programador hoy actualizando este código no quiere decir que siempre sera así</div>
<h3 data-mce-style="text-align: center;" style="color: #333333; font-family: Arial, Helvetica, sans-serif; text-align: center;">
<br /></h3>
<h3 data-mce-style="text-align: center;" style="color: #333333; font-family: Arial, Helvetica, sans-serif; text-align: center;">
Malas practicas en CSS</h3>
<div>
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Ahora vamos a ver un poco de malas practicas CSS para saber que no debemos de hacer.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<span data-mce-style="color: #00ccff;" style="color: #00ccff;"><strong>Dar estilo basado en el padre: </strong></span> Ejemplo:</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em>#produc title_shadow {</em><br />
<em>}</em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em>#menu item_visited {</em><br />
<em>}</em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em>.contact .image_responsive {</em><br />
<em>}</em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em><br /></em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
En los 3 ejemplos anteriores no podremos reusar los estilos de “title_shadow” para texto con sombras, “item_visited” para links visitados y “image_responsive” para imagenes responsivas por que estamos forzando a que sean hijos de otros elementos.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Cuando tengas estilos generales, siempre analiza si puedes reusarlos en otros elementos de tu web.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<strong><span data-mce-style="color: #00ccff;" style="color: #00ccff;">Selectores CSS muy complicados:</span> </strong>Es cierto que CSS nos brinda muchos selectores que podemos usar, pero ojo no por eso vamos a abusar de ellos. Los siguientes son algunos malos ejemplos:</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em>#menu ul li {</em><br />
<em>}</em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em>#sidebar > div + p {</em><br />
<em>}</em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em>table tr ul p {</em><br />
<em>}</em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em><br /></em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Entre más selectores uses más amarrado esta al HTML, lo que provoca que cualquier cambio en el diseño web afecte a tu CSS también. Este tipo de reglas no son reusables, ni mantenibles por que están apuntando a un elemento en una posicion específica en el HTML</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
¿ Como podria otro elemento usar el mismo estilo, si tiene una estructura HTML distinta ?</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Simple no puede. En lugar puedes usar nombres de clases directos. Los ejemplos anteriores podrían reescribirse así:</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
.menu_item {<br />
}</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
.paragraph_description {<br />
}</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
.descrition_table {<br />
}</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<span data-mce-style="color: #00ccff;" style="color: #00ccff;"><strong>Nombres de clases simples y sin significado: </strong></span></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<span data-mce-style="color: #00ccff;" style="color: #00ccff;"><strong><br /></strong></span></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em>.title {</em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em>}</em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em>.content {</em><br />
<em>}</em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em>.name {</em><br />
<em>}</em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em><br /></em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Este tipo de nombres hay que evitarlos, son muy genéricos y no son informativos para el programador, por ejemplo ”title” ¿ titulo de que ?. con solo leerlo no podemos saber si es en un menú, en una sidebar ó titulo de artículo.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Otro problema es que como el nombre es muy generico, algun compañero podria sobreescribir tu CSS con mucha facilidad por accidente. Este tipo de nombres producen CSS impredecible.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<span data-mce-style="color: #00ccff;" style="color: #00ccff;"><strong>Un estilo que hace mucho:</strong></span></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<span data-mce-style="color: #00ccff;" style="color: #00ccff;"><strong><br /></strong></span></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em>.user_messages {</em><br />
<em> position: relative;</em><br />
<em> border: 1px solid gray;</em><br />
<em> background-color: white;</em><br />
<em> font-size: 15px;</em><br />
<em> marging-top: 50px;</em><br />
<em> left: 10px; </em><br />
<em>}</em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em><br /></em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Imagina que el estilo anterior es para para un caja que muestra los mensajes de usuarios, arriba en el centro de la página. Tiene un margen y lo mueve un poco a la derecha.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
¿ Que pasa si quiero mostrar esta misma caja al mismo tiempo en una sidebar derecha ? </div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Luciria muy mal , porque el estilo está haciendo muchas cosas: Esta definiendo aspecto y posicion dentro de la misma regla. El aspecto es algo que podemos reusar pero la posicion no, por eso toda la regla está comprometida. Lo mejor sería dividirla así:</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em>.user_messages {</em><br />
<em> position: relative;</em><br />
<em> border: 1px solid gray;</em><br />
<em> background-color: white;</em><br />
<em> font-size: 15px;</em><br />
<em>}</em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em>.user_message_top {</em><br />
<em> marging-top: 50px;</em><br />
<em> left: 10px; </em><br />
<em>}</em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em><br /></em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Así el elemento en la sidebar solo puede usar la clase “user_messages” para obtener el estilo.</div>
<h3 data-mce-style="text-align: center;" style="color: #333333; font-family: Arial, Helvetica, sans-serif; text-align: center;">
<br /></h3>
<h3 data-mce-style="text-align: center;" style="color: #333333; font-family: Arial, Helvetica, sans-serif; text-align: center;">
Usar clases solo para dar estilos y solo eso</h3>
<div>
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
El problema aquí es que en proyectos grandes te encuentras con nombres de clases que tienen muchos propósitos por ejemplo: para dar estilos , para hacer alguna función por medio de javascript , como ancla para algún plugin jquery , etc.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Las clases tienen muchas responsabilidades y cuando lees los nombres no son muy descriptivos, no hay nada que te indique para que son. Removerlas ó actualizarlas es todo un caos. La unica recomendacion que puedo hacer aquí es que tus clases solo deben ser usadas para dar estilos y nada más que eso. Y si necesitas alguna clase para hacer algo con javascript la recomendación es que crees otra clase y le pongas al inicio “js-”</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Ejemplo:<em> js-drapdrop , js-list-autocomplete , js-grid</em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em><br /></em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Cualquier clase que no comience con “js-” ya sabemos que solo es para dar estilo nada mas y podremos removerla o cambiar el nombre con confianza.</div>
<h3 data-mce-style="text-align: center;" style="color: #333333; font-family: Arial, Helvetica, sans-serif; text-align: center;">
<br /></h3>
<h3 data-mce-style="text-align: center;" style="color: #333333; font-family: Arial, Helvetica, sans-serif; text-align: center;">
Metodologías CSS</h3>
<div>
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Ahora solo nos falta por hablar sobre algunas metodologías CSS para nombrar clases, las cuales pueden ser muy útiles para escribir un código limpio. Las metodologías CSS son en palabras sencillas, consejos para estructurar mejor nuestro código CSS con el fin de que sea mantenible y escalable.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Existen muchas metodologías para escoger : <a data-mce-href="http://oocss.org/" href="http://oocss.org/" target="_blank" title="metodologia oocss">OOCSS</a>, <a data-mce-href="http://www.vanseodesign.com/css/smacss-introduction/" href="http://www.vanseodesign.com/css/smacss-introduction/" target="_blank" title="metodologia smacss">SMACSS</a>, <a data-mce-href="https://en.bem.info/" href="https://en.bem.info/" target="_blank" title="metodologia bem">BEM</a> solo para nombrar algunas. Yo quiero hablar sobre BEM.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
BEM es una metodología que consiste en : “block , element , modifier”. Sugiere escribir tu código CSS de manera estructural basado en elementos y modificadores. Usando BEM no esta permitido usar Ids. Ejemplo:</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em>.block {}</em><br />
<em>.block__element {}</em><br />
<em>.block--modifier {}</em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em><br /></em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<span data-mce-style="color: #00ccff;" style="color: #00ccff;"><strong>block :</strong> </span>define un bloque que contiene elementos<br />
<span data-mce-style="color: #00ccff;" style="color: #00ccff;"><strong>block__element</strong> :</span> elementos que componen al bloque<br />
<span data-mce-style="color: #00ccff;" style="color: #00ccff;"><strong>block--modifier</strong> :</span> reglas que modifican el estilo del bloque, ya sea estilo de presentación, posicion ó maquetado.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Para entender mejor esto veamos la siguiente imagen:</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<img alt="Caja de busqueda" class="aligncenter" data-mce-src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2012/03/search-bar.jpg" src="http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2012/03/search-bar.jpg" height="120" style="display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%;" width="500" /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
En la imagen podemos ver una caja de búsqueda y un botón, esto es considerado un block y todos los elementos dentro de él son parte de este block. Siguiendo la metodología BEM podemos escribir las clases de esta manera.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em>.search {}</em><br />
<em>.search__input {}</em><br />
<em>.search__button {}</em><br />
<em>.search--big {}</em><br />
<em>.search--tiny {}</em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<em><br /></em></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Hasta aquí lo más simple de BEM, no sería prudente escribir un tutorial completo sobre esto cuando en internet existen muchos y muy buenos. Si quieres saber más sobre esta metodología recomiendo leer los siguientes enlaces:</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="http://webdesign.tutsplus.com/es/articles/an-introduction-to-the-bem-methodology--cms-19403" href="http://webdesign.tutsplus.com/es/articles/an-introduction-to-the-bem-methodology--cms-19403" target="_blank">http://webdesign.tutsplus.com/es/articles/an-introduction-to-the-bem-methodology--cms-19403</a></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br />
<a data-mce-href="http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/" href="http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/" target="_blank">http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/</a></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<span style="color: #333333; font-family: "arial" , "helvetica" , sans-serif;"><span style="line-height: 24px;"><a href="https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/">https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/</a></span></span><br />
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br />
Recuerda que BEM ó cualquier otra metodología no va a resolver todos tus problemas, son solo maneras muy poderosas de hacer nuestro código mantenible y escalable para que todos en tu equipo tengan una idea clara de cómo mejorar el actualizar y mejorar el CSS.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<br />
<br />
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<br />
<div id="mc_embed_signup">
<form action="//codingonweb.us10.list-manage.com/subscribe/post?u=3ee9f953357bd224bcd1ede57&id=f608ca4d35" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Te gusto este articulo ? Suscribete para recibir mis ultimas noticias</label>
<input class="email" id="mce-EMAIL" name="EMAIL" placeholder="email address" required="" type="email" value="" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<br />
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_3ee9f953357bd224bcd1ede57_f608ca4d35" tabindex="-1" type="text" value="" /></div>
<div class="clear">
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
<br />
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
links</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="http://csslint.net/" href="http://csslint.net/" target="_blank">http://csslint.net/</a><br />
<a data-mce-href="http://seesparkbox.com/foundry/naming_css_stuff_is_really_hard" href="http://seesparkbox.com/foundry/naming_css_stuff_is_really_hard" target="_blank">http://seesparkbox.com/foundry/naming_css_stuff_is_really_hard</a><br />
<a data-mce-href="http://engineering.appfolio.com/2012/11/16/css-architecture/" href="http://engineering.appfolio.com/2012/11/16/css-architecture/" target="_blank">http://engineering.appfolio.com/2012/11/16/css-architecture/</a><br />
<a data-mce-href="http://styleguides.io/" href="http://styleguides.io/" target="_blank" title="articulos sobre guia de estilo css">https://css-tricks.com/bem-101/</a><br />
<a data-mce-href="http://styleguides.io/" href="http://styleguides.io/" target="_blank" title="articulos sobre guia de estilo css">http://styleguides.io/</a></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="https://css-tricks.com/what-a-css-code-review-might-look-like/" href="https://css-tricks.com/what-a-css-code-review-might-look-like/" target="_blank" title="Code review on CSS">https://css-tricks.com/what-a-css-code-review-might-look-like/</a></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-64148957359572402422016-07-23T10:26:00.000-07:002016-12-08T10:42:15.879-08:00Guia para iniciar en flex-box con CSS 3<br />
<div class="mceTemp" style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<dl class="wp-caption aligncenter" data-mce-style="width: 573px;" id="" style="-webkit-user-drag: none; margin: 0px auto; max-width: 100%; width: 573px;">
<dt class="wp-caption-dt" style="-webkit-user-drag: none;"><img alt="propiedades flex-box" class="" data-mce-src="https://mdn.mozillademos.org/files/3739/flex_terms.png" height="333" src="https://mdn.mozillademos.org/files/3739/flex_terms.png" style="-webkit-user-drag: none; display: block; height: auto; max-width: 100%;" width="563" /></dt>
<dd class="wp-caption-dd" style="-webkit-user-drag: none; font-size: 14px; margin: 0px; padding-top: 0.5em;">descripción de las propiedades flex-box</dd></dl>
</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="https://developer.mozilla.org/es/docs/Web/Guide/CSS/Cajas_flexibles" href="https://developer.mozilla.org/es/docs/Web/Guide/CSS/Cajas_flexibles" target="_blank" title="¿ que es flex-box ?">Flex-box</a> es la nueva técnica de maquetación CSS 3, con la cual es mucho más fácil crear estructuras HTML sin tener que usar float, inline-block o los muchos trucos que usábamos antes. 2015 es el momento indicado para aprender usar flex-box ya que ha alcanzado un buen soporte en navegadores. Puedes consultarlo en <a data-mce-href="http://caniuse.com/#search=flexbox" href="http://caniuse.com/#search=flexbox" target="_blank" title="sorporte flex-box en navegadores">caniuse.com.</a><br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
La primera idea que tuvimos en codingonweb fue hacer un buen tutorial sobre como usar flex-box, pero en el proceso de conseguir información me encontré de que ya existen muy buenos tutoriales para aprender desde cero. Con este artículo solo quiero aclarar ciertas cosas que considero no son explicadas claramente, asi pueden usar este articulo como complemento para los tutoriales.<br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
El primero paso es leer los excelentes tutoriales de flex-box que he encontrado:</div>
<ul style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<li><a data-mce-href="http://flexboxin5.com" href="http://flexboxin5.com/" target="_blank" title="facil tutorial de flex-box">http://flexboxin5.com</a></li>
<li><a data-mce-href="http://www.slideshare.net/zomigi/leveling-up-with-flexbox-smashing-conference" href="http://www.slideshare.net/zomigi/leveling-up-with-flexbox-smashing-conference" target="_blank" title="tutorial flex-box de Zoe Gillenwater">http://www.slideshare.net/zomigi/leveling-up-with-flexbox-smashing-conference</a></li>
</ul>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Ahora si no quedastes claro y necesitas una refuerzo lee el resto del articulo, aunque si le entendiste a la primera no sera necesario.<br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Flexbox ofrece una manera eficiente de maquetar cubriendo espacios disponibles ya sea expandiendo o encogiendo a sus elementos hijos. Para usar flex-box solo tienes que usar en un contenedor la propiedad <b>display: flex.</b> Esto convierte al elemento en un contenedor flex-box y automáticamente todos los elementos hijos directos se consideran elementos flexbox.<br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Aquí tienes un ejemplo sencillo para ver mejor en acción flex-box. Le he puesto una altura al contenedor para una mejor comprensión.<br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="http://jsfiddle.net/SaulBurgos/e6cjytxh/" href="http://jsfiddle.net/SaulBurgos/e6cjytxh/" target="_blank" title="ejemplo de uso de flex-box">http://jsfiddle.net/SaulBurgos/e6cjytxh/</a><br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Ahora lo interesante aquí es que con este ejemplo no podemos ver en acción lo de : “cubriendo espacios disponibles ya sea expandiendo o encogiendo a sus elementos hijos”. Para esto solo tienes que agregar ancho a los elementos hijos, no importa si es en píxeles ó porcentajes. Lo interesante es que si el ancho de los hijos excede el ancho de su contenedor, flex-box fuerza a sus hijos a encogerse, logrando el comportamiento de caja flexible. Ejemplo (redimensiona la zona de resultado)<br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="http://jsfiddle.net/SaulBurgos/20mv2h1m/1/" href="http://jsfiddle.net/SaulBurgos/20mv2h1m/1/" target="_blank" title="ejemplo flex-box 2">http://jsfiddle.net/SaulBurgos/20mv2h1m/1/</a><br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Como puedes ver flexbox nos crea unas cajas flexibles que se adaptan automáticamente.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
La propiedad <b>“justify-content”</b> sirve para determinar cómo queremos alinear los elementos flexbox(hijos) dentro de su contenedor en el eje horizontal. Ojo que para poder ver en acción esta propiedad la suma de los anchos de los hijos no tiene que exceder el 100% de su padre, tienes que dejar un espacio para poder ver como flex-box alinea los elementos, Ejemplo<br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="http://jsfiddle.net/SaulBurgos/20mv2h1m/2/" href="http://jsfiddle.net/SaulBurgos/20mv2h1m/2/" target="_blank" title="ejemplo uso de flex-box 3">http://jsfiddle.net/SaulBurgos/20mv2h1m/2/</a><br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Ahora por defecto flex-box toma todos los hijos y los encoge ó expande para que siempre estén dentro de su contenedor no importa si la suma de sus anchos exceden el 100% del ancho de su padre ó hay elementos adicionales, ejemplo:<br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="http://jsfiddle.net/SaulBurgos/osbLmgcn/1/" href="http://jsfiddle.net/SaulBurgos/osbLmgcn/1/" target="_blank" title="ejemplo de uso de flex-box 4">http://jsfiddle.net/SaulBurgos/osbLmgcn/1/</a><br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Como puedes ver en el ejemplo anterior los hijos tienen 25% de ancho y son 7, por lo que 25*7 = 175%, sobrepasa totalmente el 100% del padre pero flex-box los mantiene dentro de su contenedor. Este comportamiento es por defecto, pero podemos cambiarlo con la propiedad <b>“flex-wrap”</b>. Ejemplo:<br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="http://jsfiddle.net/SaulBurgos/osbLmgcn/3/" href="http://jsfiddle.net/SaulBurgos/osbLmgcn/3/" target="_blank" title="ejemplo de uso de flex-box 5">http://jsfiddle.net/SaulBurgos/osbLmgcn/3/</a><br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
En el ejemplo anterior podemos ver que cambiando el valor de esta propiedad podemos hacer que los elementos que no caben en el contenedor sean desplazados hacia abajo. Hay que poner mucha atención en que cada elemento ocupa 25% entonces solo 4 de ellos alcanzan en su contenedor padre para lograr el 100% los demás sobrantes serán desplazados, La propiedad<b> “align-items”</b> es usada para alinear los elementos flex-box (hijos) en el eje vertical. Ejemplo:<br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="http://jsfiddle.net/SaulBurgos/e6cjytxh/1/" href="http://jsfiddle.net/SaulBurgos/e6cjytxh/1/" target="_blank" title="ejemplo de uso de flex-box 6">http://jsfiddle.net/SaulBurgos/e6cjytxh/1/</a><br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
En el ejemplo he alineado los elemento hacia abajo en el eje vertical. También podemos hacerlo en el centro:<br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="http://jsfiddle.net/SaulBurgos/e6cjytxh/2/" href="http://jsfiddle.net/SaulBurgos/e6cjytxh/2/" target="_blank" title="ejemplo de uso de flex-box 7">http://jsfiddle.net/SaulBurgos/e6cjytxh/2/</a><br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Las propiedades anteriores son solo algunas de las mas comunes y que se usan solamente en el contenedor flexbox. Pero los hijos también tienen propiedades que podemos usar para manipularlos individualmente como son:<br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<b>Order:</b> Se usa para alterar el orden de los elementos, independientemente del orden en el HTML. Por defecto todos los elementos flex-box tiene 0. Si queremos pasar un elemento de primero sobre todos los demas usamos -1. Ejemplo:<br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="http://jsfiddle.net/SaulBurgos/e6cjytxh/3/" href="http://jsfiddle.net/SaulBurgos/e6cjytxh/3/" target="_blank" title="ejemplo uso de flex-box 8">http://jsfiddle.net/SaulBurgos/e6cjytxh/3/</a><br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
La parte interesante aquí es que el orden va de menor a mayor, como -1 es menor que cero , este elemento ira de primero. Ahora nos toca hablar de 2 propiedades que son muy poco utilizadas pero que tienden a la confusión, estas propiedades son usadas solo en elementos flex-box(hijos):<br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<b>flex-grow:</b> Determina cuanto un elemento va crecer con respecto a los otros hijos dentro del mismo contenedor, si hay espacio disponible para hacerlo. Ejemplo:<br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="http://www.w3schools.com/cssref/playit.asp?filename=playcss_flex-grow&preval=1" href="http://www.w3schools.com/cssref/playit.asp?filename=playcss_flex-grow&preval=1" target="_blank" title="ejemplo de uso de flex-box en la w3school">http://www.w3schools.com/cssref/playit.asp?filename=playcss_flex-grow&preval=1</a><br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Ojo esto es muy importante : “<span data-mce-style="text-decoration: underline;" style="text-decoration: underline;">si hay espacio disponible para hacerlo</span>”, lo que quiero decir, es que si entre todos los hijos logran el 100% de ancho del padre no habrá espacio para ser usado por la propiedad flex-grow. Ejemplo:<br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="http://jsfiddle.net/SaulBurgos/osbLmgcn/6/" href="http://jsfiddle.net/SaulBurgos/osbLmgcn/6/" target="_blank" title="ejemplo de uso de flex-box 9">http://jsfiddle.net/SaulBurgos/osbLmgcn/6/</a><br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Como puedes ver en el ejemplo anterior los hijos ahora tienen 15% , lo cual hacen 75% entre todos. El resto del espacio disponible lo toma el elemento con flex-grow.<br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<b>flex-shrink:</b> Es el inverso del flex-grow, determina cuanto un elemento se va encoger con respecto a los otros hijos dentro del mismo contenedor. Para ver esto en acción los demás hijos tienen que aumentar su tamaño para forzar que se encoja. Para comprender mejor este comportamiento haz lo siguiente con el siguiente ejemplo:<br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="http://jsfiddle.net/SaulBurgos/osbLmgcn/4/" href="http://jsfiddle.net/SaulBurgos/osbLmgcn/4/" target="_blank" title="ejemplo de uso de flex-box 10">http://jsfiddle.net/SaulBurgos/osbLmgcn/4/</a><br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
En el ejemplo anterior el tercer div tiene la clase “shrink”, ahora aumenta el tamaño de los elementos con la clase “container_item” de 25% a 40% y haz click en play. Solo se encoge cuando la suma del ancho de todos los hijos supera el 100% de contenedor.<br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<b>flex-basis:</b> define un tamaño base para un elemento, lo demas elementos se van a comportar en base a este. Es muy util para hacer algo como esto Ejemplo:<br />
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="http://jsfiddle.net/SaulBurgos/wsutmzrh/" href="http://jsfiddle.net/SaulBurgos/wsutmzrh/" target="_blank" title="ejemplo de uso de flex-box 11">http://jsfiddle.net/SaulBurgos/wsutmzrh/</a><br />
<br />
<h3>
Conclusion</h3>
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Flex-box viene a solucionar muchos problemas de maquetacion que teniamos y aprender a usarlo te quitara muchos dolores de cabeza. Par terminar te recomiendo los siguientes link para completar tu aprendizaje:</div>
<ul style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<li><a data-mce-href="http://philipwalton.github.io/solved-by-flexbox/" href="http://philipwalton.github.io/solved-by-flexbox/" target="_blank" title="ejemplos de problemas resueltos con flex-box">http://philipwalton.github.io/solved-by-flexbox/</a></li>
<li><a data-mce-href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank" title="guia de flex-box">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a></li>
<li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/">https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/</a> </li>
</ul>
<br />
<br />
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<br />
<div id="mc_embed_signup">
<form action="//codingonweb.us10.list-manage.com/subscribe/post?u=3ee9f953357bd224bcd1ede57&id=f608ca4d35" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Te gusto este articulo ? Suscribete para recibir mis ultimas noticias</label>
<input class="email" id="mce-EMAIL" name="EMAIL" placeholder="email address" required="" type="email" value="" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<br />
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_3ee9f953357bd224bcd1ede57_f608ca4d35" tabindex="-1" type="text" value="" /></div>
<div class="clear">
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-62496142499440149952016-07-23T10:18:00.001-07:002018-02-08T06:50:26.339-08:00¿ Que es una página web 404 ?<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<img alt="404 wikipedia" class=" aligncenter" data-mce-src="http://upload.wikimedia.org/wikipedia/commons/7/75/Children-404_logo.png" src="http://upload.wikimedia.org/wikipedia/commons/7/75/Children-404_logo.png" height="300" style="display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%;" width="300" /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Imaginemos que tenemos un sitio web con la siguiente estructura:</div>
<ul style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<li>index.html</li>
<li>blog.html</li>
<li>productos.html</li>
<li>contacto.html</li>
</ul>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Cuando nuestros visitantes entran a nuestro sitio atraves de una url por ejemplo: www.minegocio.com , el archivo que se carga por defecto es el index.html. Despues nuestros usuarios navegan por el sitio web por medio de links que los conducen a cada una de las secciones. Por ejemplo:</div>
<ul style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<li>www.minegocio.com/blog.html</li>
<li>www.minegocio.com/productos.html</li>
<li>www.minegocio.com/contacto.html</li>
</ul>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Aqui todo bien. Pero que pasa, cuando un link no apunta al archivo correcto ó cuando el archivo ya no existe ó el usuario escribio mal la direccion. En todos estos casos seguramente los visitantes verán una página 404 algo similar a esta, dependiendo del navegador que usen:</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<img alt="404 page no found" class="alignnone" data-mce-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNEfcXYb4IN3IWtb0OKYLR5vBGCO1xlzPo7Nt9NTaBXuZ9mPONIOKFjwm8ebaA-yzOHNXwGgwc5CaknfgTmZZlbGXE_0sb9AkTxJFPS7qWy144p8RWJSjGhKQtXi01lTf2z05HhZ72qfk/s1600/nofoundpage.jpg" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNEfcXYb4IN3IWtb0OKYLR5vBGCO1xlzPo7Nt9NTaBXuZ9mPONIOKFjwm8ebaA-yzOHNXwGgwc5CaknfgTmZZlbGXE_0sb9AkTxJFPS7qWy144p8RWJSjGhKQtXi01lTf2z05HhZ72qfk/s1600/nofoundpage.jpg" style="height: auto; max-width: 100%;" width="500" /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Esta pagina solo les dice a los usuarios que la página o contenido que estaba buscando no fue encontrado. El usuario menos experimentado en este momento no sabe que paso o que hacer, lo cual es frustrante. No sería una mejor idea que cuando esto pasara, le indicaramos al usuario un poco más de información sobre lo que ha pasado y tal vez alguna sugerencia para tratar de resolver el problema. </div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
De esta manera podemos guiar a nuestros visitantes de una manera correcta hacia donde podría encontrarse la información. Para esto es que existen las páginas 404. Si creas un archivo y le pones de nombre “404.html”, esa página siempre será cargada cada vez que los visitantes intenten acceder a un contenido que no existe o que los link estan incorrectos.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Dentro de este archivo podemos incluir toda la información necesaria de por que ocurrió ese error e información útil para guiarlo hacia otro contenido que podria interesarle</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
En internet existen sitios donde puedes descargar páginas 404, para incluirla en tu pagina web solo basta con buscar y descargar.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Si quieres crear tu mismo tu página 404 puedes obtener inspiración en google buscando por el término por ejemplo: “best 404 page”. Un sitio que tiene un buen top de esta pagina es :</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="http://www.creativebloq.com/web-design/best-404-pages-812505" href="http://www.creativebloq.com/web-design/best-404-pages-812505" target="_blank">http://www.creativebloq.com/web-design/best-404-pages-812505</a></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Otra idea muy útil es incluir un formulario de búsqueda en estas paginas para darle al usuario una opción de buscar en sitio web. Si quieres saber como lograr esto necesitas saber un poco de javascript y el uso de las API de Google. Para una guia paso a paso puedes visitar este web:</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="http://www.smashingmagazine.com/2014/08/12/a-better-404-page/" href="http://www.smashingmagazine.com/2014/08/12/a-better-404-page/" target="_blank">http://www.smashingmagazine.com/2014/08/12/a-better-404-page/</a></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Aunque una pagina sencilla y con información descriptiva puede bastar para sitios sencillos.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="https://designschool.canva.com/blog/404-page-design/" href="https://www.canva.com/es_mx/aprende/50-paginas-404-mas-creativas-web/" target="_blank" title="paginas de error 404">https://www.canva.com/es_mx/aprende/50-paginas-404-mas-creativas-web/</a></div>
<br />
<br />
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<br />
<div id="mc_embed_signup">
<form action="//codingonweb.us10.list-manage.com/subscribe/post?u=3ee9f953357bd224bcd1ede57&id=f608ca4d35" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Te gusto este articulo ? Suscribete para recibir mis ultimas noticias</label>
<input class="email" id="mce-EMAIL" name="EMAIL" placeholder="email address" required="" type="email" value="" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<br />
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_3ee9f953357bd224bcd1ede57_f608ca4d35" tabindex="-1" type="text" value="" /></div>
<div class="clear">
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-78036033876827704442016-07-12T20:03:00.000-07:002016-07-12T20:08:01.093-07:00¿ Que es SEO y SEM ? ¿ Porqué es importante ?<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Google, Yahoo y Bing son algunos de los motores de búsqueda más populares, con el único fin de ayudarnos a encontrar lo que buscamos en internet. Cada vez que buscas algo en uno de estos buscadores te muestra una serie de resultados paginados. En estos resultados pueden salir miles de paginas web. Pero alguna vez te has preguntado ¿ como funciona esto ?</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
En palabras simples cada buscador escanea la web indexando cada uno de las sitios web que encuentra. A cada uno de estos sitios encontrados, cada buscador usando sus propios métodos les asigna cierta “relevancia” y determina si es importante mostrar este sitio en sus resultados.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Con el tiempo las personas se dieron cuenta que realmente se podía ganar dinero si lograban que su sitio web saliera en los primeros resultados de los buscadores, fue entonces cuando de manera obvia llegaron a la conclusión de que necesitaban algún método para lograr que sus sitios fueran relevantes para los buscadores.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
A esto se le conoce como posicionamiento en buscadores.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<h3 style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<b>Nace el SEO y SEM</b></h3>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<strong>SEO:</strong> “Search Engine Optimization” El <a data-mce-href="http://es.wikipedia.org/wiki/Posicionamiento_en_buscadores" href="http://es.wikipedia.org/wiki/Posicionamiento_en_buscadores" target="_blank" title="¿ que es seo segun wikipedia ?">SEO </a>se centra en los resultados orgánicos, es decir todo el esfuerzo necesario que tenemos que hacer para salir en los primeros lugares en los buscadores sin tener que pagar (por ejemplo a Google) Hacer SEO se le conoce por tener que hacer una serie de cambios en tu sitio web a nivel de código para que los buscadores pueden indexar (rastrear) correctamente tu web y de esta manera aparecer en los primeros lugares.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<strong>SEM:</strong> “Search engine marketing” <a data-mce-href="http://es.wikipedia.org/wiki/Mercadotecnia_en_motores_de_b%C3%BAsqueda" href="http://es.wikipedia.org/wiki/Mercadotecnia_en_motores_de_b%C3%BAsqueda" target="_blank" title="¿ que es sem segun wikipedia ?">SEM</a> son los resultados de pago, es decir tu pagas para que tu página web siempre salga en los primeros resultados. Aqui manda el que tiene más dinero para salir primero y por lo general te cobran cada vez que alguien ha hecho click en tu anuncio.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Como puedes ver en la siguiente imagen, los anuncios pagados SEM siempre salen de primeros lugares y los de no pago (orgánicos) abajo de ellos</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<img alt="donde estan seo y sem en google" class=" aligncenter" data-mce-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf6x0HLqjjXE6FfxL1t_XGjmu61Vsdhm8DHcDKO2Q60nY-aHz-QH9760fp8i5QUTw7Wk81WQ02eYPWIseWWVgapFXdeeZ9a69soXnTQo4X2z98qtM_XoQksC4cpdh2hmd3P6M_XSj6KGU/s1600/holeles.jpg" height="496" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf6x0HLqjjXE6FfxL1t_XGjmu61Vsdhm8DHcDKO2Q60nY-aHz-QH9760fp8i5QUTw7Wk81WQ02eYPWIseWWVgapFXdeeZ9a69soXnTQo4X2z98qtM_XoQksC4cpdh2hmd3P6M_XSj6KGU/s1600/holeles.jpg" style="display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%;" width="629" /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Algo interesante de notar es que el 70% de los clicks se hacen en el área de los resultados orgánicos SEO y el 30% en el área SEM. Por lo que un buen SEO es de mucha importancia.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<img alt="sem y seo donde se hacen mas clicks" class=" aligncenter" data-mce-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVJENt2ugFY19E9WviHe7Id9vugt82oyLpXanjmLkDLdoIWI5zYkHgEbwgGLtZVIYl0lbcJ5H5jAp4aqAkoO1IrTFJuJ-46OAocK3DhpgjWrmZkXj2L0fkX6-pKu7xo8zWjIwpOJA5kbk/s1600/webtotal-marketing-seo-ppt-19-728.jpg" height="422" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVJENt2ugFY19E9WviHe7Id9vugt82oyLpXanjmLkDLdoIWI5zYkHgEbwgGLtZVIYl0lbcJ5H5jAp4aqAkoO1IrTFJuJ-46OAocK3DhpgjWrmZkXj2L0fkX6-pKu7xo8zWjIwpOJA5kbk/s1600/webtotal-marketing-seo-ppt-19-728.jpg" style="display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%;" width="563" /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
El siguiente mapa de calor también nos da una buena idea de donde se hacen la mayoría de los clicks</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<img alt="seo y sem mapa de calor de click de usuarios" class=" aligncenter" data-mce-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIaF8cRSRFyOerFOmDMSxXlZVW9VLoX98FROvTGZ9b31mZ5biTesHQhQe-gTsZwKcBhd1213BmTh5z3AzMi0Iwur42Ps1-7g9__uQKuHIO4OFMccYVoh3BpVSagNu9Sv_vtitllSzFsQ0/s1600/heat-map-analysis_heat-map-analysis_heat-map.jpg" height="477" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIaF8cRSRFyOerFOmDMSxXlZVW9VLoX98FROvTGZ9b31mZ5biTesHQhQe-gTsZwKcBhd1213BmTh5z3AzMi0Iwur42Ps1-7g9__uQKuHIO4OFMccYVoh3BpVSagNu9Sv_vtitllSzFsQ0/s1600/heat-map-analysis_heat-map-analysis_heat-map.jpg" style="display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%;" width="559" /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Pero esto no significa que debemos dejar el SEM a un lado, por que aunque el SEM tiene menos porcentajes de clicks , el ratio de conversión (ventas) de SEM es más alto que SEO es decir los visitantes que llegan a tu sitio web por medio de SEM posiblemente tengan más probabilidad de comprar.</div>
<ul style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<li>SEM ratio de conversion : 2.03%</li>
<li>SEO ratio de conversion: 1.26%</li>
</ul>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<strong>Una mezcla de las técnicas es muy saludable si quieres posicionar tu web, un tiempo haces SEO y otro SEM.</strong></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<strong><br /></strong></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Existen personas que todavía que no les interesa estar en los buscadores ya sea por que tienen muchos seguidores en sus redes sociales ó por que sus ventas se han mantenido estables hasta el momento.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Pero considera esto, segun <a data-mce-href="http://www.comscore.com/" href="http://www.comscore.com/" target="_blank">http://www.comscore.com/</a> se hacen 5000 millones de busquedas al dia en Google , esto es 3 millones de busquedas por minuto. Por lo que si tu no estas en los buscadores seguramente tu competencia si lo esta y estas perdiendo potenciales clientes.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Por ejemplo si tu tienes un hotel y escribes por ejemplo : “Hotel en Nicaragua” Todos lo resultados que veas serán todos tus competidores que ya tienen ventaja sobre ti.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Las redes sociales también juegan un papel importante para hacer SEO, por medio de ellas puedes crear viralidad de tus páginas al hacer que tus seguidores compartan tu web con sus amigos.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<h3>
<b>SEO y dispositivos moviles</b></h3>
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Recientemente Google empezó a penalizar los sitios web que no estan optimizados para dispositivos móviles, por lo que tienes que hacer todo lo posible para que tu sitio web sea compatible con tablets, celulares, etc. por que tendra un gran impacto en tu estrategia de posicionamiento en buscadores.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Google ofrece una herramienta útil para saber si tu sitio esta optimizado para móviles: <a data-mce-href="https://www.google.com/webmasters/tools/mobile-friendly/" href="https://www.google.com/webmasters/tools/mobile-friendly/" target="_blank">https://www.google.com/webmasters/tools/mobile-friendly/</a></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<b>¿ Por que razon Google hace esto ?</b> bueno el siguiente tweet te responde:</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<i>60% of consumers use mobile search for purchase decisions – is YOUR website responsive? via @rivaliq</i></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Recuerden que si ustedes estan en internet necesitan una estrategia de posicionamiento en buscadores SEO, no existe nada, ni nadie que no se beneficie de una estrategia SEO, no hacerlo es simplemente tonto por que seguramente tu competencia lo esta haciendo.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Si quieres aprender a fondo sobre posicionamiento en buscadores solo tienes que hacer una pequeña busqueda en Google sobre <a data-mce-href="https://www.google.com.ni/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=curso+seo+gratis" href="https://www.google.com.ni/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=curso+seo+gratis" target="_blank" title="cursos seo en google">cursos SEO</a> No te pierdas la explicación sencilla de google de como trabaja su buscador, esta muy interesante en el siguiente enlace:</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="http://www.google.com/intl/es/insidesearch/howsearchworks/thestory/" href="http://www.google.com/intl/es/insidesearch/howsearchworks/thestory/" target="_blank">http://www.google.com/intl/es/insidesearch/howsearchworks/thestory/</a></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Google en 2011 publico un articulo con unas guia que debes de tener en cuenta para crear contenido para tu web, aunque son un poco viejitas siguen siendo muy buenas practicas a seguir. <a data-mce-href="http://googlewebmastercentral.blogspot.com/2011/05/more-guidance-on-building-high-quality.html" href="http://googlewebmastercentral.blogspot.com/2011/05/more-guidance-on-building-high-quality.html" target="_blank" title="Guia para crear contenido de calidad segun google 2011">Guia de como crear contenido de calidad de google 211</a></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<h3 style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<b>Google lee contenido dinamico</b></h3>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Ahora nos toca pasarnos al tema de javascript. Muchos expertos SEO recomiendan insertar lo menos posible contenido por medio de codigo javascript por que corremos el peligro que google no pueda indexar nuestro contenido, no pueda leer las tags y nuestros enlaces.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Pero un grupo de expertos SEO se dio a la tarea de hacer pruebas para comprobar si Google no puede indexar contenido generado con javascript, ¿ el resultado ? GOOGLE INDEXA TODOOO !!</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Para leer los resultado y las pruebas visita el siguiente link:</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157" href="http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157" target="_blank" title="google lee e indexa javascript">http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157</a></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<h3 style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<b>Google analytics</b></h3>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Google analytics es una herramienta muy util para medir todo lo relacionado a SEO para tu pagina web, Si quieres entrar a este mundo tienes que aprender a usarla. Por suerte Google tiene unos cursos donde podras aprender todo lo necesario sobre esta herramienta, el unico detalle es que esta en ingles <a data-mce-href="https://analyticsacademy.withgoogle.com/explorer" href="https://analyticsacademy.withgoogle.com/explorer" target="_blank" title="Cursos Google analytics">Analytics Academy</a></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<b>Videos de youtube en SEO</b></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Youtube es una herramienta util para atraer trafico a tu web, optimizar tus videos es de vital importancia si quieres aumentar el traficoen tu web, <a data-mce-href="https://maurosicard.com/" href="https://maurosicard.com/" title="Mauro sicard">Mauro Sicard</a> ha escrito un articulo muy bueno de como debes optimizar tus videos.</div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="https://maurosicard.com/seo-en-youtube-como-posicionar-tu-video/" href="https://maurosicard.com/seo-en-youtube-como-posicionar-tu-video/" title="Optimzar videos de youtube para seo">https://maurosicard.com/seo-en-youtube-como-posicionar-tu-video/</a></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<br /></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
Links:<br />
<a data-mce-href="//www.40defiebre.com/guia-seo/que-es-seo-por-que-necesito/" href="http://www.40defiebre.com/guia-seo/que-es-seo-por-que-necesito/" target="_blank">http://www.40defiebre.com/guia-seo/que-es-seo-por-que-necesito/</a><br />
<a data-mce-href="//moz.com/beginners-guide-to-seo/how-search-engines-operate" href="http://moz.com/beginners-guide-to-seo/how-search-engines-operate" target="_blank">http://moz.com/beginners-guide-to-seo/how-search-engines-operate</a><br />
<a data-mce-href="//tristanelosegui.com/2010/03/23/%C2%BFque-es-seo-y-cuales-son-sus-ventajas/" href="http://tristanelosegui.com/2010/03/23/%C2%BFque-es-seo-y-cuales-son-sus-ventajas/" target="_blank">http://tristanelosegui.com/2010/03/23/%C2%BFque-es-seo-y-cuales-son-sus-ventajas/</a><br />
<a data-mce-href="http://searchengineland.com/the-ultimate-list-of-reasons-why-you-need-search-engine-optimization-121215" href="http://searchengineland.com/the-ultimate-list-of-reasons-why-you-need-search-engine-optimization-121215" target="_blank">http://searchengineland.com/the-ultimate-list-of-reasons-why-you-need-search-engine-optimization-121215</a><br />
<a data-mce-href="http://blog.rivaliq.com/new-mobile-google-algorithm/" href="http://blog.rivaliq.com/new-mobile-google-algorithm/" target="_blank">http://blog.rivaliq.com/new-mobile-google-algorithm/</a><br />
<a data-mce-href="https://www.fayerwayer.com/2015/03/cuanto-tarda-google-en-encontrar-un-sitio-web-oculto/" href="https://www.fayerwayer.com/2015/03/cuanto-tarda-google-en-encontrar-un-sitio-web-oculto/" target="_blank">https://www.fayerwayer.com/2015/03/cuanto-tarda-google-en-encontrar-un-sitio-web-oculto/</a></div>
<div style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px;">
<a data-mce-href="https://support.google.com/webmasters/answer/6001093?hl=en" href="https://support.google.com/webmasters/answer/6001093?hl=en" target="_blank">https://support.google.com/webmasters/answer/6001093?hl=en</a></div>
<br />
<br />
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<br />
<div id="mc_embed_signup">
<form action="//codingonweb.us10.list-manage.com/subscribe/post?u=3ee9f953357bd224bcd1ede57&id=f608ca4d35" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Te gusto este articulo ? Suscribete para recibir mis ultimas noticias</label>
<input class="email" id="mce-EMAIL" name="EMAIL" placeholder="email address" required="" type="email" value="" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<br />
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_3ee9f953357bd224bcd1ede57_f608ca4d35" tabindex="-1" type="text" value="" /></div>
<div class="clear">
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-20805017171701166402016-06-24T07:13:00.006-07:002018-04-10T17:19:48.052-07:00 Libro Google maps Javascript - Capítulo 5 : Herramientas y articulos utiles<br />
<br />
<h1 dir="ltr" id="docs-internal-guid-c2688cff-424f-9a2c-1cc6-75a646913e39" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 10pt; text-align: left;">
<span style="background-color: transparent; color: black; font-family: "trebuchet ms"; font-size: 21.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><a href="http://webmasternoob.blogspot.com/2016/01/libro-google-maps-javascript-indice.html" style="font-size: 21.3333px; line-height: 1.38;" target="_blank">Volver al indice</a></span></h1>
<br />
<br />
<br />
Coleccion de articulos y herramientas de Google maps que voy encontrando en internet<br />
<br />
<ol>
</ol>
<ul>
<li><a href="https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries" target="_blank">https://github.com/googlemaps/v3-utility-library</a></li>
<li><a href="http://www.paneek.net/" target="_blank">http://www.paneek.net/</a></li>
<ul>
<li>Crea tour virtual con google streetview </li>
</ul>
<li><a href="https://github.com/SaulBurgos/easyLocator" target="_blank">https://github.com/SaulBurgos/easyLocator</a></li>
<ul>
<li>Plugin para crear locaciones de mapa </li>
</ul>
<li><a href="https://developers.google.com/maps/articles/">https://developers.google.com/maps/articles/</a></li>
<ul>
<li>Articulos oficiales de la google</li>
</ul>
<li>http://www.geocodezip.com/</li>
<ul>
<li>Buenos link sobre la API de google maps </li>
</ul>
</ul>
<ol>
</ol>
<hr />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.paneek.net/" target="_blank"><img alt="http://www.paneek.net/" border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZWyramNx_49pVlGMpPhvR_HcMEGsFjJEaWvA_d2YJBteZ2ujk55toqHfNhWLu7O0Gy-_0jYJOmF-cCyZr2vqTLGcC_hfVdD111eVaNBlBuU8Kx0b40Vl-hFDz3mYcKhbOgzRb5bq1_Y4/s400/Crea+tour+virutalesordinary.png" width="400" /></a></div>
<br />
<br />
<br />
saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-74301689981283306612016-05-25T21:38:00.002-07:002016-05-29T08:32:35.449-07:00Que es SVG y como usarlo en paginas webSVG es un formato de imagen para dibujos vectoriales, el mismo tipos de archivos que usan los diseñadores gráficos con Adobe Illustrador. Gracias a los nuevos estandares web podemos usar este tipo de formatos de imagen y aprovechar todos los beneficios.<br />
<br />
Beneficios<br />
<br />
<ul>
<li>Tamaño de archivo muy pequeño y comprimido</li>
<li>La image se puede ver perfectamente en cualquier resolución de pantalla ya que puede ser escalado sin problemas, pudiendo verse perfecto en resoluciones retina display.</li>
<li>Tamaño del archivo reducido.</li>
</ul>
<br />
<br />
Normalmente ese tipo de archivos son creados con alguna herramienta de dibujos vectoriales como Adobe Illustrador. Ahora mismo existen muchos <a href="https://www.google.com.ni/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=svg+editor+online" target="_blank">editores online de SVG</a> donde puedes crearlos y editarlos.<br />
<br />
Independientemente de la herramientas uses, tu puedes usar un SVG de 2 maneras:<br />
<br />
<br />
<ol>
<li>Con un archivo físico con la extensión .svg</li>
<li>O con el codigo SVG que es similar a este:</li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://cdn.css-tricks.com/wp-content/uploads/2013/03/svg-code.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="281" src="https://cdn.css-tricks.com/wp-content/uploads/2013/03/svg-code.png" width="400" /></a></div>
<div>
Con cualquiera de los 2 puedes trabajar. Para usar el SVG solo tienes que usar la etiqueta img como con cualquier imagen normal y con CSS puedes controlar el tamaño. Ejemplo:</div>
<div>
<br /></div>
<div>
<span id="docs-internal-guid-bc9fa8ce-eb55-7e39-00f3-332c0ddf40de"><br /><span style="background-color: white; color: #1155cc; font-family: "droid sans"; font-size: 16px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;"><a href="https://jsfiddle.net/SaulBurgos/13jqgp3b/" style="text-decoration: none;">https://jsfiddle.net/SaulBurgos/13jqgp3b/</a></span></span></div>
<div>
<br /></div>
<div>
<div>
Tambien puedes usar un SVG como fondo de un elemento con CSS.</div>
<div>
<br /></div>
<div>
.container {</div>
<div>
width: 100px;</div>
<div>
height: 82px;</div>
<div>
background: url(yourFile.svg);</div>
<div>
}</div>
<div>
<br /></div>
<div>
También otra opciones es usar la etiqueta “object”. Ejemplo:</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<span style="font-family: "courier new" , "courier" , monospace;"><object type="image/svg+xml" data="namefile.svg">Your browser does not support SVGs</object></span></div>
<div>
<br /></div>
<div>
<h2>
Usando el código SVG</h2>
<div>
<br /></div>
<div>
Descarga el Siguiente archivo:</div>
<div>
<br /></div>
<div>
<a href="http://rationalwiki.org/w/images/9/9c/Che.svg">http://rationalwiki.org/w/images/9/9c/Che.svg</a></div>
<div>
<br /></div>
<div>
Después abre el archivo con tu editor de texto, por ejemplo yo estoy usando sublime text, cuando abras el archivo verás el código SVG que crea la imagen. Este código lo puedes copiar y pegar directamente en un archivo HTML y verás como el SVG aparece, El navegador lo cargara automáticamente.</div>
<div>
<br /></div>
<div>
Los archivos SVG pueden ser optimizados ya que como puedes ver en el código del archivo del “Che.svg” hay muchas etiquetas adicionales. Puedes usar la siguiente herramienta para esto.</div>
<div>
<br /></div>
<div>
<a href="http://petercollingridge.appspot.com/svg-optimiser">http://petercollingridge.appspot.com/svg-optimiser</a></div>
<div>
<br /></div>
<div>
También puedes dar estilo individualmente a cada elemento del SVG, tan solo tienes que asignar clases para poder dar tus estilos. Ten en cuenta que para dar estilo a los SVG tienes que usar propiedades CSS especiales para ellos, los cuales tienes que buscar en google por ejemplo.</div>
<div>
<br /></div>
<div>
<a href="https://jsfiddle.net/SaulBurgos/cg1229a1/1/">https://jsfiddle.net/SaulBurgos/cg1229a1/1/</a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Si quieres conocer un poco más en detalle cada elemento dentro del SVG tag , te sugiero que visites este link:</div>
<div>
<br /></div>
<div>
<a href="http://svgpocketguide.com/book/">http://svgpocketguide.com/book/</a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Adicionalmente esta tabla te ayudará a entender lo que puedes hacer con los SVG dependiendo la manera en como lo insertes en tu página web.<br />
<br />
<span id="docs-internal-guid-bc9fa8ce-eb67-3f4e-a32e-92f945d87dec"><br /></span>
<br />
<div dir="ltr" style="margin-left: 0pt;">
<table style="border-collapse: collapse; border: none;"><colgroup><col width="230"></col><col width="84"></col><col width="111"></col><col width="101"></col><col width="97"></col></colgroup><tbody>
<tr style="height: 0px;"><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 7px 0px 1px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Lo que puedes hacer</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 7px 0px 1px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Object</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 7px 0px 1px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Inline</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 7px 0px 1px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Img</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 7px 7px 7px 7px; vertical-align: top;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Background-image</span></div>
</td></tr>
<tr style="height: 0px;"><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">CSS Manipulation</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Yes</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Yes</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Some inline</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Some inline</span></div>
</td></tr>
<tr style="height: 0px;"><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">JS Manipulation</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Yes</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Yes</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">No</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">No</span></div>
</td></tr>
<tr style="height: 0px;"><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">SVG Animation</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Yes</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Yes</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Yes</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Yes</span></div>
</td></tr>
<tr style="height: 0px;"><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Interactive SVG Animation</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Yes</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Yes</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">No</span></div>
</td><td style="border-bottom: solid #000000 1px; border-left: solid #000000 1px; border-right: solid #000000 1px; border-top: solid #000000 1px; padding: 0px 0px 0px 0px; vertical-align: middle;"><div dir="ltr" style="line-height: 2.7818181818181817; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #494949; font-family: "arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">No</span></div>
</td></tr>
</tbody></table>
</div>
</div>
</div>
<h2>
Usando Javascript con SVG</h2>
<div>
<div>
<br /></div>
<div>
También podemos manipular los SVG con javascript como lo haríamos con un objeto normal HTML, podemos usar javascript puro o jquery para esto. En el siguiente ejemplo que encontre internet puedes ver cómo se selecciona el elemento y después se cambia su propiedad “fill”.</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<a href="http://codepen.io/mijingo/pen/07c4a4427273b62d206c7f2544a7f280">http://codepen.io/mijingo/pen/07c4a4427273b62d206c7f2544a7f280</a></div>
<div>
<br /></div>
<div>
Si quieres una manipulación más avanzada con los SVG te recomienzo las siguientes librarias:</div>
<div>
<br /></div>
<div>
<span id="docs-internal-guid-bc9fa8ce-eb58-1c0d-7ca1-4ae20acb11f5"></span><br />
<ul style="margin-bottom: 0pt; margin-top: 0pt;"><span id="docs-internal-guid-bc9fa8ce-eb58-1c0d-7ca1-4ae20acb11f5">
<li dir="ltr" style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; list-style-type: disc; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="http://snapsvg.io/" style="text-decoration: none;"><span style="color: #1155cc; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Snap.svg</span></a></div>
</li>
<li dir="ltr" style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; list-style-type: disc; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="http://svgjs.com/" style="text-decoration: none;"><span style="color: #1155cc; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">SVG.js</span></a></div>
</li>
<li dir="ltr" style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; list-style-type: disc; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://github.com/DmitryBaranovskiy/raphael" style="text-decoration: none;"><span style="color: #1155cc; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Raphaël</span></a></div>
</li>
<li dir="ltr" style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; list-style-type: disc; vertical-align: baseline;"><a href="https://d3js.org/" style="text-decoration: none;"><span style="color: #1155cc; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">D3.js</span></a></li>
</span></ul>
<span id="docs-internal-guid-bc9fa8ce-eb58-1c0d-7ca1-4ae20acb11f5">
</span></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Habiendo escrito todo lo anterior, Deberías de ir considerando de usar svg en todos tus iconos y logos de tus proyectos web. Si por alguna razon aun no estas convencido visita este link :<br />
<a href="https://www.blogger.com/goog_95637951"><br /></a>
<a href="http://talks.brennaobrien.com/svg/#/">http://talks.brennaobrien.com/svg/#/</a><br />
<br /></div>
</div>
<div>
<br /></div>
<div>
links</div>
<div>
<span id="docs-internal-guid-bc9fa8ce-eb58-5c3f-54b1-09527d46f6bd"></span><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span id="docs-internal-guid-bc9fa8ce-eb58-5c3f-54b1-09527d46f6bd"><a href="https://css-tricks.com/using-svg/" style="text-decoration: none;"><span style="background-color: white; color: #1155cc; font-family: "droid sans"; font-size: 16px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">https://css-tricks.com/using-svg/</span></a></span></div>
<span id="docs-internal-guid-bc9fa8ce-eb58-5c3f-54b1-09527d46f6bd">
</span>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span id="docs-internal-guid-bc9fa8ce-eb58-5c3f-54b1-09527d46f6bd"><span style="background-color: white; color: #1155cc; font-family: "droid sans"; font-size: 16px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;"><a href="https://svgontheweb.com/" style="text-decoration: none;">https://svgontheweb.com/</a></span></span></div>
<span id="docs-internal-guid-bc9fa8ce-eb58-5c3f-54b1-09527d46f6bd">
</span></div>
<div>
<br /></div>
<div>
<br /></div>
</div>
<br />
<br />
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<br />
<div id="mc_embed_signup">
<form action="//codingonweb.us10.list-manage.com/subscribe/post?u=3ee9f953357bd224bcd1ede57&id=f608ca4d35" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Te gusto este articulo ? Suscribete para recibir mis ultimas noticias</label>
<input class="email" id="mce-EMAIL" name="EMAIL" placeholder="email address" required="" type="email" value="" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<br />
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_3ee9f953357bd224bcd1ede57_f608ca4d35" tabindex="-1" type="text" value="" /></div>
<div class="clear">
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-6662680637253090752016-05-01T15:47:00.000-07:002016-05-01T15:47:23.574-07:00¿ Por qué como programador web debes saber que son las metodologías ágiles ?Como desarrollador web debes de saber lo que significa : “<a href="https://es.wikipedia.org/wiki/Desarrollo_%C3%A1gil_de_software" target="_blank">Desarrollo de proyectos ágiles</a>”, Por que construir software no es como construir carros o casas.<br />
<br />
El “Desarrollo de proyectos ágiles” es básicamente un conjunto de técnicas que te ayudarán a crear software de manera rápida y ordenada, evitando muchos problemas como por ejemplo entregar un producto que tu cliente no quiere.<br />
<br />
Normalmente si no utilizas ninguna metodología ágil en tus proyectos lo que estás haciendo en un ciclo de vida en “cascada”. El ciclo de vida en cascada se componente por lo general de : Requisitos , análisis , diseño , evaluación, ect. se realizan (en teoría) de manera lineal, una única vez, y el inicio de una fase no comienza hasta que termina la fase anterior.<br />
<br />
Su principal problema viene de que no deja claro cómo responder cuando el resultado de una fase no es el esperado. Por ejemplo ya llevas 4 meses programando y después viene el cliente y te dice que ahora los requisitos han cambiado por el mercado lo demanda. ¿ Que harias ? Seguramente comenzar todo el proceso de nuevo.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://miriadax.net/image/image_gallery?uuid=73c391a7-3a31-49d2-86a7-8d147d71191c&groupId=10090702&t=1380008400167" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://miriadax.net/image/image_gallery?uuid=73c391a7-3a31-49d2-86a7-8d147d71191c&groupId=10090702&t=1380008400167" width="400" /></a></div>
<br />
<br />
Para evitar esto las metodologías ágiles recomienzan dividir este proceso en pequeños ciclos. Para que tengas una mejor idea mira el siguiente video.<br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/EwmI5NDKLBo" width="420"></iframe>
<br />
<br />
Después de ver el siguiente video seguramente ya tienes una idea sobre lo que se puede lograr con las metodologías ágiles. No esta demas decirte que todas las grandes compañías del mundo ya implementan estas metodologías y tu debes saber por lo menos que son. <br />
<br />
Si siguiente video es un resumen muy bueno sobre todo esto de agilidad de proyectos, el cual te dara una vision general sobre todo este mundo. El video es una presentacion de <a href="http://www.javiergarzas.com/" target="_blank">Javier Garzás</a> un tipo realmente muy buen en este tema.<br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/oShXAC26rcs" width="560"></iframe>
<br />
<br />
Si despues de ver este video quieres aprender sobre este tema yo te recomiendo un curso muy bueno en <a href="https://miriadax.net/">https://miriadax.net/</a> , aunque este sitio no es el único en donde puedes aprender, una rápida búsqueda en <a href="https://www.google.com.ni/webhp?sourceid=chrome-instant&rlz=1C1RLNS_esNI667NI667&ion=1&espv=2&ie=UTF-8#q=+scrum+aprender" target="_blank">google te dara multiples opciones</a>.<br />
<br />
El link del curso : <a href="https://miriadax.net/web/agilidad-y-lean-gestionando-los-proyectos-y-negocios-del-s-xxi-5-edicion-" target="_blank">Agilidad y Lean. Gestionando los proyectos y negocios</a><br />
<br />
<br />
Te aseguro que aprender esto te ayudara muchísimo en tu vida laboral.<br />
<div>
<br /></div>
<br />
<br />
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<br />
<div id="mc_embed_signup">
<form action="//codingonweb.us10.list-manage.com/subscribe/post?u=3ee9f953357bd224bcd1ede57&id=f608ca4d35" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Te gusto este articulo ? Suscribete para recibir mis ultimas noticias</label>
<input class="email" id="mce-EMAIL" name="EMAIL" placeholder="email address" required="" type="email" value="" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<br />
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_3ee9f953357bd224bcd1ede57_f608ca4d35" tabindex="-1" type="text" value="" /></div>
<div class="clear">
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-8820206879413746652016-04-13T11:50:00.001-07:002016-04-13T11:52:42.983-07:00¿ Como los politicos manipulan las eleciones usando las redes sociales ?Los politicos entienden internet y tienen a la gente correcta en su staff. Si crees lo contrario, estas perdido. Por favor ve este video es un poco largo pero te daras cuenta de como en la actualidad las elecciones son manipuladas de una manera totalmente nueva que no conocias usando las redes sociales.<br />
<br />
Los chicos de <a href="http://platzi.com/" target="_blank">platzi</a> en publicado un video muy bueno donde te explican como funciona.<br />
<br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/4nj2jJf1UPI" width="560"></iframe>
<br />
<br />
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<br />
<div id="mc_embed_signup">
<form action="//codingonweb.us10.list-manage.com/subscribe/post?u=3ee9f953357bd224bcd1ede57&id=f608ca4d35" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Suscribete para recibir mis ultimas noticias</label>
<input class="email" id="mce-EMAIL" name="EMAIL" placeholder="email address" required="" type="email" value="" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<br />
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_3ee9f953357bd224bcd1ede57_f608ca4d35" tabindex="-1" type="text" value="" /></div>
<div class="clear">
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-25511409782772194322016-01-24T10:23:00.003-08:002016-01-27T19:25:48.479-08:00Qué carreras rentables elegir en el 2016 en tecnología No puedo evitar no compartir este video de los chicos de platzi , es increible . Todo la información que entrega este video para que comiences este 2016 te sera de mucha utilidad.<br />
<br />
Si tienes todavia idea que estudiar este 2016 recomiendo mucho este video de freddy<br />
<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/6sEjltUCk14" width="560"></iframe>
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<br />
<div id="mc_embed_signup">
<form action="//codingonweb.us10.list-manage.com/subscribe/post?u=3ee9f953357bd224bcd1ede57&id=f608ca4d35" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Suscribete para recibir mis ultimas noticias</label>
<input class="email" id="mce-EMAIL" name="EMAIL" placeholder="email address" required="" type="email" value="" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<br />
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_3ee9f953357bd224bcd1ede57_f608ca4d35" tabindex="-1" type="text" value="" /></div>
<div class="clear">
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0tag:blogger.com,1999:blog-7660119587503119677.post-60586085147896251472016-01-21T13:53:00.001-08:002018-04-10T17:21:29.652-07:00Libro Google maps Javascript - Capítulo 5 : Guardar y cargar tu overlays parte 2<br />
<h1 dir="ltr" id="docs-internal-guid-c2688cff-424f-9a2c-1cc6-75a646913e39" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 10pt; text-align: left;">
<span style="background-color: transparent; color: black; font-family: "trebuchet ms"; font-size: 21.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><a href="http://webmasternoob.blogspot.com/2016/01/libro-google-maps-javascript-indice.html" style="font-size: 21.3333px; line-height: 1.38;" target="_blank">Volver al indice</a></span></h1>
<br />
<br />
<div dir="ltr" id="docs-internal-guid-c2688cff-661d-892d-e190-c80655bdc91c" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 18.666666666666664px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;">Siguiente paso</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Suponiendo que los datos enviados al servidor fueron guardados con éxito en una base de datos, ahora viene la segunda parte de este proceso, recrear todos los overlays y nuestro mapa basados en estos datos, básicamente el proceso será inverso, a esto se le llama : Deserialización.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Los datos almacenados en la base de datos por lo general son obtenidos por medio de un método AJAX o algún servicio web, el cual debe devolver un objeto JSON de preferencia, con todos los datos correspondientes. Para los siguientes ejemplos vamos a suponer que el método AJAX nos ha devuelvo el siguiente objeto basado en los ejemplos anteriores.</span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">{</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"overlays"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:[{</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"position"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">""</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"type"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">""</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"id"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">""</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"draggable"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">""</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"title"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">""</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"description"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">""</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}],</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"map"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:{</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"zoom"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">""</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"bounds"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">""</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"mapType"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">""</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"type"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"map"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Los datos de los overlay se encuentran en la propiedad “overlays”, que es un arreglo de objetos y los datos de nuestro mapa se encuentran en la propiedad “map”. Vamos a crear un método llamado “FakeAjax” el cual nos devolverá este objeto simulando un llamado AJAX al servidor, Para los siguientes ejemplos vamos usar como punto de partida el archivo de práctica número “29” el cual contiene creado el método “FakeAjax”.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Normalmente los objetos JSON que son devueltos como respuesta del servidor, vienen en formato cadena por lo tanto tienes que parsear esa cadena para convertirla a un objeto Javascript por ejemplo usando el método </span><a href="http://api.jquery.com/jQuery.parseJSON/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline;">jQuery.parseJSON()</span></a></div>
<br />
<h2 dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;">Deserializar Marker</span></h2>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">En nuestro archivo de practica numero “29” tenemos el método “FakeAjax”, que nos devuelve un objeto con toda la información que necesitamos recrear. El cual ejecutamos en el evento “idle” de nuestro mapa.</span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">google.maps.event.addListenerOnce(map, </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">'idle'</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">, </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">function</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">() {</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> data = FakeAjax();</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">});</span><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Ahora necesitamos iterar sobre el arreglo de objetos que contiene la información que necesitamos en la propiedad “overlays”.</span><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span></div>
<br />
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">google.maps.event.addListenerOnce(map, </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">'idle'</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">, </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">function</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">() {</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> data = FakeAjax();</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">for</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> (</span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> i = </span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">0</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> ; i < data.overlays.length ; i++)</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">{ </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">switch</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">(data.overlays[i].type)</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">{</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"marker"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aaaaaa; font-family: "consolas"; font-size: 12px; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">//marker</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"polyline"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aaaaaa; font-family: "consolas"; font-size: 12px; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">//polyline</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"rectangle"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aaaaaa; font-family: "consolas"; font-size: 12px; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">//rectanlge</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"circle"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aaaaaa; font-family: "consolas"; font-size: 12px; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">//cirlce</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"polygon"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aaaaaa; font-family: "consolas"; font-size: 12px; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">//polygon</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">});</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Usando un ciclo FOR iteramos sobre el arreglo de objetos y para cada elemento del arreglo usamos su propiedad “type”, para saber que tipo de overlay se necesita deserializar usando un switch javascript. Ahora vamos a crear un método llamado “DeserializeMaker”.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">google.maps.event.addListenerOnce(map, </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">'idle'</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">, </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">function</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">() {</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> data = FakeAjax();</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">for</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> (</span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> i = </span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">0</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> ; i < data.overlays.length ; i++)</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">{ </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> objectDeserialized;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">switch</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">(data.overlays[i].type)</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">{</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"marker"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializeMaker(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"polyline"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aaaaaa; font-family: "consolas"; font-size: 12px; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">//polyline</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span></div>
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt; text-align: justify; text-indent: 36pt;">
<span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"rectangle"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aaaaaa; font-family: "consolas"; font-size: 12px; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">//rectanlge</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"circle"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aaaaaa; font-family: "consolas"; font-size: 12px; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aaaaaa; font-family: "consolas"; font-size: 12px; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aaaaaa; font-family: "consolas"; font-size: 12px; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> //cirlce</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"polygon"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aaaaaa; font-family: "consolas"; font-size: 12px; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">//polygon</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> }</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> objectDeserialized.setMap(map);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> }</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">});</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">function</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> DeserializeMaker (object) {</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> position = object.position.split(</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">','</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> latLng = </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">new</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> google.maps.LatLng(position[</span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">0</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">],position[</span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">1</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> marker = </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">new</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> google.maps.Marker({</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">position: latLng,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">draggable:object.draggable</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">});</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">return</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> marker;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">En nuestro método “DeserializeMarker” estamos recibiendo como parámetro el elemento del arreglo actual sobre el cual se está iterando, este objeto tiene las propiedades que previamente habíamos serializado para recrear el marker, en este caso solo es “position” el cual es una cadena de texto con los valores LatLng de la position del marker separados por coma, usando el método </span><a href="http://www.w3schools.com/jsref/jsref_split.asp" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline;">split</span></a><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> podemos obtener estos datos como un arreglo. Recuerda que el primer valor es Lat y el segundo es Lng. Este es un ejemplo del objeto que estamos recibiendo:</span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: white; color: #00aaaa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Object</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> {</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">position: </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"-39.198205,-56.162109"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">type: </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"marker"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">id: </span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">1</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">draggable: </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">true</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Después creamos nuestros objetos </span><a href="https://developers.google.com/maps/documentation/javascript/reference#LatLng" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline;">Latlng</span></a><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> y </span><a href="https://developers.google.com/maps/documentation/javascript/reference#Marker" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline;">Marker</span></a><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> usando las clases de Google Maps, pasando como parámetro los valores obtenidos de la propiedad “position”. Nuestro método devuelve el objeto marker creado, el cual es asignado en la variable “objectDeserialized”, en esta variable asignaremos cada objeto creado por nuestros métodos y al final de cada ciclo FOR usaremos el método “setMap” para asignar el objeto creado al mapa ya que todos los overlays comparten el este metodo.</span></div>
<br />
<h2 dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;">Deserializar rectangle</span></h2>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Con el overlay rectangle vamos a usar el método “DeserializeRectangle”. A partir de ahora solo haré referencia al código referente al switch para evitar repetir líneas de código continuamente para mostrar los siguientes ejemplos. Ya que el resto de codigo sera el mismo.</span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">switch</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">(data.overlays[i].type)</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">{</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"marker"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializeMaker(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"polyline"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aaaaaa; font-family: "consolas"; font-size: 12px; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">//polyline</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"rectangle"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializeRectangle(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"circle"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aaaaaa; font-family: "consolas"; font-size: 12px; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">//circle</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"polygon"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aaaaaa; font-family: "consolas"; font-size: 12px; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">//polygon</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "ubuntu"; font-size: 13.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">function</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> DeserializeRectangle (object) {</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> bounds = object.bounds.split(</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">','</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> swLatLng = </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">new</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> google.maps.LatLng(bounds[</span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">0</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">],bounds[</span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">1</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> neLatLng = </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">new</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> google.maps.LatLng(bounds[</span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">2</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">],bounds[</span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">3</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> rectangleBounds = </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">new</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> google.maps.LatLngBounds(swLatLng,neLatLng);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> rectangle = </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">new</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> google.maps.Rectangle({</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">bounds: rectangleBounds,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">editable:object.editable</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">});</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">return</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> rectangle;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Nuestro método está recibiendo como parámetro el siguiente objeto : </span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #00aaaa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Object</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> {</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">bounds: </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"-31.615966,-43.813477,-27.80021,-38.803711"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">type: </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"rectangle"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">id: </span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">2</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">editable: </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">true</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">La propiedad “bounds” contiene las coordenadas Latlng en formato cadena necesarios para crear el objeto bounds que necesitamos para recrear nuestro overlay, usando el método split convertimos los datos a un arreglo y los usamos para crear los objetos Latlng. Recuerda que estos puntos vienen en el siguiente orden : "lat_lo, lng_lo, lat_hi ,lng_hi" después de haber usado “</span><a href="https://developers.google.com/maps/documentation/javascript/reference#LatLngBounds" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline;">toUrlValue</span></a><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">” para serializarlo.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Con estos puntos LatLngs creamos nuestro objeto “bounds”, el que es usado para crear nuestro overlay.</span></div>
<br />
<h2 dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: center;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;"> </span></h2>
<h2 dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;">Deserializar Polyline</span></h2>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Para el overlay Polyline usaremos el método “DeserializePolyline”</span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">switch</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">(data.overlays[i].type)</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">{</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"marker"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializeMaker(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"polyline"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializePolyline(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"rectangle"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializeRectangle(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"circle"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aaaaaa; font-family: "consolas"; font-size: 12px; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">//circle</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"polygon"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aaaaaa; font-family: "consolas"; font-size: 12px; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">//polygon</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Este método recibirá el siguiente objeto como parámetro : </span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #00aaaa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Object</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> {</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">path: </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"-39.605688,-49.042969,-39.707187,....."</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">type: </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"polyline"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">id: </span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">3</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">draggable: </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">true</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">La propiedad “path” contiene todos nuestros puntos separados por comas en formato cadena, por lo tanto debemos de crear a partir de ellos un objeto MVCArray par recrear nuestro path.</span></div>
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">El método encargado para de esta tarea será “DeserializeMvcArray” : </span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">function</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> DeserializeMvcArray(stringLatlng) {</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> arrayPoints = stringLatlng.split(</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">','</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> mvcArray = </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">new</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> google.maps.MVCArray();</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">for</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">(</span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> i= </span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">0</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">; i < arrayPoints.length; i+=</span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">2</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">)</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">{</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> latlng = </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">new</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> google.maps.LatLng(arrayPoints[i],arrayPoints[i+</span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">1</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">mvcArray.push(latlng);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">return</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> mvcArray;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Este método recibe el path en formato cadena, después creamos un arreglo a partir de esta cadena con el método split. Usando la clase </span><a href="https://developers.google.com/maps/documentation/javascript/reference#MVCArray" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline;">MVCArray</span></a><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> creamos un objeto, al cual dentro del ciclo FOR, agregamos cada punto Latlng creado, por medio del método </span><a href="http://www.w3schools.com/jsref/jsref_push.asp" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline;">push</span></a><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">. También nota que nuestro ciclo for itera cada 2 elementos en el arreglo, esto es debido a que el primer elemento es Lat y el siguiente Lng y así sucesivamente, al terminar el ciclo for regresará el objeto MVCArray Creado. Ahora solo nos resta incluir este método en “DeserializePolyline”.</span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">function</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> DeserializePolyline (object) {</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> mvcArray = DeserializeMvcArray(object.path);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> polyline = </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">new</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> google.maps.Polyline({</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">path: mvcArray,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">draggable:object.draggable,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">editable:</span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">true</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">});</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">return</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> polyline;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">En este método sólo nos resta pasar nuestro mvcArray creado a nuestro overlay para crear la polyline.</span></div>
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "trebuchet ms"; font-size: 17.333333333333332px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;"> </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "trebuchet ms"; font-size: 17.333333333333332px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;">Deserializar Polygon</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Para polygon utilizaremos de nuevo el método “DeserializeMvcArray”, debido a que el path del objeto serializado polygon también es una cadena con los valores separados por comas.</span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: white; color: #00aaaa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Object</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> {</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">path: </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"-36.421282,-50.581055,-37.822802...."</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">type: </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"polygon"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">id: </span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">5</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">draggable: </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">true</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Crearemos un método llamado “DeserializePolygon” :</span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">switch</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">(data.overlays[i].type)</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">{</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"marker"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializeMaker(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"polyline"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializePolyline(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"rectangle"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializeRectangle(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"circle"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aaaaaa; font-family: "consolas"; font-size: 12px; font-style: italic; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">//circle</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"polygon"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializePolygon(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">function</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> DeserializePolygon (object) {</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> mvcArray = DeserializeMvcArray(object.path);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> polygon = </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">new</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> google.maps.Polygon({</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">paths: mvcArray,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">draggable:object.draggable,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">editable:</span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">true</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">});</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">return</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> polygon;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span></div>
<br />
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Nuestro método recibe el objeto serializado y crea el MVCArray usando la propiedad path con el método “DeserializeMvcArray”, el que después pasamos como parámetro para crear nuestro overlay.</span></div>
<br />
<h2 dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;">Deserializar Circle</span></h2>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Para circle usaremos el método llamado “DeserializeCircle” y este es el objeto que recibirá este método :</span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: white; color: #00aaaa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Object</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> {</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">center: </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"-29.688053,-56.513672"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">radius: </span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">388514.2326</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">type: </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"circle"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">id: </span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">4</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">draggable: </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">true</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Y en nuestro switch </span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">switch</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">(data.overlays[i].type)</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">{</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"marker"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializeMaker(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"polyline"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializePolyline(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"rectangle"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializeRectangle(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"circle"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializeCircle(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"polygon"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializePolygon(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">function</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> DeserializeCircle (object) {</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> center = object.center.split(</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">','</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> centerLatLng = </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">new</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> google.maps.LatLng(center[</span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">0</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">],center[</span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">1</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> circle = </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">new</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> google.maps.Circle({</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">center: centerLatLng,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">radius: object.radius,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">draggable:object.draggable,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">editable:</span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">true</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">});</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">return</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> circle;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">La propiedad “center” es la que contiene nuestro punto Latlng en formato cadena, la cual convertimos a un objeto Latlng Google Maps la cual usamos en las opciones junto con “radius”.</span></div>
<br />
<h2 dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;">Actualizar Map</span></h2>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Hasta ahora hemos deserializado todos los tipos de overlays, pero todavía nos queda actualizar el mapa con el nivel de zoom , tipo de mapa y el lugar exacto donde estaba el usuario cuando los datos fueron guardados. Usaremos el método llamado “UpdateMap”.</span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">google.maps.event.addListenerOnce(map, </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">'idle'</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">, </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">function</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">() {</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> data = FakeAjax();</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">for</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> (</span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> i=</span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">0</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;i < data.overlays.length;i++)</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">{ </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> objectDeserialized;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">switch</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">(data.overlays[i].type)</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">{</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"marker"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializeMaker(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"polyline"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializePolyline(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"rectangle"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializeRectangle(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"circle"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializeCircle(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">case</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"polygon"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">:</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized = DeserializePolygon(data.overlays[i]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">break</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">;</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">objectDeserialized.setMap(map);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">UpdateMap(data.map);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">});</span><span style="background-color: transparent; color: black; font-family: "ubuntu"; font-size: 13.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">“UpdateMap” es llamado fuera del ciclo FOR debido a que los datos que necesitamos no se encuentran en un arreglo, sino en un objeto simple en la propiedad “map” con las siguientes propiedades:</span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: white; color: #00aaaa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Object</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> {</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">zoom: </span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">5</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">bounds: </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"-41.261381,-63.325123,-24.786843,-33.793873"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">mapType: </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"hybrid"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">,</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">type: </span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"map"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Y nuestro método es el siguiente:</span></div>
<br />
<div dir="ltr" style="line-height: 1.5999999999999999; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">function</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> UpdateMap (object){</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> bounds = object.bounds.split(</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">','</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> swLatLng = </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">new</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> google.maps.LatLng(bounds[</span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">0</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">],bounds[</span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">1</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> neLatLng = </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">new</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> google.maps.LatLng(bounds[</span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">2</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">],bounds[</span><span style="background-color: white; color: #009999; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">3</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">var</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> mapBounds = </span><span style="background-color: white; color: #0000aa; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">new</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> google.maps.LatLngBounds(swLatLng,neLatLng);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">map.fitBounds(mapBounds);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">map.setZoom(object.zoom);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">map.setMapTypeId(google.maps.MapTypeId[object.mapType.toUpperCase()]);</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br class="kix-line-break" /></span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">}</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Como lo hemos hecho anteriormente primero creamos nuestro objeto bounds a partir de la propiedad “bounds” en formato cadena, la cual asignamos con el método “fitBounds” del objeto “</span><a href="https://developers.google.com/maps/documentation/javascript/reference#Map" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline;">map</span></a><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">” , seguido asignamos el zoom y el tipo del mapa.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Al asignar el tipo de mapa estamos usando las </span><a href="https://developers.google.com/maps/documentation/javascript/reference#MapTypeId" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline;">constantes de mapa</span></a><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> de la API que comúnmente son de esta manera :</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">google.maps.MapType.HYBRID</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">google.maps.MapType.ROADMAP</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">google.maps.MapType.SATELLITE</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">google.maps.MapType.TERRAIN</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">En nuestro código es un tanto diferente ya que nos basamos en que los objetos en javascript son arreglos asociativos, por lo tanto en nuestra línea de código podemos acceder al valor por medio de su “keyname” y usando el método “</span><a href="http://www.w3schools.com/jsref/jsref_touppercase.asp" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline;">toUpperCase</span></a><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">” de javascript, nos aseguramos de que sean en letras mayúsculas. Normalmente esto podría hacerse por medio de un switch pero creo que de esta manera nos ahorramos unos lineas de código.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Hasta aquí ha sido todo en este capítulo si quieres ver el ejemplo completo puedes abrir el archivo de práctica en la carpeta número “30”. Adicional a este tambien deberias ver el archivo de ejemplo número “31” el cual contiene una versión modificada con algunos campos adicionales y evento click en la lista de la izquierda para ubicar el overlay.</span><br />
<br />
<br />
<h2 dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;">Usar GeoJson es una buena option </span></h2>
<br />
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Una buena option adicional a todo lo visto antes es usar el formato <a href="http://geojson.org/" target="_blank">GeoJson</a> , el cual te permite guardar geometrias en una estructura estandar. Recomiendo leer sobre como crear and trabjar con este tipo de objectos por que de esa manera puedes exportar tus datos a muchos lados y muchas base de datos ya soportan este formato.</span><br />
<br />
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Para darte una idea de como funciona visita este <a href="http://geojson.io/" target="_blank">editor online de GeoJson</a> y revisa como el objecto es armado. </span><br />
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br /></span>
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">En google tambien han escrito este <a href="http://googlegeodevelopers.blogspot.com/2015/04/interactive-data-layers-in-javascript.html" target="_blank">articulo sobre GeoJson</a> muy bueno sobre como usar este estandar dentro de google maps. </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
Una vez que entiendas como crear y manipular GeoJson recomiendo que estudies esta libreria <a href="http://turfjs.org/">http://turfjs.org/</a> , con ella podras hacer todo tipo de operaciones que pensabas que eran imposibles.<br />
<br />
<br />
<h1 dir="ltr" id="docs-internal-guid-c2688cff-662b-8ac6-5922-30e5fa2a4792" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 10pt; text-align: center;">
<span style="background-color: transparent; color: black; font-family: "trebuchet ms"; font-size: 21.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Ejemplos Adicionales </span></h1>
<h1 dir="ltr" id="docs-internal-guid-c2688cff-662b-8ac6-5922-30e5fa2a4792" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 10pt; text-align: center;">
<span style="background-color: transparent; color: black; font-family: "trebuchet ms"; font-size: 21.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span></h1>
<br />
<h2 dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;">Obtener puntos Latlng contenidos dentro de un bounds</span></h2>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Aunque este libro no cubre lenguajes del lado del servidor, considero que el siguiente caso es muy común entre el desarrollo de aplicaciones de mapas, por tal razón he decidido incluirlo. </span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Habrá algunas ocasiones donde solo queremos mostrar overlays o markers que solo se encuentran dentro del actual viewport del mapa. Para lograr esto solo tienes que obtener el </span><a href="https://developers.google.com/maps/documentation/javascript/reference#LatLngBounds" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline;">bounds</span></a><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> del mapa el cual contiene un método llamado :</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">bounds.</span><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;">contains</span><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">(latLng:LatLng) : El cual devuelve “true” si el Latlng que has pasado como parámetro se encuentra dentro de él.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Usando la API de Google Maps es realmente fácil saber esto, pero esto quiere decir que tienes que cargar todos los puntos Latlng antes en algun arreglo e iterar en cada uno. Lo conveniente seria que solo obtuvieras desde tu base de datos los puntos latlng que se encuentran dentro de este bounds.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Por ejemplo imagina que tienes un en tu base de datos una tabla llamada “markers” y esta tabla contiene 2 campos llamados “Latitude” y “longitud”, donde previamente han sido guardados estos valores para 1000 registros, en lugar de cargar estos mil registros de una sola vez en tu mapa , solo queremos obtener los que se encuentran dentro del bounds del mapa actual.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Para realizar esto tienes que enviar al servidor tu coordenadas del bounds actual del mapa, esto lo puedes hacer por medio del método :</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">bounds.</span><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;">toUrlValue</span><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">(precision?:number) : que devuelve una cadena con los puntos en el siguiente orden : "lat_lo,lng_lo,lat_hi,lng_hi" . </span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Una vez que obtengas estos datos del lado del servidor solo tienes que ejecutar la siguiente consulta SQL, que sólo devolverá los registros con los Latlng que se encuentran dentro de bounds indicado.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">SELECT * FROM markers</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">WHERE </span><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Latitude < "</span><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;">lat_hi</span><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">" AND</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Latitude > "</span><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;">lat_lo</span><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">" AND</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Longitude < "</span><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;">lng_hi</span><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">" AND</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Longitude > "</span><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;">lng_lo</span><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">";</span></div>
<br />
La consulta anterior solo funcionara con puntos en norteamerica, si quieres un consulta que funcione nivel mundial por favor visitar el siguiente link de stackoverflow<br />
<br />
<a href="http://stackoverflow.com/questions/4834772/get-all-records-from-mysql-database-that-are-within-google-maps-getbounds/20741219#20741219">http://stackoverflow.com/questions/4834772/get-all-records-from-mysql-database-that-are-within-google-maps-getbounds/20741219#20741219</a><br />
<br />
Hay muchas respuestas recomiendo que verifiques todas y descubras cual funciona para ti. (Yo probe la del usuario vladimir)<br />
<br />
<br />
<h2 dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;">Cálculo de áreas y distancias</span></h2>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Google Maps pone a nuestra disposición la librería “</span><a href="https://developers.google.com/maps/documentation/javascript/geometry?hl=es" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: underline; vertical-align: baseline;">Geometry Library</span></a><span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">” con la cual podremos realizar cálculos de datos geométricos sobre la superficie de la Tierra. Similar a otras librerías con las que hemos trabajado anteriormente, tenemos que incluirla en nuestro proyecto de la siguiente manera:</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: white; color: dodgerblue; font-family: "consolas"; font-size: 13.333333333333332px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;"><script </span><span style="background-color: white; color: dodgerblue; font-family: "consolas"; font-size: 13.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">type=</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 13.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"text/javascript"</span><span style="background-color: white; color: #333333; font-family: "consolas"; font-size: 13.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: white; color: dodgerblue; font-family: "consolas"; font-size: 13.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">src=</span><span style="background-color: white; color: #aa5500; font-family: "consolas"; font-size: 13.333333333333332px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">"http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"</span><span style="background-color: white; color: dodgerblue; font-family: "consolas"; font-size: 13.333333333333332px; font-style: normal; font-variant: normal; font-weight: 700; text-decoration: none; vertical-align: baseline;">></script></span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">El uso de los métodos de esta librería es tan sencillo como solamente llamar al método estático deseado para realizar la operación. He preparado 2 ejemplos de cómo usar esta librería para calcular áreas y distancias entre puntos en el mapa. Animo al lector a revisar el código para su comprender cómo funciona.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">En el ejemplo de práctica en la carpeta número “32”, puedes encontrar un ejemplo de cómo se calcula la distancia entre 2 puntos. Al mover los markers sobre el mapa podrás ver como en el panel izquierdo se actualiza la distancia entre estos puntos, la cual es devuelta en metros.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Y en el ejemplo de práctica en la carpeta número “33”, podras encontrar el código de ejemplo de como calcular el área de las overlays en Google Maps, las cuales son expresadas en metros cuadrados. Si dibujas una overlay, podrás ver como se actualiza el panel izquierdo con la información del área. Para las polyline se esta calculando la distancia total en metros.</span><br />
<h3>
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: small; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">EasyLocator</span></h3>
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br /></span>
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;">Hace un tiempo atras cree un jquery plugin que te permite crear un mapa con puntos en el mapa de manera rapida y sencilla, por favor hecha un vistado talvez te pueda ser muy util.</span><br />
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br /></span>
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><a href="https://github.com/SaulBurgos/easyLocator" target="_blank">Jquery plugin google maps EasyLocator</a></span><br />
<span style="background-color: transparent; color: black; font-family: "arial"; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
</div>
</div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
</div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
-------------------------------------------------------------------------------------<br />
<hr />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.paneek.net/" target="_blank"><img alt="http://www.paneek.net/" border="0" height="111" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZWyramNx_49pVlGMpPhvR_HcMEGsFjJEaWvA_d2YJBteZ2ujk55toqHfNhWLu7O0Gy-_0jYJOmF-cCyZr2vqTLGcC_hfVdD111eVaNBlBuU8Kx0b40Vl-hFDz3mYcKhbOgzRb5bq1_Y4/s400/Crea+tour+virutalesordinary.png" width="400" /></a></div>
<br />
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
</div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt; text-align: justify;">
<br /></div>
<br /></div>
<br /><!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<br />
<div id="mc_embed_signup">
<form action="//codingonweb.us10.list-manage.com/subscribe/post?u=3ee9f953357bd224bcd1ede57&id=f608ca4d35" class="validate" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Suscribete para recibir mis ultimas noticias</label>
<input class="email" id="mce-EMAIL" name="EMAIL" placeholder="email address" required="" type="email" value="" />
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<br />
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_3ee9f953357bd224bcd1ede57_f608ca4d35" tabindex="-1" type="text" value="" /></div>
<div class="clear">
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->saulBurgoshttp://www.blogger.com/profile/09149921177033969393noreply@blogger.com0