Integracja Google API

  • 4 Odpowiedzi
  • 3353 Wyświetleń

0 użytkowników i 1 Gość przegląda ten wątek.

*

Offline Dekker

  • ***
  • 37
  • 1
  • Wersja SMF: 2.0.3
Integracja Google API
« dnia: 19 Luty 2013, 16:29 »
Cześć,
Chciałbym połączyć moje forum z google maps. Chodzi mi dokładniej o to że użytkownik wchodzi na forum www.mojeforum.pl/mapa.php i tam wyświetla mu się mapa na której może dodać własne miejsca.


Kod pod Google API wygląda następująco:


<!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" dir="ltr" lang="pl-PL">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mapa polski</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function mapa_google() { // SKRYPT START
// Określamy główna lokalizację na mapie świata
    var myLatlng = new google.maps.LatLng(51.919438, 19.145136); // Polska (51.919438, 19.145136)
    var myOptions = {
      zoom: 6, // Określamy zoom (przybliżenie)
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP // Określamy typ mapy (ROADMAP - MAPA DROGOWA)
    }
    var map = new google.maps.Map(document.getElementById("GoogleMap"), myOptions); // Przypisujemy mapę do konkretnego elementu
<?php
//Konfiguracja połączenia z bazą MySQL
$baza_host=(""); // Host, zazwyczaj "localhost"
$baza_login=(""); // Login do bazy
$baza_haslo=(""); // Hasło do bazy
$baza_nazwa=(""); // Nazwa bazy
?>

<?php
// Łączymy się z bazą MySQL
$polaczenie mysql_connect($baza_host$baza_login$baza_haslo);
$db mysql_select_db($baza_nazwa);
$login $_SESSION['login'];
$query "SELECT * FROM `googlemap` LIMIT 30";
$result mysql_query($query);
// PĘTLA START
while ($row mysql_fetch_array($result)) {
$id $row['id'];
$nazwa $row['nazwa'];
$lat $row['lat'];
$long $row['long'];
$opis $row['opis'];
?>

// MARKER START
var a_<?php echo $id?> = '<p><span class="title"><?php echo $nazwa?></span>,<br /><?php echo $opis?></p>';
var info_a_<?php echo $id?> = new google.maps.InfoWindow ({
content: a_<?php echo $id?>
});
var image = 'img/flag.png';
var myLatLng = new google.maps.LatLng(<?php echo $lat?>, <?php echo $long?>);
var marker_a_<?php echo $id?> = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
google.maps.event.addListener(marker_a_<?php echo $id?>, 'click', function() {
info_a_<?php echo $id?>.open(map,marker_a_<?php echo $id?>);
});

<?php 
// PĘTLA KONIEC
?>

} // SKRYPT KONIEC
</script>
</head>
<!-- Wczytujemy mapę... -->
<body onload="mapa_google()">
<!-- ...i ładujemy ją do tego diva -->
<div id="GoogleMap"><>
<?php
//Odbieranie danych metodą post
$nazwa $_POST['nazwa'];
$lat $_POST['lat'];
$long $_POST['long'];
$opis $_POST['opis'];
// Jeżeli zmienne są puste (nie wypełniono pól wymaganych) to błąd = 1 
if ($nazwa == '' or $lat == '' or $long == '') {
$blad++;
    }
if(isset($_POST['submit']) and $blad == 0) { // Jeżeli nie ma błędów
// Dodajemy rekord do bazy MySQL
$dodaj "INSERT INTO `googlemap` SET `nazwa`='$nazwa', `lat`='$lat', `long`='$long', `opis`='$opis'";
mysql_query($dodaj) or die(mysql_error());
mysql_close($polaczenie);
// Pomyślny komunikat jeżeli nie było błędów
echo '<span class="dodano">Dodano nowy punkt, odswież stronę!</span>';
}
// Komunikat o błędzie jeżeli w formularzu są błędy
if(isset($_POST['submit']) and $blad == 1) {
echo '<span class="blad">Błąd - wypełnij pola oznaczone gwiazdką *</span>';
}
?>

<div id="formularz">
<form action="index.php" method="post">
<p>
<div class="label"><label for="nazwa">Nazwa miasta / miejsca <span class="req">*</span></label><>
<input type="text" name="nazwa" />
</p>
<p>
<div class="label"><label for="lat">Latitude (szerokość geograficzna) <span class="req">*</span></label><>
<input type="text" name="lat" />
</p>
<p>
<div class="label"><label for="long">Longtude (długość geograficzna) <span class="req">*</span></label><>
<input type="text" name="long" />
</p>
<p>
<div class="label"><label for="opis">Opis</label><>
<textarea name="opis"></textarea>
</p>
<p>
<input class="submit" type="submit" name="submit" value="Dodaj nowy punkt" />
</p>
</form>
<>
</body>
</html>


A kod na nową podstronę w SMF 2.0 wygląda tak:


<?php 
require("SSI.php");
template_header();

echo
'Treść strony';

template_footer();
?>




Jak to połączyć w jedną całość?

*

Offline Dekker

  • ***
  • 37
  • 1
  • Wersja SMF: 2.0.3
Odp: Integracja Google API
« Odpowiedź #1 dnia: 20 Luty 2013, 11:10 »
Byłby w stanie ktoś mi z tym pomóc??

*

Offline Adrian

  • *****
  • 5532
  • 723
  • Płeć: Mężczyzna
  • Smile, tomorrow will be worse...
    • Adrek.pl
Odp: Integracja Google API
« Odpowiedź #2 dnia: 20 Luty 2013, 11:48 »
Spróbuj tego..
<?php require("SSI.php"); ?>
<!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" dir="ltr" lang="pl-PL">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mapa polski</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function mapa_google() { // SKRYPT START
// Określamy główna lokalizację na mapie świata
    var myLatlng = new google.maps.LatLng(51.919438, 19.145136); // Polska (51.919438, 19.145136)
    var myOptions = {
      zoom: 6, // Określamy zoom (przybliżenie)
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP // Określamy typ mapy (ROADMAP - MAPA DROGOWA)
    }
    var map = new google.maps.Map(document.getElementById("GoogleMap"), myOptions); // Przypisujemy mapę do konkretnego elementu
<?php
//Konfiguracja połączenia z bazą MySQL
$baza_host=(""); // Host, zazwyczaj "localhost"
$baza_login=(""); // Login do bazy
$baza_haslo=(""); // Hasło do bazy
$baza_nazwa=(""); // Nazwa bazy
?>

<?php
// Łączymy się z bazą MySQL
$polaczenie mysql_connect($baza_host$baza_login$baza_haslo);
$db mysql_select_db($baza_nazwa);
$login $_SESSION['login'];
$query "SELECT * FROM `googlemap` LIMIT 30";
$result mysql_query($query);
// PĘTLA START
while ($row mysql_fetch_array($result)) {
$id $row['id'];
$nazwa $row['nazwa'];
$lat $row['lat'];
$long $row['long'];
$opis $row['opis'];
?>

// MARKER START
var a_<?php echo $id?> = '<p><span class="title"><?php echo $nazwa?></span>,<br /><?php echo $opis?></p>';
var info_a_<?php echo $id?> = new google.maps.InfoWindow ({
content: a_<?php echo $id?>
});
var image = 'img/flag.png';
var myLatLng = new google.maps.LatLng(<?php echo $lat?>, <?php echo $long?>);
var marker_a_<?php echo $id?> = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
google.maps.event.addListener(marker_a_<?php echo $id?>, 'click', function() {
info_a_<?php echo $id?>.open(map,marker_a_<?php echo $id?>);
});

<?php 
// PĘTLA KONIEC
?>

} // SKRYPT KONIEC
</script>
</head>
<!-- Wczytujemy mapę... -->
<body onload="mapa_google()">
<?php template_header(); ?>
<!-- ...i ładujemy ją do tego diva -->
<div id="GoogleMap"></div>
<?php
//Odbieranie danych metodą post
$nazwa $_POST['nazwa'];
$lat $_POST['lat'];
$long $_POST['long'];
$opis $_POST['opis'];
// Jeżeli zmienne są puste (nie wypełniono pól wymaganych) to błąd = 1 
if ($nazwa == '' or $lat == '' or $long == '') {
$blad++;
    }
if(isset($_POST['submit']) and $blad == 0) { // Jeżeli nie ma błędów
// Dodajemy rekord do bazy MySQL
$dodaj "INSERT INTO `googlemap` SET `nazwa`='$nazwa', `lat`='$lat', `long`='$long', `opis`='$opis'";
mysql_query($dodaj) or die(mysql_error());
mysql_close($polaczenie);
// Pomyślny komunikat jeżeli nie było błędów
echo '<span class="dodano">Dodano nowy punkt, odswież stronę!</span>';
}
// Komunikat o błędzie jeżeli w formularzu są błędy
if(isset($_POST['submit']) and $blad == 1) {
echo '<span class="blad">Błąd - wypełnij pola oznaczone gwiazdką *</span>';
}
?>

<div id="formularz">
<form action="index.php" method="post">
<p>
<div class="label"><label for="nazwa">Nazwa miasta / miejsca <span class="req">*</span></label></div>
<input type="text" name="nazwa" />
</p>
<p>
<div class="label"><label for="lat">Latitude (szerokość geograficzna) <span class="req">*</span></label></div>
<input type="text" name="lat" />
</p>
<p>
<div class="label"><label for="long">Longtude (długość geograficzna) <span class="req">*</span></label></div>
<input type="text" name="long" />
</p>
<p>
<div class="label"><label for="opis">Opis</label></div>
<textarea name="opis"></textarea>
</p>
<p>
<input class="submit" type="submit" name="submit" value="Dodaj nowy punkt" />
</p>
</form>
</div>
<?php template_footer(); ?>
</body>
</html>

Nie chce mi się tak bardzo poprawiać całego kodu na taki jaki on powinien być, takie przeplatanie PHP/HTML nie wygląda zbyt ładnie...

*

Offline Dekker

  • ***
  • 37
  • 1
  • Wersja SMF: 2.0.3
Odp: Integracja Google API
« Odpowiedź #3 dnia: 20 Luty 2013, 17:24 »
Super, wszystko działa.


A mam takie pytanie czy dało by radę tak zrobić że jak ktoś doda punkt na mapie to on się pokazuje na forum w bloku bocznym?
I czy ktoś by się podjął zrobienia tego?

*

Offline Adrian

  • *****
  • 5532
  • 723
  • Płeć: Mężczyzna
  • Smile, tomorrow will be worse...
    • Adrek.pl
Odp: Integracja Google API
« Odpowiedź #4 dnia: 20 Luty 2013, 18:05 »
Umieść ten sam kod w bloku portalu? Bez funkcji SSI (template_header(); i template_footer();).