Marcadores en google maps

andreslrz · 16 Mayo 2015, 14:58 PM

Hola.

Necesito poner en un mapa de google maps una serie de marcadores sin utilizar coordenadas, sino el numero de domicilio ( o dirección como le digan en su país). Es la primer ves tulizando este api por lo que no entiendo mucho, ya comprendi lo basico, de trazar rutas, poner marcadores, modificarlos, pero no he podido poner varios marcadores con la direccion o domicilio.

Tengo este ejemplo que encontré, ya probé y funciona: http://jafrancov.com/2011/06/geocode-gmaps-api-v3/

De antemano agradezco cualquier ayuda.

EFEX · 17 Mayo 2015, 00:54 AM

Presta atencion a los comentarios del codigo..

Código (javascript) [Seleccionar]


...
// Si hay resultados encontrados, centramos y repintamos el mapa
// esto para eliminar cualquier pin antes puesto
var mapOptions = {
	center: results[0].geometry.location,
	mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($("#map_canvas").get(0), mapOptions);
...

Solo tenes que comentarlo.. quedara algo asi..

Código (javascript) [Seleccionar]


<!DOCTYPE HTML>
<html>

<head>
	<meta charset="UTF-8" />
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			load_map();

			$('#search').on('click', function(){
				// Obtenemos la dirección y la asignamos a una variable
				var address = $('#address').val();
				// Creamos el Objeto Geocoder
				var geocoder = new google.maps.Geocoder();
				// Hacemos la petición indicando la dirección e invocamos la función
				// geocodeResult enviando todo el resultado obtenido
				geocoder.geocode({
					'address': address
				}, geocodeResult);
			});

		});

		var map;

		function load_map() {
			var myLatlng = new google.maps.LatLng(20.68009, -101.35403);
			var myOptions = {
				zoom: 4,
				center: myLatlng,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			map = new google.maps.Map($("#map_canvas").get(0), myOptions);
		}

		function geocodeResult(results, status) {
			// Verificamos el estatus
			if (status == 'OK') {
				// Si hay resultados encontrados, centramos y repintamos el mapa
				// esto para eliminar cualquier pin antes puesto
				/*var mapOptions = {
					center: results[0].geometry.location,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				*/
				//map = new google.maps.Map($("#map_canvas").get(0), mapOptions);
				// fitBounds acercará el mapa con el zoom adecuado de acuerdo a lo buscado
				map.fitBounds(results[0].geometry.viewport);
				// Dibujamos un marcador con la ubicación del primer resultado obtenido
				var markerOptions = {
					position: results[0].geometry.location
				}
				var marker = new google.maps.Marker(markerOptions);
				marker.setMap(map);
			} else {
				// En caso de no haber resultados o que haya ocurrido un error
				// lanzamos un mensaje con el error
				alert("Geocoding no tuvo éxito debido a: " + status);
			}
		}
	</script>
</head>

<body>
	<h1>Testing Google Maps</h1>
	<div>
		<input type="text" maxlength="100" id="address" placeholder="Dirección" />
		<input type="button" id="search" value="Buscar" />
	</div>
	<br/>
	<div id='map_canvas' style="width:600px; height:400px;"></div>
</body>

</html>

Test Foro de elhacker.net SMF 2.1

Marcadores en google maps

andreslrz

EFEX