Colocar mapa dentro de DIV (article)

[rdpacato 2]

Olá Pessoal,

 

Tenho que colocar o mapa (do google) dentro de uma DIV (article) que já está com a formatação que quero no CSS, mas não está carregando o mapa dentro da mesma:

  <article class="module width_full">
			<header><h3>Basic Styles</h3></header>
				<div class="module_content">
					<div id="map-canvas"></div>
				</div>
		</article>

[guilomaker 31]

e onde você incorporou o mapa ai ?

 

você tem que adicionar o iframe do google.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d114933.92969732478!2d-80.14430655!3d25.81395425!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88d9a6172bfeddb9%3A0x37be1741259463eb!2sMiami+Beach%2C+FL%2C+USA!5e0!3m2!1spt-BR!2sbr!4v1428701048743" width="600" height="450" frameborder="0" style="border:0"></iframe>

[rdpacato 2]

Olá amigo... não é apenas o mapa.. é o mapa que modificarei com JS... então vc faz apenas a chamada do resultado com o <div id="map-canvas"></div>

 

 

O mapa foi construído aqui:

   <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
// This example creates circles on the map, representing
// populations in North America.

// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap['chicago'] = {
  center: new google.maps.LatLng(41.878113, -87.629798),
  population: 2714856
};
citymap['newyork'] = {
  center: new google.maps.LatLng(40.714352, -74.005973),
  population: 8405837
};


var cityCircle;

function initialize() {
  // Create the map.
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(37.09024, -95.712891),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    var populationOptions = {
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    };
    // Add the circle for this city to the map.
    cityCircle = new google.maps.Circle(populationOptions);
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>

[rdpacato 2]

Consegui por este site:

 

http://pt.stackoverflow.com/questions/806/como-centralizar-horizontalmente-uma-div-dentro-de-outra

[guilomaker 31]

Consegui por este site:

 

http://pt.stackoverflow.com/questions/806/como-centralizar-horizontalmente-uma-div-dentro-de-outra

 

que bom que resolveu, e você não falou que estava usando um js :dormindo: