GoldenLine
Zaloguj się

konto usunięte

Temat: Pomoc w stworzeniu API mapy

Witam
Trochę tutoriali już przerobiłem ale jest kilka rzeczy których niemoge pojąć.
W jaki sposób zrobić żeby każdy mógł zaznaczać na mapce swoje punkty, tak żeby potem inni je widzieli
Link do wypowiedziLink
Janusz Skudrzyk

Janusz Skudrzyk Członek zarządu,
weblabs.pl

Temat: Pomoc w stworzeniu API mapy



var marker ;



 google.maps.event.addListener(map, 'click', function(event) {

       add_marker(event.latLng, 'miejsce', 'opis' );

    });



 function updateMarkerPosition(latLng) {  /* $("#google_pos").val( [

    latLng.lat(),

    latLng.lng()

   ].join(', ')); */



    //// tutaj ajaxowe wywołanie z zapisem

  }





  function add_marker( pos, pos_title, pos_str ) {

   if( marker != null ) {

	 marker.setPosition( pos ) ;

	  updateMarkerPosition( pos ) ;

	}

	else {

    marker = new google.maps.Marker({

        position: pos,

        map: map,

        draggable: true,

        title: pos_title

    });

	 updateMarkerPosition( pos ) ;

    google.maps.event.addListener(marker, 'drag', function() {

      updateMarkerPosition(marker.getPosition());

    });

   }

  }


Najprościej będzie działać na jednym markerze na raz. Gdyby było więcej, to wyjdzie ciutkę bardziej skomplikowane. Tam gdzie dałem //// należy wstawić $.ajax lub co tam będzie używane jako silnik ajaxowych wywołań.

Przy pokazywaniu strony markery do pokazania zapisane jako JSON:


<textarea id="markery">json_encode( $markery )</textarea>





var markersArray = new Array() ;

var opened_iw  ;



 var markery = $("#markery").val() ;

    if( markery != '' ) {

        dane = jQuery.parseJSON( markery ) ;

		  wstaw_marker( dane ) ;    }



function add_marker2( pos, pos_title, pos_str, typ ) {

    

    var infowindow = new google.maps.InfoWindow( {

        

        content: pos_str

    }

    );

    

    var marker = new google.maps.Marker( {

        position: pos,

        map: map,

        title: pos_title

    }

    );

	 

    markersArray.push(marker);

    

    google.maps.event.addListener(marker, 'click', function() {

      if( opened_iw != null ) {

		  opened_iw.close() ;

		}

		  opened_iw = infowindow ;

        infowindow.open(map,marker);

    }

    );

}



function wstaw_marker( tab ) {

    $.each(tab, function() {

        add_marker2(  new google.maps.LatLng( $(this).attr('lat'), $(this).attr('long')), $(this).attr('nazwa'), $(this).attr('opis'), 'flaga' ) ;

			    }

    ) ;

	 

}


Markery do pokazania jak już wspominałem zapisane w json, w php jako tablica z elementami: lat, long, nazwa, opis, i ewentualnie flaga (jeżeli np. markery mają być różne - wtedy np. da się wstawić inną ikonkę)Janusz Skudrzyk edytował(a) ten post dnia 07.08.11 o godzinie 17:51
Link do wypowiedziLink

konto usunięte

Temat: Pomoc w stworzeniu API mapy

Dzięki za pomoc ale chodzi mi o coś bardziej w tym stylu

http://gmapsapi.com/przyklad/041/10.html

I tam gdzie u góry są te "przełączniki" włącz/wyłącz to żeby je wywalić i wrzucić coś podobnego w tym stylu tylko żeby poprzez takie kliknięcie nanosiło się punkt na mapę. Da coś takiego zrobić?

Tutaj poniżej zamieszczam cały skrypt z w/w linku

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Przykład</title>
<!--skrypty-->
<script src='http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAskA3kyDm631CGf6Rw_GrbBRBRXpdM9jp6G1MF9yLMfWuIYZt2BR5Ltrn1m4MP2hliyyWcC1AqLxZ3A' type='text/javascript'></script>
</head>
<body onload='mapaStart()' onunload='GUnload()'>
<script type='text/javascript'>
<!--
var mapa;
function zmienEtykiete(linkid,textid,wlaczony)
{
var link = document.getElementById(linkid);
var text = document.getElementById(textid);
if(!link || !text) return;
if(wlaczony===true)
{
link.innerHTML='wyłącz';
text.style.color='green';
}
else
{
link.innerHTML='włącz';
text.style.color='red';
}
}
function zmienKontrole(kontrola)
{
// kontrola - kontrolka, którą będziemy włączać, wyłączać
switch(kontrola)
{
case 'DoubleClickZoom':
if(mapa.doubleClickZoomEnabled())
{
if(mapa.continuousZoomEnabled())
zmienKontrole('ContinuousZoom');
zmienEtykiete(kontrola,'but1',false);
mapa.disableDoubleClickZoom();
// jeśli jest włączony Zoom płynny, to włączamy go
}
else
{
zmienEtykiete(kontrola,'but1',true);
mapa.enableDoubleClickZoom();
} break;
case 'ContinuousZoom':
if(mapa.continuousZoomEnabled())
{
zmienEtykiete(kontrola,'but2',false);
mapa.disableContinuousZoom();
}
else
{
// jeśli nie jest włączony Zoom przy podwójnym kliknięciu, to włączamy go
if(!mapa.doubleClickZoomEnabled())
zmienKontrole('DoubleClickZoom');
zmienEtykiete(kontrola,'but2',true); mapa.enableContinuousZoom();
}
break;
case 'ScrollWheelZoom':
if(mapa.scrollWheelZoomEnabled())
{ mapa.disableScrollWheelZoom();
zmienEtykiete(kontrola,'but3',false);
}
else
{ mapa.enableScrollWheelZoom();
zmienEtykiete(kontrola,'but3',true);
}
break;
}
}
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.41935400090768,14.58160400390625),10);
// dodanie pełnego zestawu kontrolek
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());
}
} -->
</script>
<h4>Zachowanie</h4>
<a href="#" onclick="zmienKontrole('DoubleClickZoom'); return false;" id="DoubleClickZoom">włącz<a/> <span style="color: red;" id="but1">zoom przy podwójnym kliknięciu myszą</span><br />
<a href="#" onclick="zmienKontrole('ContinuousZoom'); return false;" id="ContinuousZoom">włącz<a/> <span style="color: red;" id="but2">płynny zoom przy podwójnym kliknięciu myszą</span><br />
<a href="#" onclick="zmienKontrole('ScrollWheelZoom'); return false;" id="ScrollWheelZoom">włącz</a> <span style="color: red;" id="but3">zoom przy kręceniu kółkiem myszy</span>
<div id='mapka' style='width: 660px; height: 450px; border: 1px solid black; background: gray;'>
<!-- tu będzie mapa -->
</div>
</body>
</html>
<!--
Copyright (C) 2007-2011 Poznaj Google Maps API - http://gmapsapi.com
Informacje o prawach autorskich i dozwolonym sposobie wykorzystania kodu: http://gmapsapi.com/ostronie.html
-->
Link do wypowiedziLink
Janusz Skudrzyk

Janusz Skudrzyk Członek zarządu,
weblabs.pl

Temat: Pomoc w stworzeniu API mapy

Tak działa funkcja add_marker. Wstawia marker na mapę. Jak chcesz, żeby wstawiało marker pod podany adres pocztowy, to skopiuj sobie kod z przykładu użycia google.maps.Geocoder
Link do wypowiedziLink

konto usunięte

Temat: Pomoc w stworzeniu API mapy

W którym miejscu wstawić twój skrypt?
I którą wersję bardziej polecasz uzywać APIv2 czy v3 ?
Link do wypowiedziLink
Janusz Skudrzyk

Janusz Skudrzyk Członek zarządu,
weblabs.pl

Temat: Pomoc w stworzeniu API mapy

Części js w zewnętrznym pliku js. Textarea na stronie pokazującej mapę (już gotową), tylko odpowiednio zapisz wstawienie tych zakodowanych markerów. Kawałek z google.maps.event.addListener ma się znaleźć w funkcji startowej, jak już jest utworzony obiekt map.

Do 2 możesz nie znaleźć generatora kluczy, poza tym 3 jest bardziej logiczna.Janusz Skudrzyk edytował(a) ten post dnia 07.08.11 o godzinie 23:40
Link do wypowiedziLink

konto usunięte

Temat: Pomoc w stworzeniu API mapy

Sorka ale i tak ciężko mi to wszytko ogarnąć, jestem dopiero początkującym i ciężko mi tego HTML'a skumać.

Gdybyś mógł to bardzo bym cie prosił o podstawienie już do tego skryptu właściwego który bede modyfikował

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'      

    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>      

<html xmlns="http://www.w3.org/1999/xhtml">      

    <head>      

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      

		<style type="text/css" media="all">@import "/style/Przyklad.css";</style>

        <title>Przykład</title>      

        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>    

    </head>      

    <body onload="mapaStart()">      

		<script type="text/javascript">   

		<!-- 

			var mapa; // obiekt globalny

					function mapaStart()  

			{  

				var wspolrzedne = new google.maps.LatLng(53.41935400090768,14.58160400390625);

				var opcjeMapy = {

					zoom: 10,

					center: wspolrzedne,

					mapTypeId: google.maps.MapTypeId.SATELLITE,

					disableDefaultUI: true,

					mapTypeControl: true, // kontrolka trybu mapy

					scaleControl: true, // kontrolka skali

					navigationControl: true // kontrolka nawigacji

				};

				mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy); 					}  

		-->

		</script>   

		<div id="mapka" style="width: 700px; height: 500px; border: 1px solid black; background: gray;">   

		<!-- tu będzie mapa -->   

		</div>   

		<p id="info">

			Na mapę dodano wszystkie trzy kontrolki

		</p>

    </body>      

</html>   

<!--

Copyright (C) 2007-2011 Poznaj Google Maps API - www.gmapsapi.com

Informacje o prawach autorskich i dozwolonym sposobie wykorzystania kodu: http://gmapsapi.com/ostronie.html

-->
Link do wypowiedziLink
Janusz Skudrzyk

Janusz Skudrzyk Członek zarządu,
weblabs.pl

Temat: Pomoc w stworzeniu API mapy

Mateusz Mateuszowaty:
Sorka ale i tak ciężko mi to wszytko ogarnąć, jestem dopiero początkującym i ciężko mi tego HTML'a skumać.

Gdybyś mógł to bardzo bym cie prosił o podstawienie już do tego skryptu właściwego który bede modyfikował

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'  'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>      

 <html xmlns="http://www.w3.org/1999/xhtml">      

     <head>      

         <meta http-equiv="Content-Type" content="text/html;  charset=utf-8" />      

 <style type="text/css" media="all">@import "/style/Przyklad.css";</style>

         <title>Przykład</title>      

         <script src="http://maps.google.com/maps/api/js?sensor=false"  type="text/javascript"></script>    

     </head>      

     <body onload="mapaStart()">      

 		<script type="text/javascript">   

 		<!-- 

var marker ;



 var mapa; // obiekt globalny

 function mapaStart()  {  

   var wspolrzedne = new google.maps.LatLng(53.41935400090768,14.58160400390625);

 		var opcjeMapy = {

 			zoom: 10,

 			center: wspolrzedne,

			mapTypeId: google.maps.MapTypeId.SATELLITE,

 			disableDefaultUI: true,

 			mapTypeControl: true, // kontrolka trybu mapy

 			scaleControl: true, // kontrolka skali

 			navigationControl: true // kontrolka nawigacji

		};

  mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy); 				google.maps.event.addListener(mapa, 'click', function(event) {

       add_marker(event.latLng, 'miejsce', 'opis' );

    });

}





 function updateMarkerPosition(latLng) {  



    //// tutaj ajaxowe wywołanie z zapisem

  }





  function add_marker( pos, pos_title, pos_str ) {

   if( marker != null ) {

	 marker.setPosition( pos ) ;

	  updateMarkerPosition( pos ) ;

	}

	else {

    marker = new google.maps.Marker({

        position: pos,

        map: mapa,

        draggable: true,

        title: pos_title

    });

	 updateMarkerPosition( pos ) ;

    google.maps.event.addListener(marker, 'drag', function() {

      updateMarkerPosition(marker.getPosition());

    });

   }

  }  

 		-->

 		</script>   

 		<div id="mapka" style="width: 700px; height: 500px; border:  1px solid black; background: gray;">   

 		<!-- tu będzie mapa -->   

 		</div>   

 		<p id="info">

 			Na mapę dodano wszystkie trzy kontrolki

 		</p>

     </body>      

 </html>
Link do wypowiedziLink

konto usunięte

Temat: Pomoc w stworzeniu API mapy

Dziękuję bardzo
Tylko po wyłączeniu mapy punkt nie zostaje zapamiętywany.
Czy jest jeszcze możliwość poprzez bezpośrednie nanoszenie, dodanie opisu do danego punktu ?Mateusz Mateuszowaty edytował(a) ten post dnia 08.08.11 o godzinie 13:43
Link do wypowiedziLink
Janusz Skudrzyk

Janusz Skudrzyk Członek zarządu,
weblabs.pl

Temat: Pomoc w stworzeniu API mapy

Do zapamiętywania jest funkcja 


function updateMarkerPosition(latLng) {  



    //// tutaj ajaxowe wywołanie z zapisem

  }


Opis markera siedzi w pos_str, możesz przekazać tą zmienną do updateMarkerPosition i w ajaxie zapisać położenie oraz opis markera.
Link do wypowiedziLink

konto usunięte

Temat: Pomoc w stworzeniu API mapy

No właśnie a mi chodzi o stworzenie mapy do użytku wieloosobowego, aby każdy mógł postawić swój punkt z krótkim opisem (w dymku, po najechaniu na dany punkt) i aby punkty te były zapamiętywane.
Link do wypowiedziLink

konto usunięte

Temat: Pomoc w stworzeniu API mapy

Mateusz Mateuszowaty:
Sorka ale i tak ciężko mi to wszytko ogarnąć, jestem dopiero początkującym i ciężko mi tego HTML'a skumać.

Nie sądzę by na dłuższą metę ktoś chciał budować tę aplikację za Ciebie. Albo zleć wykonanie tego komuś albo się "zaprzyj" i zrób to sam. Forum to nie miejsce na tutoriale - te znajdują się gdzieś.. w Google. Nie odróżniasz jeszcze JS od HTML a to dowodzi, że ktoś (tu na forum) musiałby to napisać za Ciebie. Nie tędy droga.
Link do wypowiedziLink

konto usunięte

Temat: Pomoc w stworzeniu API mapy

Dobra panowie, trochę materiału przerobiłem, jednak mam problem z połączeniem mapy z mysql. Czy mam pokasować te wszystkie "$" ?

<?



$user="nazwa_użytkownika";  

$pass="hasło_użytkownika";  

$baza="baza_danych";  

  

mysql_connect ("localhost", $user, $pass) or   

    die ("Nie nawišzano połšczenie z bazš MySQL");  

mysql_select_db ($baza) or   

    die ("Nie nawišzano połšczenia z bazš serwisu.");  

      

mysql_query("SET NAMES 'UTF8';");  



$nazwa	= mysql_real_escape_string(strip_tags($_POST['nazwa']));

$opis	= mysql_real_escape_string(strip_tags($_POST['opis']));

$ikona	= mysql_real_escape_string(strip_tags($_POST['ikona']));

$lat	= $_POST['lat'];

$lng	= $_POST['lng'];

$ip 	= $_SERVER['REMOTE_ADDR'];



if($nazwa && $opis && $ikona && $lat && $lng)

{

	$query = sprintf('INSERT INTO PoznajGoogleMaps_073 (id,nazwa,opis,ikona,lat,lng,data,ip) VALUES ("","%s","%s","%s",%f,%f,now(),"%s")',$nazwa,$opis,$ikona,$lat,$lng,$ip);

	mysql_query($query);

	header("Location: http://gmapsapi.com/przyklad/073/03.html?dodano=1");

}

else

{

	header("Location: http://gmapsapi.com/przyklad/073/03.html?dodano=0");

}

?>
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Google API




Wyślij zaproszenie do
Anuluj