{"id":49,"date":"2010-08-07T00:36:56","date_gmt":"2010-08-07T05:36:56","guid":{"rendered":"http:\/\/blog.espol.edu.ec\/carlita\/?p=49"},"modified":"2010-09-29T20:29:14","modified_gmt":"2010-09-30T01:29:14","slug":"familiarizandose-con-google-maps","status":"publish","type":"post","link":"https:\/\/blog.espol.edu.ec\/carlita\/2010\/08\/07\/familiarizandose-con-google-maps\/","title":{"rendered":"Familiarizandose con Google Maps"},"content":{"rendered":"

Hola chicos,<\/p>\n

Bueno el d\u00eda de hoy estuve revisando\u00a0 un poquito sobre Google Maps para agregarlo en nuestra p\u00e1gina.<\/p>\n

Y con lo primero que me encontr\u00e9 es que existe una opci\u00f3n muy b\u00e1sica para agregarlo en nuestra p\u00e1gina web, y esta consiste en darle las caracter\u00edsticas que uno quiera para el mapa, buscar la ubicaci\u00f3n que queramos, entre otras y finalmente se copia el c\u00f3digo generado que nos da el google maps. Esto es similar a los objetos que agregabamos por ejemplo en el hi5, copiabamos el c\u00f3digo generado de..., por ejemplo, un video en youtube y la parte que dec\u00eda embed... la copiabamos en una secci\u00f3n de nuestra p\u00e1gina.<\/p>\n

Ah y para ello se ingresa a http:\/\/maps.google.com\/<\/strong> y en la pesta\u00f1a Mis mapas, da click y crea un nuevo mapa.<\/p>\n

Como ejemplo tengo:<\/p>\n

Pegar HTML para insertar en sitio web:<\/strong><\/span><\/p>\n

<iframe width=\"425\" height=\"350\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" src=\"http:\/\/maps.google.com\/maps\/ms?ie=UTF8&amp;hl=es&amp;msa=0&amp;msid=109533710362464428045.00048d33a151b95cca68c&amp;ll=-2.144923,-79.95472&amp;spn=0.120079,0.145912&amp;z=12&amp;iwloc=00048d33db5835b7e39f8&amp;output=embed\"><\/iframe><br \/><small>Ver <a href=\"http:\/\/maps.google.com\/maps\/ms?ie=UTF8&amp;hl=es&amp;msa=0&amp;msid=109533710362464428045.00048d33a151b95cca68c&amp;ll=-2.144923,-79.95472&amp;spn=0.120079,0.145912&amp;z=12&amp;iwloc=00048d33db5835b7e39f8&amp;source=embed\" style=\"color:#0000FF;text-align:left\">espol map<\/a> en un mapa m\u00e1s grande<\/small><\/span><\/p>\n

Donde se presenta un mapa mediano con un marcador en Espol,\u00a0 centrado en esta ubicaci\u00f3n.<\/span><\/p>\n

Luego estuve revisando en <\/span><\/p>\n

Google Maps JavaScript API V3<\/h1>\n

http:\/\/code.google.com\/intl\/es-AR\/apis\/maps\/documentation\/javascript\/tutorial.html<\/strong><\/p>\n

Donde muestran un peque\u00f1o ejemplo, el cual presenta un mapa centrado en Sydney, New South Wales, Australia,\u00a0 similar \ud83d\ude09 a lo que nos piden en la tarea, que como primer punto se requiere que presentemos en la P\u00e1gina inicial un mapa de Google Maps centrado en <\/span>Guayaquil, Ecuador (concretamente en ESPOL).<\/span><\/p>\n

1. Como primer paso, setea las caracter\u00edsticas del mapa:<\/strong>\r\n   Indicando su latitud y longitud: (<\/span>Para que quede centrado en Sydney)<\/span>\r\n\r\n   var<\/span> myLatlng <\/span>=<\/span> <\/span>new<\/span> google<\/span>.<\/span>maps<\/span>.<\/span>LatLng<\/span>(-<\/span>34.397<\/span>,<\/span> <\/span>150.644<\/span>);\r\n\r\n2.<\/strong><\/span> Lo crea con esas caracter\u00edsticas, y lo coloca en un div usando el API del DOM\r\n   Donde  map_canvas es el id de un div en nuestra p\u00e1gina web. <\/strong>\r\n   <body<\/span> <\/span>onload<\/span>=<\/span>\"<\/span>initialize<\/span>()<\/span>\"<\/span>><\/span>\r\n\u00a0 <\/span>    <div<\/span> <\/span>id<\/span>=<\/span>\"map_canvas\"<\/span> <\/span>style<\/span>=<\/span>\"<\/span>width<\/span>:<\/span>100<\/span>%;<\/span> height<\/span>:<\/span>100<\/span>%<\/span>\"<\/span>><\/div><\/span>\r\n<\/span>   <\/body><\/span>\r\n<\/span> <\/strong>\r\n   var<\/span> map <\/span>=<\/span> <\/span>new<\/span> google<\/span>.<\/span>maps<\/span>.<\/span>Map<\/span>(<\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>\"map_canvas\"<\/span>),<\/span>myOptions<\/span><\/strong>);<\/span>\r\n\r\n   Y donde myOptions es:\r\n   <\/span>\r\n   var<\/span> myOptions <\/span>=<\/span> <\/span>{<\/span>\r\n\u00a0 \u00a0 \u00a0 zoom<\/span>:<\/span> <\/span>8<\/span>,<\/span>\r\n\u00a0 \u00a0 \u00a0 center<\/span>:<\/span> latlng<\/span>,<\/span>\r\n\u00a0 \u00a0 \u00a0 mapTypeId<\/span>:<\/span> google<\/span>.<\/span>maps<\/span>.<\/span>MapTypeId<\/span>.<\/span>ROADMAP\r\n\u00a0 \u00a0 <\/span>};<\/span>\r\n\r\nOtra forma de hacerlo es primero creando el mapa, y luego con los m\u00e9todos set de map modificar sus atributos.\r\n<\/span><\/pre>\n
 <\/p>\n
Pegar HTML para insertar en sitio web:<\/span><\/p>\n
<iframe width=\"425\" height=\"350\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" src=\"http:\/\/maps.google.com\/maps\/ms?ie=UTF8&amp;hl=es&amp;msa=0&amp;msid=109533710362464428045.00048d33a151b95cca68c&amp;ll=-2.144923,-79.95472&amp;spn=0.120079,0.145912&amp;z=12&amp;iwloc=00048d33db5835b7e39f8&amp;output=embed\"><\/iframe><br \/><small>Ver <a href=\"http:\/\/maps.google.com\/maps\/ms?ie=UTF8&amp;hl=es&amp;msa=0&amp;msid=109533710362464428045.00048d33a151b95cca68c&amp;ll=-2.144923,-79.95472&amp;spn=0.120079,0.145912&amp;z=12&amp;iwloc=00048d33db5835b7e39f8&amp;source=embed\" style=\"color:#0000FF;text-align:left\">espol map<\/a> en un mapa m\u00e1s grande<\/small><\/span><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Hola chicos, Bueno el d\u00eda de hoy estuve revisando\u00a0 un poquito sobre Google Maps para agregarlo en nuestra p\u00e1gina. Y con lo primero que me encontr\u00e9 es que existe una opci\u00f3n muy b\u00e1sica para agregarlo en nuestra p\u00e1gina web, y esta consiste en darle las caracter\u00edsticas que uno quiera para el mapa, buscar la ubicaci\u00f3n […]<\/p>\n","protected":false},"author":3419,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22794],"tags":[],"class_list":["post-49","post","type-post","status-publish","format-standard","hentry","category-grupo-daw"],"_links":{"self":[{"href":"https:\/\/blog.espol.edu.ec\/carlita\/wp-json\/wp\/v2\/posts\/49","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.espol.edu.ec\/carlita\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.espol.edu.ec\/carlita\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/carlita\/wp-json\/wp\/v2\/users\/3419"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/carlita\/wp-json\/wp\/v2\/comments?post=49"}],"version-history":[{"count":4,"href":"https:\/\/blog.espol.edu.ec\/carlita\/wp-json\/wp\/v2\/posts\/49\/revisions"}],"predecessor-version":[{"id":51,"href":"https:\/\/blog.espol.edu.ec\/carlita\/wp-json\/wp\/v2\/posts\/49\/revisions\/51"}],"wp:attachment":[{"href":"https:\/\/blog.espol.edu.ec\/carlita\/wp-json\/wp\/v2\/media?parent=49"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/carlita\/wp-json\/wp\/v2\/categories?post=49"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/carlita\/wp-json\/wp\/v2\/tags?post=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}