Skocz do zawartości

Lokalizacja na mapie na własnej stronie

stefan_96

Przez stefan_96
w Dla początkujących

Rekomendowane odpowiedzi

stefan_96 Newbie

stefan_96

Opublikowano
Opublikowano

Witam wszystkich, chciałem dodać do swojej nowej stronki takie mapki jak jest tutaj np. w tym katalogu

https://www.iksnet.pl/ubranka-dla-niemowlat/, gdzie każdy użytkownik dodający swoją wizytówkę po wpisaniu adresu będzie miał przypisaną do wpisu taką własnie mapkę. Problem w tym że ciężko znaleźć jakiś konkretny opis jak to zrobić. Znalazłem coś takiego https://gmapsapi.com/poradnik/073_dodawanie_markerow_przez_uzytkownika.html?tag=*

trzeba tutaj uiścić opłatę, lecz nie jestem pewien czy faktyczni się czegoś nauczę, czy jest to warte tej ceny. Wiem że wiele osób na tym forum stosuje takie mapki, był bym wdzięczny gdybyście podali źródła wiedzy z których korzystaliście.

Być może istnieją inne prostsze sposoby, by taki efekt osiągnąć, chętnie też przestudiuje jakieś wasze przykłady kodu. Jestem zupełnie początkujący w jezykach php czy java script więc prosił bym o poradniki w języku polskim by sobie nie komplikować bardziej tematu.

Posiadam taki tam sklep dla niemowląt www.wyprawki-dzieciece.pl

Domy weselne. Znajdź idealne miejsce na imprezę okolicznościową

Odnośnik do komentarza
Udostępnij na innych stronach
Darwin Newbie

Darwin

Opublikowano
Opublikowano

Tak z treści postu nie jestem dokładnie pewny co chcesz osiągnąć. Czy chcesz osadzić na swojej stronie kilka mapek, czy chcesz umożliwić użytkownikom dodawanie wpisów, do których będą załączone mapki. W pierwszym przypadku nie ma żadnej potrzeby korzystania z API Google maps. Po prostu wchodzisz na https://maps.google.com/ wpisujesz adres, potem klikasz w symbol linku w zakładce po lewej i masz tam gotowy kod iframe do osadzenia na stronie.

Jeśli chcesz zrobić to dla użytkowników, którzy mają wpisywać adres i na podstawie tego będzie określana pozycja, to bez korzystania z API raczej się nie obejdzie. Zamiast korzystać z płatnych kursów proponuję skorzystać z oficjalnej dokumentacji https://developers.google.com/maps/documentation/javascript/tutorial

Jest co prawda tylko po angielsku, ale w miarę prosto napisana i jest sporo przykładów. Przede wszystkim zacznij od wyrobienia sobie klucza do API - instrukcja jest na stronie.

Z Google maps API można korzystać bezpośrednio lub za pośrednictwem wtyczek jQuery - dla początkującego chyba lepiej korzystać bezpośrednio.

Ogólnie dużo pisania byłoby jak to po kolei zrobić, ale jak będziesz miał jakieś konkretne pytania to pisz, postaram się wspomóc.

Odnośnik do komentarza
Udostępnij na innych stronach
stefan_96 Newbie

stefan_96

Opublikowano
  • Autor
Opublikowano

tak dokładnie, chcę umożliwić użytkownikom dodawanie wpisów, do których będą załączone mapki, tak jak w przykładzie. Mam cały formulasz dodawania wpisu i jest miejsce na dodanie adresu. Teraz chcę zrobić tak by przy dodawaniu wpisu dodawała się też ta geolokalizacja jak w przykładzie. gdybyś podrzucił przykładowy kod i napisał gdzie go dodać to był bym wdzięczny

Posiadam taki tam sklep dla niemowląt www.wyprawki-dzieciece.pl

Domy weselne. Znajdź idealne miejsce na imprezę okolicznościową

Odnośnik do komentarza
Udostępnij na innych stronach
Darwin Newbie

Darwin

Opublikowano
Opublikowano

Z całym kodem to będzie problem. Google maps wykorzystywałem w swojej pracy, ale to był projekt JEE i do tego dosyć zaawansowane zastosowanie, więc ciężko to przełożyć na prosty kawałek kodu. Ale zrobiłem bardzo prosty przykładowy plik HTML z jednym polem na adres i mapką, na której wyświetla się znacznik dla wpisanego adresu.

Kilka uwag:

- to jest rzecz jasna tylko strona klienta, która pokazuje jak działa GMaps, nie ma tu nic w kwestii PHP;

- przycisk wyślij jest "dla picu", lokalizowanie adresu jest wyzwalane przez zmianę wartości w polu tekstowym

- musisz wstawić swój klucz do API - bez tego nie będzie działać;

- to jest bardzo prosta wersja, trzeba to przerobić na adres w kilku polach, trzeba również zapamiętywać znacznik, jeśli chcesz, aby po zmianie adresu dało się usunąć stary znacznik - inaczej będą dwa.

- jeżeli chcesz zapisać lokalizację gdzieś w bazie to będziesz potrzebował dodatkowych ukrytych pól formularza na długość i szerokość geo.

- wykorzystuję tutaj dla ułatwienia jquery.

Ogólnie pełna obsługa może być dla początkującego trudnym zadaniem, trzeba będzie się mocno podszkolić z JavaScript.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
 html { height: 100% }
 body { height: 100%; margin: 0; padding: 0 }
</style>
<script type="text/javascript"
 src="https://maps.googleapis.com/maps/api/js?key=TUTAJ_WSTAW_KLUCZ_DO_API&sensor=false">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body onload="initialize()">
<form>
 <input type="text" id="adres"/>
 <input type="submit" value="Wyślij"/>
</form>
<div id="map_canvas" style="width:500px; height:500px"></div>
</body>
<script type="text/javascript">
 function initialize() {
 /*Mapa ustawiona na Polskę*/
 var mapOptions = {
	 center: new google.maps.LatLng(52.0, 19.0),
	 zoom: 6,
	 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById("map_canvas"),
	 mapOptions);

	 /*Zmiana w polu adresu wywoła tę funkcję*/
	 $('#adres').change(function() {

	 /*Pobieramy adres z pola*/
	 var adres = $(this).val();

	 /*Puste pole - koniec*/
	 if(!adres)
		 return;

	 /*To jest element Maps API do wyszukiwania lokalizacji*/
	 var geocoder = new google.maps.Geocoder();

	 /*Wysłanie zapytania o adres i odebranie odpowiedzi: lokalizacja i status*/
	 geocoder.geocode( { 'address': adres}, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {

		 /*Pobieramy lokalizację*/
		 var latlng = results[0].geometry.location;

		 /*Wstawiamy znacznik dla zwróconej pozycji na istniejącej mapie z adresem w tytule*/
		 var marker = new google.maps.Marker({
			 map: map,
			 position: latlng,
			 title: adres
		 });
		 /*Tu powinna być porządna obsługa błędów*/
 } else {
 if(status == google.maps.GeocoderStatus.ZERO_RESULTS)
	 alert('Nie znaleziono lokalizacji dla zadanego adresu.');
 else
	 alert('Lokalizacja nie powiodła się: ' + status);
 }
 });
 });
 }
</script>
<script type="text/javascript">
</script>
</html>

Odnośnik do komentarza
Udostępnij na innych stronach
stefan_96 Newbie

stefan_96

Opublikowano
  • Autor
Opublikowano

dostałem takie coś :

<body onload='mapaStart()' onunload='GUnload()'>

<script type='text/javascript'>

var geo;

var mapa;

function mapaStart()

{

if(GBrowserIsCompatible())

{

mapa = new GMap2(document.getElementById("mapka"),{mapTypes: [G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP]});

mapa.setCenter(new GLatLng(53.429805, 14.537883), 15);

mapa.addControl(new GLargeMapControl());

var typyMapy = mapa.getMapTypes();

typyMapy[0].getName= function() { return "Mapa";}

typyMapy[1].getName = function() { return "Satelita";}

typyMapy[2].getName = function() { return "Hybryda";}

mapa.addControl(new GMapTypeControl());

mapa.addControl(new GOverviewMapControl());

mapa.addControl(new GScaleControl());

geo = new GClientGeocoder();

var adres='<?php echo $adres;?>';

geo.getLatLng(adres,function(punkt)

{

if (!punkt)

{

alert(adres + " nie został znaleziony!");

}

else

{

mapa.setCenter(punkt, 15);

var ikona = new GIcon();

ikona.image='https://maps.google.com/mapfiles/kml/pal3/icon52.png';

ikona.shadow='';

ikona.iconSize=new GSize(32,32);

ikona.iconAnchor=new GPoint(16,16);

ikona.infoWindowAnchor=new GPoint(16,16);

var marker = new GMarker(punkt,{icon: ikona, title: adres});

mapa.addOverlay(marker);

marker.openInfoWindowHtml('<span style="color: #000;"><strong>Poszukiwany adres</strong><br />'+adres+'</span>');

}

});

}

}

-->

</script>

<div id='mapka' style='width: 500px; height: 300px; border: 1px solid black; background: gray; margin: auto;'>

</div>

teraz jak się odwołać do bazy, czy ten sposób jest dobry var adres='<?php echo $adres;?>';

No i druga prawa nie mam pojęcia jak znaleźć tą zmienną w bazie sql (w kodzie jest przykład). Można jakoś sprawdzić gdzie są zapisywane dane które wpisuje w pole adres na stronie ?

Posiadam taki tam sklep dla niemowląt www.wyprawki-dzieciece.pl

Domy weselne. Znajdź idealne miejsce na imprezę okolicznościową

Odnośnik do komentarza
Udostępnij na innych stronach
blackpress.pl Newbie

blackpress.pl

Opublikowano
Opublikowano

@stefan_96 - proponuję dział Zlecenia. Nie napisałeś nawet jakiego skryptu używasz do katalogu, więc raczej nikt nie będzie zgadywał jaką masz strukturę bazy danych. Dodanie tego nie potrwa 5min, więc raczej Ci tego nie zrobi za darmo.

BlackPress.pl - Automatyczna dodawarka do precli [Najtańsza na rynku - wystawiamy FV]

BlackPress.pl na forum PiO

Darmowa mieszarka synonimów

Odnośnik do komentarza
Udostępnij na innych stronach
blackpress.pl Newbie

blackpress.pl

Opublikowano
Opublikowano

Skoro tak uważasz...

Dodam tylko, że to nie jest tylko zaznaczenie punktu na mapie. Najpierw użytkownik musi zaznaczyć ten punkt, wtedy musisz przesłać go na serwer, zapisać w bazie danych. Podczas wyświetlania mapy musisz go poprać z bazy i przekazać na mapę.

Jeśli bez podstawowej wiedzy o programowaniu dasz sobie radę, to chyba warto żebyś zaczął interesować się właśnie programowaniem :)

BlackPress.pl - Automatyczna dodawarka do precli [Najtańsza na rynku - wystawiamy FV]

BlackPress.pl na forum PiO

Darmowa mieszarka synonimów

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności