Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Thanked 0 Times in 0 Posts

    Help google maps API code

    I'm making a javascript with google maps API.
    The concept is that you have to fill in your desired location and that it shows you the route to that location. It has an unchangeable starting location.
    I also made it so that you have a description panel. Now when I try to make it so that the description panel is next to the map with the route on, my description panel just drops below my map. I believe this problem is either me f*cking up my div's or my CSS.

    Here's what i used for my CSS
    <style type="text/css">
    html, body {
    height: 100%;
    margin: 0;
    padding: 0;

    #map_canvas {
    height: 100%;
    width: 70%

    #directionsPanel {
    height 100%

    @media print {
    html, body {
    height: auto;

    #map_canvas {
    height: 650px;

    And here's what i used for my div's
    <div id="main" style="width:100%;height:100%">
    <div id="map_canvas" style="top:30px;width:70%;height:80%"></div>
    <div id="warnings_panel" style="width:100%;height:10%;text-align:center"></div>
    <div id="directionsPanel" style="float:right;width:30%;height 100%"></div>

    Any help regarding this would be much appreciated. (And yes, I'm still new to scriptwriting/coding in general)

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Thanked 568 Times in 565 Posts
    this is a css problem (giveaway: there's no javascript in the code posted) - you should post on the css branch. they will most likely want to see your entire html.

    something that strikes me as odd, though - you have both inline and css styling for your divs... is this really necessary?


    Posting Permissions

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