Search jQuery

jQuery Forum

Google map not loading

in Using jQuery • 7 years ago

Am feeding lat and lng variables to google map from dynamic select/options. I am seeing that the correct lat and lng are being produced but when fed to mapOptions map doesn't load.

Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Google Maps API getting Lat and Long with Geocoding</title>

   <link rel="stylesheet " type="text/css" href="css/loadList.css" />
   <link rel="stylesheet " type="text/css" href="css/gps.css" />

    <script src="../jquery/jquery-2.1.4.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script type="text/javascript" src="../jquery/getHtmlParams.js"></script>

<script type="text/javascript">
      var name;
      var index;
      var address;
      var lat;
      var lng;

$(document).ready(function(){

loadlist($('#latlng').get(0),                   /*the 'select' object*/
'getMarkers.php?getlist=latlng', 'name');

function loadlist(selobj, url, nameattr) {

    $(selobj).empty();
    $.getJSON(url, {}, function(data) {

        $.each(data, function(i,obj) {
            $(selobj).append($('<option></option>').val(obj[nameattr]).html(obj[nameattr]));
        }); //each

$("#latlng").change(function(){

      name=$(this).val();
      index=this .selectedIndex;
      address=data[index]['address'];
      lat=data[index]['lat'];
      lng=data[index]['lng'];

    mapIt(name, address, lat, lng);              // off to load google maps

}) // latlng

}); // getJSON
} // loadlist
}); // doc ready

</script>

</head>

<body>

<div id="loadListWrapper">

<label id="markerLbl" >Select Marker For:</label><br>
<select name='latlng' id='latlng' size='5'></select>

</div> 



<script type="text/javascript">

    function mapIt(a, b, c, d) {              // c & d are lat an lng
    var latlng=c+", "+d;

alert(latlng);        // shows lat & lng

var mapOptions={
zoom:8,
center: new google.maps.LatLng(latlng),
mapTypeId: google.maps.MapTypeId.ROADMAP

}; // mapOptions

var map=new google.maps.Map($("#map").get(0), mapOptions);    // doesn't load

}; // mapIt

/*
function mapIt(a, b, c, d){    // testing stuff

      document.write(a+"/ ");
      document.write(b+"/ ");
      document.write(c+"/ ");
      document.write(d);

}*/

</script>



<div id="map" > 

</div>

</body>
</html>

Replies(4)

kbwood.au

Re: Google map not loading

7 years ago

You are trying to find #map before it is available on the page - so nothing happens. Wrap your map initialisation in a document.ready callback to have it happen once the DOM has finished loading.

pizzipie

Re: Google map not loading

7 years ago

You are trying to find #map before it is available on the page - so nothing happens. Wrap your map initialisation in a document.ready callback to have it happen once the DOM has finished loading.

Thanks kbwood!

I put document.ready around the 'mapIt' function but get nothing. I thought the code is executed in order down the page. So I call the server, receive the Marker information from the database, pick a Marker, and call the 'mapIt' function.

Please explain how to do this. I keep getting tripped up on this issue and can't get a handle on how to fix it.

kbwood.au

Re: Google map not loading

7 years ago

My mistake - the (lack of) indentation made it appear #map was being accessed too early.

Can you provide a page that shows the problem?

pizzipie

Re: Google map not loading

7 years ago

I put the function mapIt inside document.ready.

Here is what screen shows. When 'OK' is pressed on dialog box map doesn't show.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Google Maps API getting Lat and Long with Geocoding</title>

   <link rel="stylesheet " type="text/css" href="css/loadList.css" />
   <link rel="stylesheet " type="text/css" href="css/gps.css" />

    <script src="../jquery/jquery-2.1.4.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script type="text/javascript" src="../jquery/getHtmlParams.js"></script>

<script type="text/javascript">
      var name;
      var index;
      var address;
      var lat;
      var lng;

$(document).ready(function(){

    function mapIt(a, b, c, d) {
    var latlng=c+", "+d;

alert(latlng);        // shows lat & lng

var mapOptions={
zoom:8,
center: new google.maps.LatLng(latlng),
mapTypeId: google.maps.MapTypeId.ROADMAP

}; // mapOptions

var map=new google.maps.Map($("#map").get(0), mapOptions);

}; // mapIt

loadlist($('#latlng').get(0),                   /*the 'select' object*/
'getMarkers.php?getlist=latlng', 'name');

function loadlist(selobj, url, nameattr) {

    $(selobj).empty();
    $.getJSON(url, {}, function(data) {

        $.each(data, function(i,obj) {
            $(selobj).append($('<option></option>').val(obj[nameattr]).html(obj[nameattr]));
        }); //each

$("#latlng").change(function(){

      name=$(this).val();
      index=this .selectedIndex;
      address=data[index]['address'];
      lat=data[index]['lat'];
      lng=data[index]['lng'];

    mapIt(name, address, lat, lng);

}) // latlng

}); // getJSON
} // loadlist
}); // doc ready

</script>

</head>

<body>

<div id="loadListWrapper">

<label id="markerLbl" >Select Marker For:</label><br>
<select name='latlng' id='latlng' size='5'></select>

</div> 

<div id="map" >

</div>

</body>
</html>

Top Reply

Response title

Attachments

jQuery Forum

Google map not loading

Replies(4)

Re: Google map not loading

Re: Google map not loading

Re: Google map not loading

Re: Google map not loading

Statistics

Tags

Actions

Related Posts