Oddiy Google xaritalari js ishlamaydi

Men oddiy Google xaritalarini yaratishga harakat qilyapman, lekin bu oddiy sozlash ishlamayapti, kimdir menga noto'g'ri ish qilayotganimni ayta oladimi? Rahmat!

HTML

<script defer
src="https://maps.googleapis.com/maps/api/JS?key=AIzaSyBy2rXc1YewdnqhPaaEd7H0I4DTV_pc7fo&">

</script>

<div id="map"> </div>

JS

    function initMap() {
    console.log('test');
    var myLatLng = {lat: -25.363, lng: 131.044};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatLng
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });
}

Hujjatning tayyor funktsiyasi

$(document).ready(function(){
    initMap();
});
1
ishlamaydi Bu nimani anglatadi? - Nima ishlamaydi? Nima kutmoqdasiz? Qanday xatolar yuz beradi?
qo'shib qo'ydi muallif Darren Sweeney, manba
Xaritaning ishlashi uchun kutish kerak va u hech qanday xato ko'rsatmadi! uni hujjatning boshlang'ichdan yuqori qismiga qo'yish uchun tuzatishga majbur bo'ldi. ishonch emas nega tho!
qo'shib qo'ydi muallif Wesleyvans, manba

6 javoblar

Divingizga kenglik va balandlikni kiritishingiz kerak.

<div id="map" style="width:400px;height:400px;"></div>
1
qo'shib qo'ydi
Bu ham sizga katta rahmat!
qo'shib qo'ydi muallif Wesleyvans, manba

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function(){
    initMap();
});

function initMap() {
    console.log('test');
    var myLatLng = {lat: -25.363, lng: 131.044};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatLng
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });
}
#map
{
width:500px;height:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBy2rXc1YewdnqhPaaEd7H0I4DTV_pc7fo&">

</script>

<div id="map" ></div>
</div> </div>
0
qo'shib qo'ydi

try adding &callback=initMap after you api in script call

0
qo'shib qo'ydi
  • your callback parameter not given in <script>.
  • div without width & height.
  • if you doesn't to use callback parameter,the <script> not need defer

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

function initMap() {
    console.log('test');
    var myLatLng = {lat: -25.363, lng: 131.044};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatLng
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });
}
<script defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBy2rXc1YewdnqhPaaEd7H0I4DTV_pc7fo&callback=initMap">

</script>
<div id="map" style="width:300px;height:300px;"> </div>
</div> </div>
0
qo'shib qo'ydi

Xo'sh, kod ishlaydi. Sizning divingizning balandligi va kengligini ko'rsatishingiz kerak.

Inline CSS yordamida

style="width:400px;height:400px;"

Yoki CSS-dan foydalanib

#map {
  width: 400px;
  height: 400px;
}

Test : https://jsfiddle.net/LmckLLjj/

0
qo'shib qo'ydi

Iltimos div-ni xaritada ko'rsatish uchun balandlik va kenglikni o'rnating

Coz, sukut bo'yicha div balandligi va kengligi 0 ga teng

Shu kabi divni o'zgartiring

<div id="map" style="width:100px;height:100px;"></div>

Yoki quyidagi kabi CSS-ni o'rnatish mumkin:



0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb