How to call Javascript from HTML

Question

I found a bit of Google Maps Javascript at JSFiddle: http://fiddle.jshell.net/bTujZ/885/

I'm trying to get it to run by enclosing the script between script tags and then calling it in the body like so:

<body onload="initialize()">
<div id="map_canvas" style="width:400px; height:400px"></div>
</body>

When I attempt to load the page it is blank.

My full code follows:

<html>
<head>
<script language="javascript">
var points = [
    ['name1', 59.9362384705039, 30.19232525792222, 12, 'www.google.com'],
    ['name2', 59.941412822085645, 30.263564729357767, 11, 'www.amazon.com'],
    ['name3', 59.939177197629455, 30.273554411974955, 10, 'www.stackoverflow.com']
];

function setMarkers(map, locations) {
    var shape = {
        coord: [1, 1, 1, 20, 18, 20, 18 , 1],
        type: 'poly'
    };
    for (var i = 0; i < locations.length; i++) {
        var flag = new google.maps.MarkerImage(
            'http://googlemaps.googlermania.com/google_maps_api_v3/en/Google_Maps_Marker.png',
            new google.maps.Size(37, 34),
            new google.maps.Point(0,0),
            new google.maps.Point(0, 19)
        );
        var place = locations[i];
        var myLatLng = new google.maps.LatLng(place[1], place[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: flag,
            shape: shape,
            title: place[0],
            zIndex: place[3],
            url: place[4]
        });
        google.maps.event.addListener(marker, 'click', function() {
            alert('go to ' + this.url);
            //window.location.href = this.url;
        });
    } 
}

function initialize() {
    var myOptions = {
        center: new google.maps.LatLng(59.91823239768787, 30.243222856188822),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    setMarkers(map, points);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:400px; height:400px"></div>
</body>
</html>

I'm certain I'm making a boneheaded error, as I'm new to Javascript.

You could just move the script below the `` and call `initialize()` from within the script tags. Also, it seems you need some other script page; I see some `new google…` calls. These probably require another script page. — royhowie, Jul 15 '14 at 17:37
Did you include reference to Google API? The jsFiddle you mentioned references http://maps.googleapis.com/maps/api/js?sensor=false&test=test.js — Yuriy Galanter, Jul 15 '14 at 17:38
Relevant: http://stackoverflow.com/questions/1235985/attach-a-body-onload-event-with-js — Casey Falk, Jul 15 '14 at 17:39
Thanks guys. Yuriy provided the answer that helped me extract my head. — user3830989, Jul 15 '14 at 17:44

score 1 · Answer 1 · answered Jul 15 '14 at 17:43

1

Where are you loading the API?

Here's one way to do it. https://developers.google.com/maps/documentation/javascript/examples/map-simple-async

answered Jul 15 '14 at 17:43

Alfredo Delgado

670
4
12

score -1 · Answer 2 · edited May 23 '17 at 12:11

Try to use jquery (http://www.jquery.com)

http://api.jquery.com/ready/

$( document ).ready(function() {
// Handler for .ready() called.
});

Which is equivalent to calling (without jquery):

$(function() {
// Handler for .ready() called.
});

I prefer the use of jquery, because the analysis inside the ready document depend on the browser engine.

Posible duplicate: $(document).ready equivalent without jQuery

How to call Javascript from HTML

2 Answers2