Google api Javascript code not working

Question

<html>
<style>
#map_canvas {
width: 500px;
height: 500px;}
</style>
<div id="map_canvas"></div>
<script type='text/javascript'>
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
    zoom: 1,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);

var addresses = ['Norway', 'Africa', 'Asia','North America','South Africa'];

for (var x = 0; x < addresses.length; x++) {
    $.getJSON('https://maps.googleapis.com/maps/api/geocode/json?        address='+addresses[x]+'&AIzaSyBNglC0_Xcy6uJau0sJ1OM3QCryb11PwOU', null, function (data) {
        var p = data.results[0].geometry.location
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        new google.maps.Marker({
            position: latlng,
            map: map
        });

    });
}

});
</script>
</html>

This is the code that I found from this useful webpage to modify google geocoding api, which the url is http://jsfiddle.net/P2QhE/

However, this code won't work on http://w3schools.com where I usually practice and test my codes, and I don't understand why it won't work. Can anyone help me figure it out?

score 1 · Answer 1 · answered Nov 12 '16 at 01:14

Are you referring to the tryit editor on w3schools? If so, it's probably because it doesn't include jquery. Looks like you're missing your <head> and <body> tags too. You forgot your target div, too. <div id="map_canvas"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Google api Javascript code not working

1 Answers1