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>
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....