Error with formatting google map api. Cannot view google map embedded with api -


i have embedded map using iframe , want change using api. i've used code google website test, added api key, map doesn't show on webpage. ideas i'm doing wrong? http://www.lithicsireland.ie/archaeology_projects_irish_lithic_landscapes_chert_provenancing.html code i've used is:

<script type="text/javascript">   function initialize() {     var mapoptions = {       center: { lat: -34.397, lng: 150.644},       zoom: 8     };     var map = new google.maps.map(document.getelementbyid('mapbox'),         mapoptions);   }   google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body onload="initialize()">  <div class="mapcontainer"><div class="mapbox"></div> </div>

and in css have:

      .mapcontainer {     float: left;     width: 100%;     margin: 0em 5%;     padding: 1em;     }      .mapbox {     float: left;     width: 90%;     margin: 0em 5%;     padding: 1em;     }

there no div id="mapbox' on page (it has class of "mapbox").

it works if use getelementsbyclassname('mapbox')[0] reference map (and give reasonable height).

function initialize() {     var mapoptions = {         center: {             lat: -34.397,             lng: 150.644         },         zoom: 8     };     var map = new google.maps.map(document.getelementsbyclassname('mapbox')[0],     mapoptions); } google.maps.event.adddomlistener(window, 'load', initialize);

working fiddle

code snippet:

function initialize() {    var mapoptions = {      center: {        lat: -34.397,        lng: 150.644      },      zoom: 8    };    var map = new google.maps.map(document.getelementsbyclassname('mapbox')[0],      mapoptions);  }  google.maps.event.adddomlistener(window, 'load', initialize);
.mapcontainer {    width: 500px;    height: 500px;    margin: 0em 5%;    padding: 1em;  }  .mapbox {    width: 400px;    height: 400px;    margin: 0em 5%;    padding: 1em;  }
<script src="https://maps.googleapis.com/maps/api/js"></script>  <div class="d2 box">    <ul>      <li>lithics ireland consultancy</li>      <li><a href="https://plus.google.com/100271090634486556106" rel="author"> killian driscoll</a>        </li>      <li>lithicsireland@gmail.com</li>      <li>galway, ireland</li>    </ul>  </div>  <div class="d2 box">    <div class="mapcontainer">      <div class="mapbox"></div>    </div>  </div>

if want use id="mapbox" works also:

working jsfiddle

code snippet:

function initialize() {    var mapoptions = {      center: {        lat: -34.397,        lng: 150.644      },      zoom: 8    };    var map = new google.maps.map(document.getelementbyid('mapbox'),      mapoptions);  }  google.maps.event.adddomlistener(window, 'load', initialize);
.mapcontainer {    width: 500px;    height: 500px;    margin: 0em 5%;    padding: 1em;  }  #mapbox {    width: 400px;    height: 400px;    margin: 0em 5%;    padding: 1em;  }  html,  body {    width: 100%;    height: 100%;  }
<script src="https://maps.googleapis.com/maps/api/js"></script>  <div class="d2 box">    <ul>      <li>lithics ireland consultancy</li>      <li><a href="https://plus.google.com/100271090634486556106" rel="author"> killian driscoll</a>        </li>      <li>lithicsireland@gmail.com</li>      <li>galway, ireland</li>    </ul>  </div>  <div class="d2 box">    <div class="mapcontainer">      <div id="mapbox"></div>    </div>  </div>


Comments

Post a Comment