aplicacion basica google maps

vani18 · #1 (**permalink**) 23/01/2013, 03:08

Hola todo estoy aprendiendo la app de google. Pregunto aca por q me escuche que es mas javascript q php...(la api de google es javascrpt)

Bueno se muy basicamente...mi idea es ubicar en un mapa los cajeros automaticos....
Escuche que no se puede buscar..lugares... Como en google maps... A lo sumo indicar puntos (teniendo latitud y log en una base de datos.. Se trae en xml) tengo que leerme todo...

1) eso de buscar es pago. Algo hicieron pago los de google... Entonces solo ubico puntos.
Algo para recomendar ...?

Uso la version 3... la 2 ya fue

DoHITB · #2 (**permalink**) 23/01/2013, 03:30

Buenas.

Primero (sin ánimo de ofender) te recomendaría que cuidaras un poco tu escritura... así todos podrán leer y entender mejor tus posts.

En segundo lugar, yo usé algo de la API de Maps, te comento un poco sobre los puntos:

Para ubicar puntos tienes que crear un archivo kml. Éste en realidad es xml, pero con otra extensión.

Dentro de este kml, puedes hacer, por ejemplo:

Código:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
 <Document>
  <Style id="0_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/0_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="1_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/1_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="2_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/2_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="3_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/3_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="4_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/4_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="5_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/5_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="6_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/6_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="7_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/7_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="8_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/8_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="9_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/9_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="10_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/10_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="11_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/11_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="12_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/12_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="13_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/13_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="14_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/14_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="15_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/15_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="16_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/16_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="17_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/17_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="18_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/18_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="19_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/19_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="20_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/20_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="21_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/21_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="22_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/22_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="23_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/23_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="24_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/24_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="25_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/25_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Style id="26_map">
   <IconStyle>
    <Icon>
     <href>http://www.paginaweb.com/img/map/26_map.png</href>
    </Icon>
   </IconStyle>
  </Style>
  <Placemark>
   <name>South Australia</name>
   <description>South Australia, Australia</description>
   <styleUrl>#0_map</styleUrl>
   <Point>
    <coordinates>135.0019989014,-32.0289001465</coordinates>
   </Point>
  </Placemark>
  <Placemark>
   <name>Bahrain</name>
   <description>Bahrain, Bahrain</description>
   <styleUrl>#0_map</styleUrl>
   <Point>
    <coordinates>50.6278915405,26.2704296112</coordinates>
   </Point>
  </Placemark>
  <Placemark>
   <name>Zlinsky Kraj</name>
   <description>Zlinsky Kraj, Czech Republic</description>
   <styleUrl>#0_map</styleUrl>
   <Point>
    <coordinates>17.6574707031,49.2218971252</coordinates>
   </Point>
  </Placemark>
  <Placemark>
   <name>Eritrea</name>
   <description>Eritrea, Eritrea</description>
   <styleUrl>#0_map</styleUrl>
   <Point>
    <coordinates>39.7823333740,15.1793842316</coordinates>
   </Point>
  </Placemark>
  <Placemark>
   <name>Komarom-Esztergom</name>
   <description>Komarom-Esztergom, Hungary</description>
   <styleUrl>#0_map</styleUrl>
   <Point>
    <coordinates>18.4058704376,47.5780487061</coordinates>
   </Point>
  </Placemark>
  <Placemark>
   <name>Prueba</name>
   <description><![CDATA[
											<span><img src="http://www.paginaweb.com/img/ico/1.png" style="width: 30px;height: 30px;"></span>
											<span>TEXTO DESCRIPTIVO</span>
											<div><a href="http://www.paginaweb.com/Prueba">View here</a></div>
										   ]]>
						     </description>
   <styleUrl>#1_map</styleUrl>
   <Point>
    <coordinates>50.6278915405,26.2704296112</coordinates>
   </Point>
  </Placemark>
 </Document>
</kml>

Este es un kml que genera mi web. Te explico:

Primero hago unos estilos propios (style). Allí le indico el icono custom que tendrá, y le doy un nombre (id).

Luego creo puntos (placemark). El name es lo que sale en grande, la description el texto pequeño, y el point tiene las coordenadas (ahí las tienes que buscar tú...)

Como ves en la descripción se puede poner HTML envuelto en <![CDATA[]]>. Esto se puede hacer para poner imágenes propias, descripciones con enlaces...

Espero esto te sirva.