0

Conforme a postagem realizada em Disable zoom google maps não funciona

O @Samir Braga respondeu o seguinte código:

 <!doctype html>
<html lang="pt,BR">
<head>
    <meta charset="UTF-8">
    <title>API Google Maps V3</title>

    <!-- Inicialização do mapa -->
    <script>
    function initialize() {

  // Exibir mapa;
  var myLatlng = new google.maps.LatLng(-8.0631495, -34.87131120000004);
  var mapOptions = {
    zoom: 17,
    center: myLatlng,
    panControl: false, 
draggable: false,
    zoomControl: false,
    scrollwheel: false,
    // mapTypeId: google.maps.MapTypeId.ROADMAP
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  }
  // Exibir o mapa na div #mapa;
  var map = new google.maps.Map(document.getElementById("mapa"), mapOptions);

  // crio um objeto passando o array de estilos (styles) e definindo um nome para ele;
  var styledMap = new google.maps.StyledMapType(styles, {
    name: "Mapa Style"
  });
  // Aplicando as configurações do mapa
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');

}

// Função para carregamento assíncrono
function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDeHb17So0QupSGO_d6b8X-OyvJ32UQehs&sensor=true&callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;
</script>

    <style>
        #mapa{
            width: 100%;
            height: 500px;
            border: 1px solid #ccc;
        }
    </style>

</head>

<body>
    <div id="mapa"></div>
</body>
</html>

Porém a minha pergunta seria quanto a resposta dele sobre o código. Tentei modificar aqui utilizando essa sugestão e deu certo, ficou muito bom inclusive, mas não aparece o pino (marcador) no local. Apenas o mapa com a minha coordenada ao centro, o marcador no local exato não aparece... portanto, existe algum parâmetro que permita incluir a marcação?

Tentei adicionar "marker" com a coordenada ou algo assim e não consegui.

Obrigado.

1 Resposta 1

0

Tente algo similar a isto:

function initialize() {

  var myLatlng = new google.maps.LatLng(28.3852338, -81.5638743);
  var mapOptions = {
    zoom: 15,
    center: myLatlng,
    panControl: false,
    draggable: false,
    zoomControl: false,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'],
    },
  }

  var map = new google.maps.Map(document.getElementById("mapa"), mapOptions);
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map
  });


}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDeHb17So0QupSGO_d6b8X-OyvJ32UQehs&sensor=true&callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;
<style>
  #mapa {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
  }
</style>

<div id="mapa"></div>

3
  • Funcionou, confesso que tive dificuldade de identificar a diferença entre as rotinas, utilizei apenas a primeira parte já que eu alterei no CSS e não uso a classe "mapa", mas deu certo, ficou no centro... poderia comentar a diferença da sua sugestão para a primeira?
    – Jovi
    Commented 18/01/2016 às 21:10
  • O código que você colou na questão não possuía um marcador portanto jamais funcionaria, e se você aplicasse um marcador também não funcionaria visto que quando você criou um estilo customizado você perdeu as configurações aplicadas no estilo original qual inclui os marcadores. Em suma eu inverti a ordem dos fatores :) mas não coloquei o resto do código porque era redundante sua propriedade styles estava nula, sequer foi inicializada. Commented 19/01/2016 às 2:49
  • Interessante, obrigado Felipe, à princípio resolveu.
    – Jovi
    Commented 19/01/2016 às 21:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .