Multiple maps allowed?
I am making a website for my company. We have 47 branches across the united states. Each branch will have it's own page with the google map with their location. Can I do that?
It has been creating a new "wagmp_map_1, wagmp_map_2, wagmp_map_3...etc.
Also, I have not uploaded this to the current website, but I'm hoping when I do the maps will show. Right now they are just showing a gray box. I know I have to get the API key from google when I upload it to the server.
here is how the source code looks currently
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Preferred Pump</title>
<link href="PreferredPumpStyleSheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
-->
</style>
<style type="text/css">
<!--
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
h1 {
color: #F38C1E;
font-size: 30px;
}
h2 {
color: #1FF87E;
font-size: 20px;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
body {
background-image: url(images/wave-bluebg.jpg);
}
a:link {
text-decoration: none;
color: #F88A11;
}
a:visited {
text-decoration: none;
color: #F88A11;
}
a:hover {
text-decoration: none;
color: #F8ED32;
}
a:active {
text-decoration: none;
color: #1FF87E;
}
h4 {
color: #0FF975;
}
-->
</style><script type="text/javascript" src="google_javascript/wagmp_map_12.js">/*wagmp*/</script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA6ruPtUwnL-c9Ea1seceQExQxt3cBa0ppdMyX-2ujS-pI8hRR5hQFWED_V4vwcR39HVzZv4wHsAzKmg">/*wagmp*/</script>
</head>
<body>
<div id = "wholepage">
<div id="header"><img src="images/header_website.png" alt="header" name="header" width="1023" height="142" align="middle" id="header2" /></div>
<div id="body">
<div id = "buttons">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="home.html">Home</a> </li>
<li><a href="company.html">Company</a></li>
<li><a href="products.html">Products</a> </li>
<li><a href="locations.html">Locations</a></li>
<li><a href="marketplace.html">Marketplace</a></li>
<li><a href="suppliers.html">Suppliers</a></li>
<li><a href="awardprogram.html" class="MenuBarItemSubmenu">Award Program</a>
<ul>
<li><a href="lasvegasdap.html">Las Vegas</a></li>
<li><a href="bigpromotiondap.html">Big Promotion</a></li>
<li><a href="catalogdap.html">Cagtalog</a></li>
</ul>
</li>
<li><a href="links.html">Links</a></li>
<li><a href="contactus.html">Contact Us</a></li>
<li><a href="http://www.pulstarmfg.com/">Pulstar</a></li>
</ul>
</div>
<div id = "contentright"> place any image here</div>
<div id = "content">
<div id="contentpicture"><div id="employeepic"></div></div>
<div id="contenttext">
<h1>Denver, CO </h1>
<h4>Preferred Pump & Equipment </h4>
<h4>500 E. 64th Ave.</h4>
<h4>Denver, CO 80229 </h4>
<p>866-478-6336 (Toll Free)<br />
303-853-8855<br />
303-853-8866 (Fax)</p>
<p>Branch Manager: <a href="mailto:efilter@preferredpump.com"><strong>Eric Filter</strong></a><br />
E-Mail: <a href="mailto:efilter@preferredpump.com"><strong>efilter@preferredpump.com</strong></a><br />
<br />
Group Manager: <a href="mailto:mfloyd@preferredpump.com"><strong>Mike Floyd</strong></a><br />
E-Mail: <a href="mailto:mfloyd@preferredpump.com"><strong>mfloyd@preferredpump.com</strong></a></p>
<p><a href="locations.html">Back to Locations</a></p>
</div><div id="googlemap"><div id="wagmp_map_12" style="width: 300px; height: 300px;"></div></div>
<div id="contentimages">
<div id="gallery1" class="lbGallery">
<ul>
<li> <a href="images/Br 32 - Santa Maria/IMG_0013.JPG" title=""> <img src="images/Br 32 - Santa Maria/IMG_0013-crop.jpg" alt="" name="br32employees" width="75" height="75" id="br32employees" /> </a> </li>
<li> <a href="images/Br 32 - Santa Maria/Br 32 customers.JPG" title=""> <img src="images/Br 32 - Santa Maria/Br 32 customers.JPG" width="75" height="75" alt="" /> </a> </li>
<li> <a href="images/Br 32 - Santa Maria/Mr and Mrs Lyne.JPG" title=""> <img src="images/Br 32 - Santa Maria/Mr and Mrs Lyne.JPG" width="75" height="75" alt="" /> </a> </li>
<li> <a href="images/Br 32 - Santa Maria/Br 32 giveaways.JPG" title=""> <img src="images/Br 32 - Santa Maria/Br 32 giveaways.JPG" width="75" height="75" alt="" /> </a> </li>
<li> <a href="images/Br 32 - Santa Maria/tom bowers.jpg" title=""> <img src="images/Br 32 - Santa Maria/tom bowers.jpg" width="75" height="75" alt="" /> </a> </li>
</ul>
</div>
<script type="text/javascript">
// BeginWebWidget lightbox_gallery
$(function() {
$('#gallery1 a').lightBox();
});
// EndWebWidget lightbox_gallery
</script>
</div>
</div>
</div>
<div id="footer"><img src="images/footer_website.png" alt="footer" name="footer" width="1024" height="135" border="0" align="middle" usemap="#footerMap" id="footer" />
<map name="footerMap" id="footerMap">
<area shape="rect" coords="259,90,333,115" href="contactus.html" alt="contacus" />
<area shape="rect" coords="341,91,397,114" href="news.html" alt="news" />
<area shape="rect" coords="405,88,461,115" href="faqs.html" alt="faqs" />
<area shape="rect" coords="466,91,592,114" href="privacypolicy.html" alt="privacypolicy" />
<area shape="rect" coords="601,90,654,114" href="legal.html" alt="legal" />
<area shape="rect" coords="663,90,763,114" href="downloads.html" alt="downloads" />
</map>
</div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<script type="text/javascript" src="google_javascript/wagmp_maps.js">/*wagmp*/</script>
</body>
</html>