Google Map

by davidxmartins

HTML

<div class="mapouter">
<div class="gmap_canvas">

<iframe width="100%" height="450" id="gmap_canvas" src="https://maps.google.com/maps?q=Carv%C3%A3o%20Melro,%20Casal%20de%20S%C3%A3o%20Jo%C3%A3o&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>

</div>
</div>


<!--
NOTES:
01. First you have to add the missing place to Google maps which will iniciate the process of creating a Google Business page. Validate via code sent to email associated with the domail submited in the company details. In Google My Business you new company should appear there awaiting validation (this is a second validation made via postcard, and not ncessary to place a custom pin with the company name on a map and embeding it on a site). The process is as complicated and confusing as to be expected from Google. Waite about an hour after this.

02. Go to a imbed google map generator, such as these:
https://www.googlemapsiframegenerator.com/
https://www.embedgooglemap.net/
Enter the company name and address and it should appear immidiatly.
You may notice the pin looks small and and the leters are black. Guive it another hour and generate the map again, now the pin should appear bigger and the letters in red. The generated code is also shorter. Copy the generated iframe and guive it 100% with and heith.
-->

CSS

body {margin:0; padding:0;}


.mapouter {
position: relative;
text-align: right;
height: 400px;
width: 100%;
}
.gmap_canvas {
overflow:hidden;
background:none!important;
height: 100%;
width: 100%;
}
iframe {
  width: 100%;
  height: 100%;
}