jquery's html() method not effectively inserting html code

Question

I'm trying to get javascript to render an embedded google map once the user's coordinates are obtained.

The code that gets the lat & long works, so I wont show it, but here's the gist of it

<script type="text/javascript">
  $(document).ready(function() {
    //previous code calculating lat & lng, etc
    showMap(lat, lng);
  function showMap(lat,lng) {
    var apikey = "asdfasdfasdfasdf";
    var code = "<iframe width='480' height='320' frameborder='0' style='border:0' src='https://www.google.com/maps/embed/v1/view?zoom=14&center=" + lat + "," + lng + "&key=" + apikey + "></iframe>";
    console.log(code) //outputs good code
    $("#map").html(code)
  }
 }
</script>

Note that this does work....

$("#map").html("<h2>FML</h2>");

That works.

you are missing some brackets and semicolons. at the end of $(document).ready(.......) that closing bracket is missing. after console log ; missing — Jeff
– Jeff, Commented May 18, 2015 at 1:14
); missing at the end of $(document).ready(function(){.....} — Mohamed-Yousef
– Mohamed-Yousef, Commented May 18, 2015 at 1:23

epascarello · Accepted Answer · 2015-05-18 01:14:53Z

2

Missing the closing ' for the src attribute.

..."&key=" + apikey + "></iframe>";

needs to be

..."&key=" + apikey + "'></iframe>";
                    ^

answered May 18, 2015 at 1:14

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeff · Accepted Answer · 2015-05-18 01:25:43Z

2

test if it is working with all the typo's corrected:

<script type="text/javascript">
  $(document).ready(function() {
    //previous code calculating lat & lng, etc
    var lat = 1234;
    var lng = 5678;
    showMap(lat, lng);
  });
  function showMap(lat,lng) {
    var apikey = "asdfasdfasdfasdf";
    var code = "<iframe width='480' height='320' frameborder='0' style='border:0' src='https://www.google.com/maps/embed/v1/view?zoom=14&center=" + lat + "," + lng + "&key=" + apikey + "'></iframe>";
    console.log(code); //outputs good code
    $("#map").html(code);
  }
</script>

(credit to @epascarello for the missing "'")

edited May 18, 2015 at 1:25

answered May 18, 2015 at 1:21

Jeff

6,9611 gold badge19 silver badges34 bronze badges

Collectives™ on Stack Overflow

jquery's html() method not effectively inserting html code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related