google maps y puntos mysql

MarbaWeb · 21 Sep 2015

Buenas a todos
lo primero gracias de antemano

Quiero empezar un proyecto y hacer en html o php un mapa de google maps en la que aparezcan los puntos que yo añada en una base de datos. Es decir que la base de datos tenga longitud, latitud, nombre, descripcion, etc.
Que aparezca en el mapa todos esos puntos y cuando le de aparezca toda la informacion y sobre todo el boton de ir alli, para que se me abra una nueva pesataña de google maps para ir desde mi ubicacion hasta ese lugar.
Tambien que cuando vaya a esa pagina con el mapa me geolocalize, eso no se si se puede via web.

gracias

hasdpk · 5 Oct 2015

¿Tienes nociones de programación? ¿Alguna vez has trabajado con alguna API? Si tu respuesta es no, entonces es mejor que te busques un objetivo más banal.

MarbaWeb · 7 Oct 2015

mi respuesta es no
pongo aqui unos codigos que he conseguido y es muy parecido de lo que quiero hacer pero tendria que juntar los codigos

codigo 1: radius search
lo que hace es que te hace como una lupa en el mapa y te va poniendo y marcando los sitios en un radio de x metros que tu pones pero que vas pasando por ahi la lupa, cosa que no quiero si no que sea desde donde te geolocaliza y sin llevar el raton a ningun sitio
este es el codigo y la fuente

https://www.mapbox.com/mapbox.js/example/v1.0.0/marker-radius-search/

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Marker radius search</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<div id='map'></div>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiY29ucXVpc3QiLCJhIjoiY2lmMmN4azV1MDBpNnN2bHY5cWJzcnVjYSJ9.bDVUMafmHce73ZF4Oc4fAw';
var map = L.mapbox.map('map', 'mapbox.emerald')
.setView([40, -95], 4);

var RADIUS = 500000;
var filterCircle = L.circle(L.latLng(40, -75), RADIUS, {
opacity: 1,
weight: 1,
fillOpacity: 0.4
}).addTo(map);

var csvLayer = omnivore.csv('/mapbox.js/assets/data/airports.csv', null, L.mapbox.featureLayer())
.addTo(map);

map.on('mousemove', function(e) {
filterCircle.setLatLng(e.latlng);
csvLayer.setFilter(function showAirport(feature) {
return e.latlng.distanceTo(L.latLng(
feature.geometry.coordinates[1],
feature.geometry.coordinates[0])) < RADIUS;
});
});
</script>

</body>
</html>

y luego este es el que te geolocaliza mediante un boton de find me, si se pudiera quitar el boton mejor pero bueno es lo de menos, entonces seria poner este codigo de geolocalizacion con el otro, es decir que desde donde te geolocaliza te aparezcan todos los lugares a x metros de radio del ejemplo 1, pero sin ese circulo que aparece y que no tengas que ir de lado a lado con el raton arrastrando

https://www.mapbox.com/mapbox.js/example/v1.0.0/geolocation/

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Geolocation</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<style>
.ui-button {
background:#3887BE;
color:#FFF;
display:block;
position:absolute;
top:50%;left:50%;
width:160px;
margin:-20px 0 0 -80px;
z-index:100;
text-align:center;
padding:10px;
border:1px solid rgba(0,0,0,0.4);
border-radius:3px;
}
.ui-button:hover {
background:#3074a4;
color:#fff;
}
</style>

<div id='map'></div>
<a href='#' id='geolocate' class='ui-button'>Find me</a>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiY29ucXVpc3QiLCJhIjoiY2lmMmN4azV1MDBpNnN2bHY5cWJzcnVjYSJ9.bDVUMafmHce73ZF4Oc4fAw';
var geolocate = document.getElementById('geolocate');
var map = L.mapbox.map('map', 'mapbox.streets');

var myLayer = L.mapbox.featureLayer().addTo(map);

// This uses the HTML5 geolocation API, which is available on
// most mobile browsers and modern browsers, but not in Internet Explorer
//
// See this chart of compatibility for details:
// Can I use... Support tables for HTML5, CSS3, etc
if (!navigator.geolocation) {
geolocate.innerHTML = 'Geolocation is not available';
} else {
geolocate.onclick = function (e) {
e.preventDefault();
e.stopPropagation();
map.locate();
};
}

// Once we've got a position, zoom and center the map
// on it, and add a single marker.
map.on('locationfound', function(e) {
map.fitBounds(e.bounds);

myLayer.setGeoJSON({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [e.latlng.lng, e.latlng.lat]
},
properties: {
'title': 'Here I am!',
'marker-color': '#ff8888',
'marker-symbol': 'star'
}
});

// And hide the geolocation button
geolocate.parentNode.removeChild(geolocate);
});

// If the user chooses not to allow their location
// to be shared, display an error message.
map.on('locationerror', function() {
geolocate.innerHTML = 'Position could not be found';
});
</script>

</body>
</html>

hasdpk dijo:
¿Tienes nociones de programación? ¿Alguna vez has trabajado con alguna API? Si tu respuesta es no, entonces es mejor que te busques un objetivo más banal.

CPA · 18 Oct 2015

MarbaWeb dijo:
Buenas a todos
lo primero gracias de antemano

Quiero empezar un proyecto y hacer en html o php un mapa de google maps en la que aparezcan los puntos que yo añada en una base de datos. Es decir que la base de datos tenga longitud, latitud, nombre, descripcion, etc.
Que aparezca en el mapa todos esos puntos y cuando le de aparezca toda la informacion y sobre todo el boton de ir alli, para que se me abra una nueva pesataña de google maps para ir desde mi ubicacion hasta ese lugar.
Tambien que cuando vaya a esa pagina con el mapa me geolocalize, eso no se si se puede via web.

gracias

Necesitas guardar lo puntos que quieres en la base de datos longitud y latitud, también los datos que dices mostrar.

Saber utilizar la API de MAPS, y si sabes es fácil,solo tienes que meter los parámetros de longitud, latitud, titulo del punto, imagen del punto, y HTML si querés mostrar un cuadro personalizado.

La api te da un limite de consultas gratis, perfecto para un proyecto pequeño, pero para proyectos en expansión tienes que pagar 1 cuota desde 1 millón de consultas, si no mal recuerdo.

MarbaWeb · 18 Oct 2015

Ok gracias x la respuesta

CPA dijo:
Necesitas guardar lo puntos que quieres en la base de datos longitud y latitud, también los datos que dices mostrar.

Saber utilizar la API de MAPS, y si sabes es fácil,solo tienes que meter los parámetros de longitud, latitud, titulo del punto, imagen del punto, y HTML si querés mostrar un cuadro personalizado.

La api te da un limite de consultas gratis, perfecto para un proyecto pequeño, pero para proyectos en expansión tienes que pagar 1 cuota desde 1 millón de consultas, si no mal recuerdo.

google maps y puntos mysql

MarbaWeb

hasdpk

MarbaWeb

CPA

MarbaWeb

Comparte esta página