Skip to content

Instantly share code, notes, and snippets.

@gera3d

gera3d/Maps.html

Last active November 28, 2018 19:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gera3d/dbbf7ecb5a5b2dd0d90bbb848e1336eb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gera3d/dbbf7ecb5a5b2dd0d90bbb848e1336eb to your computer and use it in GitHub Desktop.
Download ZIP
Maps for about us pages and the bottom of the homepage
Raw
Maps.html
<div class="row" style="text-align:center;">
<div class="col-xs-12 col-sm-6">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3454.6555233796084!2d-90.20024648506468!3d30.0180461818919!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8620b0e2e0d8911f%3A0x1d05252d5ad4e2e3!2sOral+Surgery+Services+LLC!5e0!3m2!1sen!2sus!4v1522342311781" width="1144" height="450" frameborder="0" style="border:1" allowfullscreen></iframe>
<p></p>
<h3><a href="/contact-us-wenatchee-wa/">Springfield</a></h3>
<p>4420 Conlin St, Suite 203, LA 70056<br>
<strong>Phone:</strong> (504) 455-9960 – <strong>Fax:</strong> (504) 455-9961</p>
</div>
<div class="col-xs-12 col-sm-6">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3459.393906256043!2d-90.02913738506813!3d29.881748581941785!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8620a732b5bad4f9%3A0x4713b20ba0d93b97!2sOral+Surgery+Services!5e0!3m2!1sen!2sus!4v1522342336559" width="1144" height="450" frameborder="0" style="border:1" allowfullscreen></iframe>
<p></p>
<h3><a href="/contact-us-wenatchee-wa/">Jacksonville</a></h3>
<p>250 Ochsner Blvd, Suite 104 Gretna, LA 70056<br>
<strong>Phone:</strong> (504) 433-4455 – <strong>Fax:</strong> (504) 433-4450</p>
</div>
</div>
@gera3d

gera3d commented Apr 25, 2018 •
edited
Loading

Copy link
Copy Markdown
Author

Here is the code for just 1 map.

<div class="row" style="text-align:center;">
	<div class="col-xs-12 col-sm-12">
		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3454.6555233796084!2d-90.20024648506468!3d30.0180461818919!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8620b0e2e0d8911f%3A0x1d05252d5ad4e2e3!2sOral+Surgery+Services+LLC!5e0!3m2!1sen!2sus!4v1522342311781" width="1144" height="450" frameborder="0" style="border:1" allowfullscreen></iframe>
		<p></p>
		<h3><a href="/contact-us-metairie-la/"> Metairie </a></h3>
		<p>701 Metairie Rd, Ste 1A-204	Metairie, LA 70005<br>
		<strong>Phone:</strong> (504) 835-1349 – <strong>Fax:</strong> (504) 832-3180</p>
	</div>
</div>

@gera3d

gera3d commented May 2, 2018 •
edited
Loading

Copy link
Copy Markdown
Author

Here is 4 locations at the bottom on the homepage:

<div class="row no-gutters">
  <div class="col-md-12 col-lg-6 text-center gmap" style="height: 450px;">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3066.420247570686!2d-89.7134683846235!3d39.77512337944488!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88754777df217e4f%3A0x7ce2385be0119df3!2sSpringfield+Associates+in+Oral+%26+Maxillofacial+Surgery%2C+Ltd.!5e0!3m2!1sen!2sus!4v1521241413544" width="1144" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>
  
  <div class="col-md-12 col-lg-6 text-center gmap" style="height: 450px;">
  <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d392609.25183307746!2d-90.2649135!3d39.7562754!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87dfe97ebdd97a97%3A0x6f03fdaf7b7491ee!2sSpringfield+Associates+in+Oral+%26+Maxillary+Surgery%2C+Ltd.!5e0!3m2!1sen!2sus!4v1521241402849" width="1144" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>

  <div class="col-md-12 col-lg-6 text-center gmap" style="height: 450px;">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3092.6530978239166!2d-89.66545618464119!3d39.182606379527705!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8875a2e287a66d27%3A0xfe9bd22cfe944e13!2sSpringfield+Associates+Oral+%26+Maxillofacial+Surgery%2C+Ltd!5e0!3m2!1sen!2sus!4v1521241390100" width="1144" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>
  
  <div class="col-md-12 col-lg-6 text-center gmap" style="height: 450px;">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.9339360102795!2d-88.9548717846198!3d39.898111379428826!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8874b21c9334fc6b%3A0x4ca8b9ea7d2aa540!2s345+E+Ash+Ave+Suite+A%2C+Decatur%2C+IL+62526!5e0!3m2!1sen!2sus!4v1521241369884" width="1144" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>
</div>

@gera3d

gera3d commented May 2, 2018 •
edited
Loading

Copy link
Copy Markdown
Author

Here are 2 Maps for the bottom of the homepage:

<div class="row no-gutters">
  <div class="col-md-12 col-lg-6 text-center gmap" style="height: 450px;">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3445.2576142416865!2d-89.77798608505786!3d30.286726981794832!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x889de4281c0f9b37%3A0xd1e55eb3d8a4dc47!2sNorthlake+Oral+%26+Maxillofacial!5e0!3m2!1sen!2sus!4v1523549965468" width="1144" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>
  
  <div class="col-md-12 col-lg-6 text-center gmap" style="height: 450px;">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3441.280662379762!2d-90.11076868505494!3d30.399777981754454!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86275bafa6e58921%3A0xd12b7906a9a6ce8e!2sNorthlake+Oral+Maxillofacial!5e0!3m2!1sen!2sus!4v1523549992191" width="1144" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>
</div>

@gera3d

gera3d commented May 11, 2018 •
edited
Loading

Copy link
Copy Markdown
Author

I have also been using this to add borders to the iframes. I will add it to the canvas site. You have to change the border color manually for now until I graft this into the codebase.

iframe{
border:2px solid #7FC052 !important; 
}

@media (min-width:1025px) { 
  .homepage_maps {height: 400px !important; overflow: hidden;}
}

@gera3d

gera3d commented Aug 7, 2018

Copy link
Copy Markdown
Author

OK this code is for 3 maps on the about us page

<div class="row" style="text-align:center;">

<div class="col-md-12 col-lg-12">
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d11682.195027074546!2d-83.718468!3d42.945639!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x81677f0eb5f352a5!2sGreater+Michigan+Oral+Surgeons+%26+Dental+Implant+Center!5e0!3m2!1sen!2sus!4v1449264170742" width="778" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<p></p>
<h3><a href="/contact-us-flint-mi/">Flint</a></h3>
<p>5417 Gateway Centre Flint, MI 48507<br>
<strong>Phone:</strong> (810) 424-0705 </p>
</div>

<div class="col-md-12 col-lg-6">
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d11580.036298484207!2d-83.969843!3d43.481281!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xa4710a9650a658b0!2sGreater+Michigan+Oral+Surgeons+%26+Dental+Implant+Center!5e0!3m2!1sen!2sus!4v1493763297657" width="758" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<p></p>
<h3><a href="/contact-us-saginaw-mi/">Saginaw</a></h3>
<p>5150 Fashion Square Blvd Saginaw, MI 48604<br>
<strong>Phone:</strong> (989) 401-6591</p>
</div>

<div class="col-lg-6 col-md-12">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2889.3367550861944!2d-83.88915298450401!3d43.599529479123156!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6736af38e776fc86!2sGreater+Michigan+Oral+Surgeons+%26+Dental+Implant+Center!5e0!3m2!1sen!2sus!4v1493760259993" width="858" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<p></p>
<h3><a href="/contact-us-bay-city-mi/">Bay City</a></h3>
<p>916 Washington Ave. #914 Bay City, MI 48708<br>
<strong>Phone:</strong> (989) 892-9341
</div>

</div>

@gera3d

gera3d commented Nov 28, 2018

Copy link
Copy Markdown
Author

The maps stopped breaking out the reviews for maps going 3 across. Here is the solution.

<div class="row no-gutters">
  <div class="col-md-12 col-lg-12 text-center gmap" style="height: 450px;">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2924.0064324152313!2d-112.43754788452728!3d42.87270837915579!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x53554f3a198cdb73%3A0xca4e6a4de230c26e!2sFacial+%26+Oral+Surgery+Associates!5e0!3m2!1sen!2sus!4v1541179676920" width="1144" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>
  
  <div class="col-md-12 col-lg-6 text-center gmap" style="height: 450px;">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2908.5413435270175!2d-112.35904458451701!3d43.19813377913956!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5355100be6f3c42d%3A0x90e4019dbc60c2d2!2sFacial+%26+Oral+Surgery+Associates!5e0!3m2!1sen!2sus!4v1541179689756" width="1144" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>

  <div class="col-md-12 col-lg-6 text-center gmap" style="height: 450px;">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2960.566293029311!2d-111.87856338455204!3d42.095341179205505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8754f7ebb6d7e383%3A0x66dd40f6617e0e12!2sFacial+%26+Oral+Surgery+Associates!5e0!3m2!1sen!2sus!4v1541179699152" width="1144" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>
  
</div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment