Easy JS Help

lukedimarco

11-21-2012, 07:05 AM

I am kind of a noob when it comes to JS programming. I'm trying to align a map api from google and an embeded twitter timeline side by side. my code is below. the timeline is working just fine, but the map will not appear. any idea why? the code is below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>RTA 2015 // Opinion Leaders</title>
<style type="text/css">

body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: ;
margin: 0;
padding: 0;
color: #000;
}

.container {
width: 100%;
background: ;
margin: 0 auto;
overflow: hidden;
}

.sidebar1 {
float: right;
width: 30%;
background:;
padding-bottom: 0px;
}
.content {
padding: 0px 0;
width: 70%;
float: left;
}

</style>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/javascript">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
.map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVend8kZ_NhU9NNwp5yETwjsrbHbhx4T0&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var map_options = {
center: new google.maps.LatLng(43.655412,-79.382853),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

var info_window = new google.maps.InfoWindow({
content: 'loading'
});

var t = [];
var x = [];
var y = [];
var h = [];

t.push('Location Name 1');
x.push(43.655412);
y.push(-79.382853);
h.push('<p><strong>Location Name 1</strong><br/>Address 1</p>');

t.push('Location Name 2');
x.push(43.640223);
y.push(-79.395951);
h.push('<p><strong>Location Name 2</strong><br/>Address 2</p>');

t.push('Location Name 3');
x.push(43.64297);
y.push(-79.381499);
h.push('<p><strong>Location Name 3</strong><br/>Address 3</p>');

var i = 0;
for ( item in t ) {
var m = new google.maps.Marker({
map: google_map,
animation: google.maps.Animation.DROP,
title: t[i],
position: new google.maps.LatLng(x[i],y[i]),
html: h[i]
});

google.maps.event.addListener(m, 'click', function() {
info_window.setContent(this.html);
info_window.open(google_map, this);
});
i++;
}
}

initialize();

</script>

</head>

<body onload="initialize()">

<div class="container">
<div class="sidebar1">
<a class="twitter-timeline" href="https://twitter.com/lukedimarco/rta-2015" height="100%" width="100%" data-widget-id="270987548719980545">Tweets from @lukedimarco/rta-2015</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

<div id="map_canvas" style="width:100%; height:100%"></div>
</div>
</body>
</html>

Old Pedant

11-21-2012, 11:34 PM

Not so easy.

You are getting an error in the middle of the Google map JS code.

Hmmm...I see why: You have
initialize( );
just before the </script> tag in your code. BOGUS!

You can't call initialize until the page is loaded. You *ARE* doing that via
<body onload="initialize()">

so just kill that bogus line.

HOWEVER...the map still doesn't appear.

But it doesn't seem to have anything to do with the twitter stuff.

Because if you simply DELETE <div class="sidebar1"> and all it contains, the map still doesn't appear.

Old Pedant

11-21-2012, 11:41 PM

Ahhh...easy fix!

Google maps doesn't like your width: 100%; height: 100%; for that <div>.

If you give it a SPECIFIC size (e.g, <div id="map_canvas" style="width:800px; height:400px;"></div> ) it works like a charm.

Okay...let me now put back in the twitter div...

Yep...they work just fine together, except apparently you have to give a specific size to the map div.

But you know, your spec didn't make sense, anyway:

You were giving width: 100% to the map and then width: 30% to the sidebar. Ummm...how can you have a total width of 130%???

Old Pedant

11-22-2012, 12:01 AM

Here's a way to keep your 70%/30% split.

Had to hack it just a bit, because with full 70%/30%, offsetWidth seems to be a few pixels too wide (at least in Chrome).

This also moves your JS code to a better spot. Eliminates the problem with onload and keeps 100% of your own JS code invisible to any other JS on the page (i.e., invisible to the twitter code).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>RTA 2015 // Opinion Leaders</title>
<style type="text/css">
* { margin: 0px; }

body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: ;
margin: 0;
padding: 0;
color: #000;
}

.container {
position: relative;
width: 100%;
background: ;
margin: 0 auto;
overflow: hidden;
}

.sidebar1 {
position: relative;
float: right;
width: 30%;
background:;
border: solid red 3px;
padding-bottom: 0px;

}
#map_canvas {
position: relative;
width:70%;
height:100%;
border: solid green 3px;
}
.content {
padding: 0px 0;
width: 70%;
float: left;
}

</style>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVend8kZ_NhU9NNwp5yETwjsrbHbhx4T0&sensor=false">
</script>
</head>

<body>

<div class="container">
<div class="sidebar1">
<a class="twitter-timeline" href="https://twitter.com/lukedimarco/rta-2015" height="100%" width="100%" data-widget-id="270987548719980545">Tweets from @lukedimarco/rta-2015</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div id="map_canvas"></div>
</div>

<script type="text/javascript">
// create a self-invoked anonymous master function to do all the setup work
(
function ( )
{
// adjust the map div so Google maps code can use its size:
var mapdiv = document.getElementById("map_canvas");
// convert its layout % width to pixels
var mw = mapdiv.offsetWidth * 0.95; // 95% as a fudge factor
var mh = window.innerHeight;
mapdiv.style.height = mh + "px"; // see? now using absolute number of pixels
mapdiv.style.width = mw + "px";

var map_options = {
center: new google.maps.LatLng(43.655412,-79.382853),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var google_map = new google.maps.Map(mapdiv, map_options);

var info_window = new google.maps.InfoWindow({
content: 'loading'
});

var t = [];
var x = [];
var y = [];
var h = [];

t.push('Location Name 1');
x.push(43.655412);
y.push(-79.382853);
h.push('<p><strong>Location Name 1</strong><br/>Address 1</p>');

t.push('Location Name 2');
x.push(43.640223);
y.push(-79.395951);
h.push('<p><strong>Location Name 2</strong><br/>Address 2</p>');

t.push('Location Name 3');
x.push(43.64297);
y.push(-79.381499);
h.push('<p><strong>Location Name 3</strong><br/>Address 3</p>');

var i = 0;
for ( item in t ) {
var m = new google.maps.Marker({
map: google_map,
animation: google.maps.Animation.DROP,
title: t[i],
position: new google.maps.LatLng(x[i],y[i]),
html: h[i]
});

google.maps.event.addListener(m, 'click', function() {
info_window.setContent(this.html);
info_window.open(google_map, this);
});
i++;
}
}
)( ); // and here we indeed self-invoke the function
</script>
</body>
</html>

Stuff in red shows things I changed other than the JS code. Might not have needed all those changes.

The border colors on the two <div>s are just so you can see where they are laid out by the browser.
You can of course remove them.