cancel
Showing results for 
Search instead for 
Did you mean: 

Google Map embedding

Google Map embedding

Not sure if this is the correct section to ask this question but I am adding a visit us page with an embedded google map. My problem is when I want to put text on the page its not wrapping around my google map its actually sitting on top of it. How can I go about wrapping the text nicely on the right hand side of the map?

<div class="page-title">
<h1>About Fashion X</h1>
<p style="text-align: left;">&nbsp;</p>
</div>
<div class="col3-set">
<div class="col-1">
<div style="text-align: left;"><iframe src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=11117+HARRY+HINES+BLVD+SUITE+150+DALLAS+TX+75229&amp;aq=&amp;sll=32.862876,-96.961433&amp;sspn=0.418151,0.837021&amp;ie=UTF8&amp;hq=&amp;hnear=11117+Harry+Hines+Blvd+%23150,+Dallas,+Texas+75229-4604&amp;t=m&amp;z=14&amp;ll=32.887254,-96.888531&amp;output=embed" height="378" width="461"></iframe>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br /><small><a style="color: #0000ff; text-align: left;" href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=11117+HARRY+HINES+BLVD+SUITE+150+DALLAS+TX+75229&amp;aq=&amp;sll=32.862876,-96.961433&amp;sspn=0.418151,0.837021&amp;ie=UTF8&amp;hq=&amp;hnear=11117+Harry+Hines+Blvd+%23150,+Dallas,+Texas+75229-4604&amp;t=m&amp;z=14&amp;ll=32.887254,-96.888531">View Larger Map</a></small></div>
</div>
<p style="text-align: right;">At&nbsp;Fashion X,&nbsp;we understand the significance of customer service and we pride our company on making our customers the first priority. We offer quality wholesale clothing and accessories at economical prices with the best customer service. We enjoy a diverse customer base and update our products daily.&nbsp;</p>
<p class="p2" style="text-align: right;">When you shop with us you can be guaranteed that your products will always be the most current trends that you will see in retail stores.&nbsp;</p>
<p class="p2" style="text-align: right;">&nbsp;We strive to guarantee a smooth and easy shopping experience. Orders can be placed online and customer service can be reached by phone or email. We accept Visa and Master card for your convenience. We always&nbsp;ship our&nbsp;products in a timely manner and once we receive the order we ship that same day if it is made during our business hours 10:00AM-7:00PM (central standard time)</p>
<p class="p1" style="text-align: right;">-Fashion-X Staff-</p>
<p class="p1" style="text-align: right;">11117 HARRY HINES BLVD SUITE 150 DALLAS TX 75229</p>
<p class="p1" style="text-align: right;">PHONE &amp; FAX: 972-243-1466</p>
<p class="p1" style="text-align: right;">LANA: 214-497-8234</p>
<p class="p1" style="text-align: right;">EMAIL: <a href="mailto:lanasfashionx@gmail.com">lanasfashionx@gmail.com</a></p>
<p class="p1" style="text-align: right;"><a href="https://www.facebook.com/FashionXShop">https://www.facebook.com/FashionXShop</a></p>
<p class="p1" style="text-align: right;">BUSINESS HOURS: MONDAY-SATURDAY: 10:00AM TO 6:30PM</p>
<p class="p1" style="text-align: right;">SUNDAY-11:00AM TO 4:30PM</p>
</div>

 

Web Developer/Marketing Expert
8 REPLIES

Re: Google Map embedding

I'm not 100% positive, someone else might be able to provde an accurate code;

But heres my insight;

You have the whole div in a <div class=col3-set">
Map is in col-1 div
But you did not put the text in a new column, so it'll share the same column as the map.

   <div class="page-title">
	<h1>About Fashion X</h1>
        <p style="text-align: left;">&nbsp;</p>
	</div> 

    <div class="col3-set">
	    	  
	    <div class="col-1">
	        Map
	    </div>
	    <div class="col-2">
	        Text
	    </div> 
      </div>

 Then you'll have to create stuff in the CSS to define the size of the divs

 

.col3-set{
   position: relative;
   width: 100%;
}
.col-1{
   position: relative;
   overflow: hidden;
   float: left;
   width: 48%;
}
.col-2{
   position: relative;
   overflow: hidden;
   float: left;
   width: 48%;
}

 I believe by making the col-1 and col-2 smaller then 50% that will allow them to be side-by-side instead of on top of each other.

You can also adding padding/margines by % to allow spacing around

I'm not 100% sure tho

Re: Google Map embedding

Something like:

<div class="page-title">
<h1>About Fashion X</h1>
<p style="text-align: left;">&nbsp;</p>
</div>
<div class="col3-set" style="width:100%" >
<style>
      .col3-set{
        float:left;
        position:relative;
        width:100%;
        float:left;
      }
      .col-1{
        float:left;
        position:relative;
        width:48%;
        float:left;
      }
      .col-2{
        float:left;
        position:relative;
        width:48%;
        float:left;
      }
    </style> 
<div class="col-1">
<div style="text-align: left;"><iframe src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=11117+HARRY+HINES+BLVD+SUITE+150+DALLAS+TX+75229&amp;aq=&amp;sll=32.862876,-96.961433&amp;sspn=0.418151,0.837021&amp;ie=UTF8&amp;hq=&amp;hnear=11117+Harry+Hines+Blvd+%23150,+Dallas,+Texas+75229-4604&amp;t=m&amp;z=14&amp;ll=32.887254,-96.888531&amp;output=embed" height="378" width="461"></iframe>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br /><small><a style="color: #0000ff; text-align: left;" href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=11117+HARRY+HINES+BLVD+SUITE+150+DALLAS+TX+75229&amp;aq=&amp;sll=32.862876,-96.961433&amp;sspn=0.418151,0.837021&amp;ie=UTF8&amp;hq=&amp;hnear=11117+Harry+Hines+Blvd+%23150,+Dallas,+Texas+75229-4604&amp;t=m&amp;z=14&amp;ll=32.887254,-96.888531">View Larger Map</a></small></div>
</div>
<div class="col-2">
<p style="text-align: right;">At&nbsp;Fashion X,&nbsp;we understand the significance of customer service and we pride our company on making our customers the first priority. We offer quality wholesale clothing and accessories at economical prices with the best customer service. We enjoy a diverse customer base and update our products daily.&nbsp;</p>
<p class="p2" style="text-align: right;">When you shop with us you can be guaranteed that your products will always be the most current trends that you will see in retail stores.&nbsp;</p>
<p class="p2" style="text-align: right;">&nbsp;We strive to guarantee a smooth and easy shopping experience. Orders can be placed online and customer service can be reached by phone or email. We accept Visa and Master card for your convenience. We always&nbsp;ship our&nbsp;products in a timely manner and once we receive the order we ship that same day if it is made during our business hours 10:00AM-7:00PM (central standard time)</p>
<p class="p1" style="text-align: right;">-Fashion-X Staff-</p>
<p class="p1" style="text-align: right;">11117 HARRY HINES BLVD SUITE 150 DALLAS TX 75229</p>
<p class="p1" style="text-align: right;">PHONE &amp; FAX: 972-243-1466</p>
<p class="p1" style="text-align: right;">LANA: 214-497-8234</p>
<p class="p1" style="text-align: right;">EMAIL: <a href="mailto:lanasfashionx@gmail.com">lanasfashionx@gmail.com</a></p>
<p class="p1" style="text-align: right;"><a href="https://www.facebook.com/FashionXShop">https://www.facebook.com/FashionXShop</a></p>
<p class="p1" style="text-align: right;">BUSINESS HOURS: MONDAY-SATURDAY: 10:00AM TO 6:30PM</p>
<p class="p1" style="text-align: right;">SUNDAY-11:00AM TO 4:30PM</p>
</div>
</div>

 

Re: Google Map embedding

I used that second code and it shows correct on the content tab but when viewing it on the webpage it looks like this:

 

Website

Web Developer/Marketing Expert

Re: Google Map embedding

Alright I was able to correct that issue by <div class="col3-set" style="width: 150%;">. Thanks for the help Smiley Happy

Web Developer/Marketing Expert

Re: Google Map embedding

I just noticed that by increasing that to 150% it creates a white border on the right hand side of the page. Any way to resolve this?

 

 

 

 

Web Developer/Marketing Expert

Re: Google Map embedding

you'll want to keep it at 100%,

Paste your code your using again.

Re: Google Map embedding

<div class="page-title">
<h1>About Fashion X</h1>
<p style="text-align: left;">&nbsp;</p>
</div>
<div class="col3-set" style="width:100%" >
<style>
      .col3-set{
        float:left;
        position:relative;
        width:100%;
        float:left;
      }
      .col-1{
        float:left;
        position:relative;
        width:48%;
        float:left;
      }
      .col-2{
        float:left;
        position:relative;
        width:48%;
        float:left;
      }
    </style> 
<div class="col-1">
<div style="text-align: left;"><iframe src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=11117+HARRY+HINES+BLVD+SUITE+150+DALLAS+TX+75229&amp;aq=&amp;sll=32.862876,-96.961433&amp;sspn=0.418151,0.837021&amp;ie=UTF8&amp;hq=&amp;hnear=11117+Harry+Hines+Blvd+%23150,+Dallas,+Texas+75229-4604&amp;t=m&amp;z=14&amp;ll=32.887254,-96.888531&amp;output=embed" height="378" width="461"></iframe>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br /><small><a style="color: #0000ff; text-align: left;" href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=11117+HARRY+HINES+BLVD+SUITE+150+DALLAS+TX+75229&amp;aq=&amp;sll=32.862876,-96.961433&amp;sspn=0.418151,0.837021&amp;ie=UTF8&amp;hq=&amp;hnear=11117+Harry+Hines+Blvd+%23150,+Dallas,+Texas+75229-4604&amp;t=m&amp;z=14&amp;ll=32.887254,-96.888531">View Larger Map</a></small></div>
</div>
<div class="col-2">
<p style="text-align: right;">At&nbsp;Fashion X,&nbsp;we understand the significance of customer service and we pride our company on making our customers the first priority. We offer quality wholesale clothing and accessories at economical prices with the best customer service. We enjoy a diverse customer base and update our products daily.&nbsp;</p>
<p class="p2" style="text-align: right;">When you shop with us you can be guaranteed that your products will always be the most current trends that you will see in retail stores.&nbsp;</p>
<p class="p2" style="text-align: right;">&nbsp;We strive to guarantee a smooth and easy shopping experience. Orders can be placed online and customer service can be reached by phone or email. We accept Visa and Master card for your convenience. We always&nbsp;ship our&nbsp;products in a timely manner and once we receive the order we ship that same day if it is made during our business hours 10:00AM-7:00PM (central standard time)</p>
<p class="p1" style="text-align: right;">-Fashion-X Staff-</p>
<p class="p1" style="text-align: right;">11117 HARRY HINES BLVD SUITE 150 DALLAS TX 75229</p>
<p class="p1" style="text-align: right;">PHONE &amp; FAX: 972-243-1466</p>
<p class="p1" style="text-align: right;">LANA: 214-497-8234</p>
<p class="p1" style="text-align: right;">EMAIL: <a href="mailto:lanasfashionx@gmail.com">lanasfashionx@gmail.com</a></p>
<p class="p1" style="text-align: right;"><a href="https://www.facebook.com/FashionXShop">https://www.facebook.com/FashionXShop</a></p>
<p class="p1" style="text-align: right;">BUSINESS HOURS: MONDAY-SATURDAY: 10:00AM TO 6:30PM</p>
<p class="p1" style="text-align: right;">SUNDAY-11:00AM TO 4:30PM</p>
</div>
</div>

 

Web Developer/Marketing Expert

Re: Google Map embedding

@Mattw11486 

what about trying something like::


<h3>Welcome to the real-time HTML editor!</h3>
<p>Type HTML in the textarea above, and it w<div class="page-title">
<h1>About Fashion X</h1>
<p style="text-align: left;">&nbsp;</p>
</div>
<div class="col3-set">
<style>
      .col3-set{
        float:left;
        position:relative;
        float:left;
      }
      .col-1{
        float:left;
        position:relative;
        width:48%;
        float:left;
      }
      .col-2{
        float:right;
        position:relative;
        width:48%;
        float:right;
      }
    </style> 
<div class="col-1">
<div style="text-align: left;"><iframe src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=11117+HARRY+HINES+BLVD+SUITE+150+DALLAS+TX+75229&amp;aq=&amp;sll=32.862876,-96.961433&amp;sspn=0.418151,0.837021&amp;ie=UTF8&amp;hq=&amp;hnear=11117+Harry+Hines+Blvd+%23150,+Dallas,+Texas+75229-4604&amp;t=m&amp;z=14&amp;ll=32.887254,-96.888531&amp;output=embed" height="378" width="461"></iframe>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br /><small><a style="color: #0000ff; text-align: left;" href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=11117+HARRY+HINES+BLVD+SUITE+150+DALLAS+TX+75229&amp;aq=&amp;sll=32.862876,-96.961433&amp;sspn=0.418151,0.837021&amp;ie=UTF8&amp;hq=&amp;hnear=11117+Harry+Hines+Blvd+%23150,+Dallas,+Texas+75229-4604&amp;t=m&amp;z=14&amp;ll=32.887254,-96.888531">View Larger Map</a></small></div>
</div>
<div class="col-2">
<p style="text-align: right;">At&nbsp;Fashion X,&nbsp;we understand the significance of customer service and we pride our company on making our customers the first priority. We offer quality wholesale clothing and accessories at economical prices with the best customer service. We enjoy a diverse customer base and update our products daily.&nbsp;</p>
<p class="p2" style="text-align: right;">When you shop with us you can be guaranteed that your products will always be the most current trends that you will see in retail stores.&nbsp;</p>
<p class="p2" style="text-align: right;">&nbsp;We strive to guarantee a smooth and easy shopping experience. Orders can be placed online and customer service can be reached by phone or email. We accept Visa and Master card for your convenience. We always&nbsp;ship our&nbsp;products in a timely manner and once we receive the order we ship that same day if it is made during our business hours 10:00AM-7:00PM (central standard time)</p>
<p class="p1" style="text-align: right;">-Fashion-X Staff-</p>
<p class="p1" style="text-align: right;">11117 HARRY HINES BLVD SUITE 150 DALLAS TX 75229</p>
<p class="p1" style="text-align: right;">PHONE &amp; FAX: 972-243-1466</p>
<p class="p1" style="text-align: right;">LANA: 214-497-8234</p>
<p class="p1" style="text-align: right;">EMAIL: <a href="mailto:lanasfashionx@gmail.com">lanasfashionx@gmail.com</a></p>
<p class="p1" style="text-align: right;"><a href="https://www.facebook.com/FashionXShop">https://www.facebook.com/FashionXShop</a></p>
<p class="p1" style="text-align: right;">BUSINESS HOURS: MONDAY-SATURDAY: 10:00AM TO 6:30PM</p>
<p class="p1" style="text-align: right;">SUNDAY-11:00AM TO 4:30PM</p>
</div>
</div>ill magically appear in the frame below.</p>