| Promebla con geolocalización y marcadores
Hola, espero alguien me pueda ayudar...
Estoy haciendo un mapa personalizado con google maps, en el cual tengo unos marcadores y sus respecativas descripciones, el problema es que quisiera agregarle un marcador extra con la posición actual en la que se encuentra el usuario, por separado tengo los mapas, pero a la hora de unirlos no se como... aqui pongo el codigo de uno y de otro... Código HTML: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var infowindow = null;
$(document).ready(function () { initialize(); });
function initialize()
{
var centerMap = new google.maps.LatLng(21.874929159071485, -102.30684399604797);
var opciones=
{
zoom: 16,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), opciones);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow
(
{
content: "loading..."
}
);
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
}
var sites = [
['Plaza de Toros Monumental', 21.87492484464159, -102.30682253837585, 5, 'Plaza de Toros Monumental', 'map_icon/monumental.png'],
['Plaza de Toros', 21.880793330568856, -102.30246663093567, 1, 'Plaza de Toros', 'map_icon/toros.png'],
['Expoplaza', 21.8755, -102.30558335781097, 4, 'C.C. Expoplaza', 'map_icon/expo.png'],
['Palenque de la Feria', 21.87846428439255, -102.30343222618103, 3, 'Palenque de la Feria', 'map_icon/palenque.png'],
['Jardin de San Marcos', 21.879579363960964, -102.30324983596802, 2, 'Jarin de San Marcos', 'map_icon/jardin.png'],
['Templo de San Marcos', 21.879235880558397, -102.30456948280334, 2, 'Templo de San Marcos', 'map_icon/templo.png'],
['Isla San Marcos', 21.859505934877273, -102.3235, 3, 'Isla San Marcos', 'map_icon/isla.png'],
['Casa Teran', 21.883162742569734, -102.29652419686317, 3, 'Casa Teran', 'map_icon/teran.png'],
['Casa de la Cultura', 21.8806, -102.298, 3, 'Casa de la Cultura', 'map_icon/cultura.png'],
['Megavelaria', 21.873185459126933, -102.30743408203125, 6, 'Megavelaria', 'map_icon/megavelaria.png'],
['Teatro Victor Sandoval', 21.87688623278924, -102.30314254760742, 3, 'Teatro Victor Sanoval', 'map_icon/victor.png'],
['Pabellon Japon', 21.87587069508345, -102.3043817281723, 2, 'Pabellon Japon', 'map_icon/japon.png'],
['Zoologico', 21.86205567770974, -102.32280850410461, 1, 'Zoologico', 'map_icon/zoologico.png'],
['Casino de la Feria', 21.878706051634992, -102.30390161275864, 2, 'Casino de la Feria', 'map_icon/casino.png'],
['Lago San Marcos', 21.861914284705495, -102.32110261917114, 1, 'Lago San Marcos', 'map_icon/lago.png'],
['Antros', 21.876049908144935, -102.30239152908325, 3, 'Zona de Antros', 'map_icon/antros.png'],
['Teatro del Pueblo', 21.872191135694703, -102.30794906616211, 3, 'Teatro del Pueblo', 'map_icon/teatro.png'],
['Juegos Mecanicos', 21.8715539154468, -102.31281995773315, 3, 'Juegos Mecanicos', 'map_icon/juegos.png'],
['Montana Rusa', 21.859565679437623, -102.31975078582764, 2, 'Montana Rusa', 'map_icon/montana.png'],
['Cine para Todos', 21.860621162549652, -102.3209524154663, 1, 'Cine para Todos', 'map_icon/cine.png'],
['Teatro Aguascalientes', 21.85712957470745, -102.29143738746643, 1, 'Teatro Aguascalientes', 'map_icon/t_ags.png'],
['Expo Ganadera', 21.85968516848336, -102.32155323028564, 2, 'Cine para Todos', 'map_icon/ganadera.png']
];
function setMarkers(map, markers)
{
for (var i = 0; i < markers.length; i++)
{
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var imgIcon = new google.maps.MarkerImage(sites[5],
new google.maps.Size(66,53),
new google.maps.Point(0,0),
new google.maps.Point(33,50)
);
var marker = new google.maps.Marker
(
{
position: siteLatLng,
map: map,
icon: imgIcon,
title: sites[0],
zIndex: sites[3],
html: sites[4]
}
);
var contentString = "Some content";
google.maps.event.addListener(marker, "click", function ()
{
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
google.maps.event.addDomListener(window, 'load', init);
</script> y el de geolocalización es este... Código HTML: <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=true"></script>
<script type="text/javascript">
var infowindow = null;
$(document).ready(function () { initialize(); });
var mapa;
function inicializar() {
var opciones = {
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
mapa = new google.maps.Map(document.getElementById('map'), opciones);
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(mostrarLocalizacion,manejadorDeError);
}
else{
alert("Su navegador no soporta Geolocalizacion");
}
}
function mostrarLocalizacion(posicion)
{
var pos = new google.maps.LatLng(posicion.coords.latitude,posicion.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: mapa,
position: pos,
content: 'Tu ubicacion usando HTML5.'
});
mapa.setCenter(pos);
}
function manejadorDeError(error) {
switch(error.code)
{
case error.PERMISSION_DENIED: alert("El usuario no permite compartir datos de geolocalizacion");
break;
case error.POSITION_UNAVAILABLE: alert("Imposible detectar la posicio actual");
break;
case error.TIMEOUT: alert("La posicion debe recuperar el tiempo de espera");
break;
default: alert("Error desconocido");
break;
}
var opciones = {
map: mapa,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(opciones);
mapa.setCenter(opciones.position);
}
google.maps.event.addDomListener(window, 'load', inicializar);
</script>
Espero alguien me pueda ayudar....  |