My JavaScript code isn't rendering my google map

Question

I'm currently trying to load a google map based on rather large Ember project.

As the project is quite the load time is longer than what I would like. So due to this I am trying to make the UI of the load page nicer, it's quite bland at the moment. My aim is to implement a simple google map API in to this page that doesn't take long to render and only reads a certain amount of variables e.g. lat, long, zoom level and max zoom.

I also want to load the map asynchronously for performance.

I've put the script in a seperate HTML document below so my other code doesn't make it hard to understand. I'm guessing there is just a silly mistake somewhere in my code.

Big thanks of whoever is able to solve my idiocy in this!

<html>
<head>
<title>Map Load</title>
<style>
#map {
height: 953px;
width: 1630px;
position: absolute;
}
</style>
</head>
<body>
<h1>Loading map using async and defer attributes for loading page</h1>
    <div id="map"></div>

<script>
function init() {
    var myLatlng = new google.maps.LatLng(54.559322,-4.174804); // Add the coordinates
    var mapOptions = {
        center: myLatlng,
        zoom: 6, // The initial zoom
        minZoom: 6, // Minimum zoom
        maxZoom: 15 // Maximum zoom
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); // Render the map within the empty div
}
</script>

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTy18qtBZ6L1FnlbeVVk2IhMysFBqJb68&callback=init"
    async defer></script>
</body>
</html>

You reference a callback of initMap, but your function is called init. — BenM
– BenM, Commented Jul 4, 2016 at 11:35
when you gogle.map you still aint got nuthin for maoptions, put mapoptions before google.map — Ceylan Mumun Kocabaş
– Ceylan Mumun Kocabaş, Commented Jul 4, 2016 at 11:38

Legionar · Accepted Answer · 2016-07-04 11:44:01Z

1

There are three errors in your code:

myLatlng is not used in the mapOptions

you declared var map = ... twice, first time is wrong, because also mapOptions is not declared in the first time.

function init() {
    var myLatlng = new google.maps.LatLng(54.559322,-4.174804); // Add the coordinates
    var mapOptions = {
        center: myLatlng,
        zoom: 6, // The initial zoom
        minZoom: 6, // Minimum zoom
        maxZoom: 15 // Maximum zoom
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); // Render the map within the empty div
}

bad reference to your function, instead of initMap use init

<script src="https://maps.googleapis.com/maps/api/js?callback=init" async defer></script>

edited Jul 4, 2016 at 11:44

answered Jul 4, 2016 at 11:39

Legionar

7,5993 gold badges45 silver badges71 bronze badges

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

2 Comments

Coder994 Over a year ago

Thanks. Good eye. The map div now loads but it's just a grey box, the map doesn't actually render. Do I have to include a google map API browser key? I wouldn't of thought I'd had to because I didn't in a previous version and it rendered fine.

Coder994 Over a year ago

Fixed now, it was asking for an API key. Many thanks for your help. I've accepted your answer! :)

Collectives™ on Stack Overflow

My JavaScript code isn't rendering my google map

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related