Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Easy JS Help

  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Easy JS Help

    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.

    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">
    
    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>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    Not so easy.

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

    Hmmm...I see why: You have
    Code:
        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
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    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%???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    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).
    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.
    Last edited by Old Pedant; 11-22-2012 at 12:05 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •