Php de javascript kullanımı

06-01-2018, 02:21:32

https://jsfiddle.net/dannymarkov/ubrvm4ao/
bu sitede ki projeyi bir türlü kendi projemde çalıştıramadım
html taglarını açıyorum body kısmına html kısmını kopyalayıp yapıştırıyorum
head kısmına style tagı açıp css kısmını kopyalayıp yapıştırıyorum
head kısmına script tagı açıp js kısmını kopyalayıp yapıştırıyorum

ama bir türlü çalışmıyor localhostta çalışmıyor onu hatalı bulup sitelerin birine upload ettim fakat çalışmadı neyi yanlış yapıyorum
cevaplarınız için teşekkürler şimdiden

06-01-2018, 02:25:42

#2

Paracokomel

External resources kısmında 4 link var.
1 bootstrap
2 jquery
3 google maps api
4 google maps js

Google hesabına girip kendine özel maps api oluşturmazsan göremiyor olabilirsin.

06-01-2018, 02:30:58

#3

korlord1

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=IzaSyBaS_p-3aWMqsEvbQCMnw_Up0dU3Ra7tus&callback=initMap">
    </script>
      <script type="javascript">
var findMeButton = $('.find-me');

// Check if the browser has support for the Geolocation API
if (!navigator.geolocation) {

  findMeButton.addClass("disabled");
  $('.no-browser-support').addClass("visible");

} else {

  findMeButton.on('click', function(e) {

    e.preventDefault();

    navigator.geolocation.getCurrentPosition(function(position) {

      // Get the coordinates of the current possition.
      var lat = position.coords.latitude;
      var lng = position.coords.longitude;

      $('.latitude').text(lat.toFixed(3));
      $('.longitude').text(lng.toFixed(3));
      $('.coordinates').addClass('visible');

      // Create a new map and place a marker at the device location.
      var map = new GMaps({
        el: '#map',
        lat: lat,
        lng: lng
      });

      map.addMarker({
        lat: lat,
        lng: lng
      });

    });

  });

</script>
  <style type="text/css">
  .container {
    max-width: 980px;
    text-align: center;
    margin: 20px auto;
  }

  h1 {
    margin-bottom: 20px;
  }

  #geocoding_form {
    margin: 40px auto 40px;
  }

  .input-group {
    margin-left: 4%;
  }

  .find-me.btn:focus {
    border-color: transparent;
    outline: 0;
  }

  .coordinates {
    font-size: 18px;
    opacity: 0;
    margin-bottom: 40px;
  }

  .no-browser-support {
    font-size: 18px;
    opacity: 0;
  }

  .coordinates b:first-child {
    margin-right: 15px;
  }

  .visible {
    opacity: 1;
  }

  .map-overlay {
    max-width: 600px;
    height: 400px;
    margin: 0 auto;
    background-color: #fff;
    position: relative;
    border-radius: 2px;
  }

  #map {
    max-width: 550px;
    height: 400px;
    margin: 0 auto;
  }

</style>
</head>
<body>

<div class="container">

  <h1>Geolocation Demo</h1>

  <form id="geocoding_form" class="form-horizontal">
    <div class="form-group">
      <div class="col-xs-12 col-md-6 col-md-offset-3">
        <button type="button" class="find-me btn btn-info btn-block">Find My Location</button>
      </div>
    </div>
  </form>

  <p class="no-browser-support">Sorry, the Geolocation API isn't supported in Your browser.</p>
  <p class="coordinates">Latitude: <b class="latitude">42</b> Longitude: <b class="longitude">32</b></p>

  <div class="map-overlay">
    <div id="map"></div>
  </div>

</div>

</body>
</html>

yaptım onları ama soçun aynı

06-01-2018, 02:34:03

#4

Paracokomel

Tarayıcı konsolunda verdiği hataya bakın.

06-01-2018, 02:34:53

#5

korlord1

korlord1 adlı üyeden alıntı: mesajı görüntüle

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=IzaSyBaS_p-3aWMqsEvbQCMnw_Up0dU3Ra7tus&callback=initMap">
    </script>
      <script type="javascript">
var findMeButton = $('.find-me');

// Check if the browser has support for the Geolocation API
if (!navigator.geolocation) {

  findMeButton.addClass("disabled");
  $('.no-browser-support').addClass("visible");

} else {

  findMeButton.on('click', function(e) {

    e.preventDefault();

    navigator.geolocation.getCurrentPosition(function(position) {

      // Get the coordinates of the current possition.
      var lat = position.coords.latitude;
      var lng = position.coords.longitude;

      $('.latitude').text(lat.toFixed(3));
      $('.longitude').text(lng.toFixed(3));
      $('.coordinates').addClass('visible');

      // Create a new map and place a marker at the device location.
      var map = new GMaps({
        el: '#map',
        lat: lat,
        lng: lng
      });

      map.addMarker({
        lat: lat,
        lng: lng
      });

    });

  });

</script>
  <style type="text/css">
  .container {
    max-width: 980px;
    text-align: center;
    margin: 20px auto;
  }

  h1 {
    margin-bottom: 20px;
  }

  #geocoding_form {
    margin: 40px auto 40px;
  }

  .input-group {
    margin-left: 4%;
  }

  .find-me.btn:focus {
    border-color: transparent;
    outline: 0;
  }

  .coordinates {
    font-size: 18px;
    opacity: 0;
    margin-bottom: 40px;
  }

  .no-browser-support {
    font-size: 18px;
    opacity: 0;
  }

  .coordinates b:first-child {
    margin-right: 15px;
  }

  .visible {
    opacity: 1;
  }

  .map-overlay {
    max-width: 600px;
    height: 400px;
    margin: 0 auto;
    background-color: #fff;
    position: relative;
    border-radius: 2px;
  }

  #map {
    max-width: 550px;
    height: 400px;
    margin: 0 auto;
  }

</style>
</head>
<body>

<div class="container">

  <h1>Geolocation Demo</h1>

  <form id="geocoding_form" class="form-horizontal">
    <div class="form-group">
      <div class="col-xs-12 col-md-6 col-md-offset-3">
        <button type="button" class="find-me btn btn-info btn-block">Find My Location</button>
      </div>
    </div>
  </form>

  <p class="no-browser-support">Sorry, the Geolocation API isn't supported in Your browser.</p>
  <p class="coordinates">Latitude: <b class="latitude">42</b> Longitude: <b class="longitude">32</b></p>

  <div class="map-overlay">
    <div id="map"></div>
  </div>

</div>

</body>
</html>

yaptım onları ama soçun aynı

yanlış yerdemi kullanıyorum kodları

06-01-2018, 02:35:40

#6

Paracokomel

Script etiketlerini body altında yazmakta fayda var.

06-01-2018, 02:36:40

#7