Skip to main content
removeu 1 caractere do conteúdo
Fonte Link
Danizavtz
  • 3,8mil
  • 12
  • 19
  • 32

Uma maneira de resolver o problema é adicionar um customcontrol na instância do google maps.

Isso vai adicionar um controle personalizado em uma camada acima do mapa, é possível escolher a posição onde ele será visualizado. Em meu exemplo estou usando na posição top center mas existem várias possíbilidades para posicionar o elemento de acordo com o que deseja. Ref

Como colocar um card fixo e responsivo em cima do mapa?

Para isso basta adicionar a classe css style width: 100% ao seu controle.

Segue o código que deixa o controle responsivo:

   #mensagem {
       width: 50%;
   }

Repare que aqui estamos atribuindo esta classe css ao elemento com id "mensagem".


Segue o exemplo completo que mostra como adicionar um controle personalizado:
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Custom control gmap</title>
  <style>
    #map-canvas {
      height: 700px;100%;
      width: 100%;
    }

    #mensagem {
      font-family: Arial, sans-serif;
      background: #522;
      width: 50%;
    }
 </style>
</head>
<body>
  <div id="map-canvas"></div>
  <div id="mensagem">
    <h3>Minha região</h3>
  </div>
  <script>
    
    showMap = () => {
      const map = new google.maps.Map(document.getElementById('map-canvas'), {
         center: { lat: -7.2245007, lng: -35.8798429}, zoom: 8
      });

      const custommessage = document.getElementById('mensagem');
      
      map.controls[google.maps.ControlPosition.TOP_CENTER].push(custommessage);
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?callback=showMap">
  </script>
</body>
</html>

Explicando o código:

No corpo do html criamos o elemento "map-canvas" que é uma div que receberá a instância do google maps. No elemento "mensagem" inserimos o texto que queremos usar como um controle customizado, este controle personalizado possui o texto "minha região".

Dentro da tag script na função showMap faço a instânciação do google maps e atribuímos ao nosso elemento "map-canvas". O mapa está centralizado na cidade de Campina Grande - PB e possui o zoom com valor 8.

Depois pegamos o elemento "mensagem" e adicionamos como um controle personalizado do nosso mapa, com a posição top-center.

Se quer posicionar o elemento na posição inferior esquerda poderia tentar a posição BOTTOM_LEFT.

Este exemplo foi inspirado na api atual do google maps e seus exemplos.

Uma maneira de resolver o problema é adicionar um customcontrol na instância do google maps.

Isso vai adicionar um controle personalizado em uma camada acima do mapa, é possível escolher a posição onde ele será visualizado. Em meu exemplo estou usando na posição top center mas existem várias possíbilidades para posicionar o elemento de acordo com o que deseja. Ref

Como colocar um card fixo e responsivo em cima do mapa?

Para isso basta adicionar a classe css style width: 100% ao seu controle.

Segue o código que deixa o controle responsivo:

   #mensagem {
       width: 50%;
   }

Repare que aqui estamos atribuindo esta classe css ao elemento com id "mensagem".


Segue o exemplo completo que mostra como adicionar um controle personalizado:
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Custom control gmap</title>
  <style>
    #map-canvas {
      height: 700px;
      width: 100%;
    }

    #mensagem {
      font-family: Arial, sans-serif;
      background: #522;
      width: 50%;
    }
 </style>
</head>
<body>
  <div id="map-canvas"></div>
  <div id="mensagem">
    <h3>Minha região</h3>
  </div>
  <script>
    
    showMap = () => {
      const map = new google.maps.Map(document.getElementById('map-canvas'), {
         center: { lat: -7.2245007, lng: -35.8798429}, zoom: 8
      });

      const custommessage = document.getElementById('mensagem');
      
      map.controls[google.maps.ControlPosition.TOP_CENTER].push(custommessage);
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?callback=showMap">
  </script>
</body>
</html>

Explicando o código:

No corpo do html criamos o elemento "map-canvas" que é uma div que receberá a instância do google maps. No elemento "mensagem" inserimos o texto que queremos usar como um controle customizado, este controle personalizado possui o texto "minha região".

Dentro da tag script na função showMap faço a instânciação do google maps e atribuímos ao nosso elemento "map-canvas". O mapa está centralizado na cidade de Campina Grande - PB e possui o zoom com valor 8.

Depois pegamos o elemento "mensagem" e adicionamos como um controle personalizado do nosso mapa, com a posição top-center.

Se quer posicionar o elemento na posição inferior esquerda poderia tentar a posição BOTTOM_LEFT.

Este exemplo foi inspirado na api atual do google maps e seus exemplos.

Uma maneira de resolver o problema é adicionar um customcontrol na instância do google maps.

Isso vai adicionar um controle personalizado em uma camada acima do mapa, é possível escolher a posição onde ele será visualizado. Em meu exemplo estou usando na posição top center mas existem várias possíbilidades para posicionar o elemento de acordo com o que deseja. Ref

Como colocar um card fixo e responsivo em cima do mapa?

Para isso basta adicionar a classe css style width: 100% ao seu controle.

Segue o código que deixa o controle responsivo:

   #mensagem {
       width: 50%;
   }

Repare que aqui estamos atribuindo esta classe css ao elemento com id "mensagem".


Segue o exemplo completo que mostra como adicionar um controle personalizado:
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Custom control gmap</title>
  <style>
    #map-canvas {
      height: 100%;
      width: 100%;
    }

    #mensagem {
      font-family: Arial, sans-serif;
      background: #522;
      width: 50%;
    }
 </style>
</head>
<body>
  <div id="map-canvas"></div>
  <div id="mensagem">
    <h3>Minha região</h3>
  </div>
  <script>
    
    showMap = () => {
      const map = new google.maps.Map(document.getElementById('map-canvas'), {
         center: { lat: -7.2245007, lng: -35.8798429}, zoom: 8
      });

      const custommessage = document.getElementById('mensagem');
      
      map.controls[google.maps.ControlPosition.TOP_CENTER].push(custommessage);
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?callback=showMap">
  </script>
</body>
</html>

Explicando o código:

No corpo do html criamos o elemento "map-canvas" que é uma div que receberá a instância do google maps. No elemento "mensagem" inserimos o texto que queremos usar como um controle customizado, este controle personalizado possui o texto "minha região".

Dentro da tag script na função showMap faço a instânciação do google maps e atribuímos ao nosso elemento "map-canvas". O mapa está centralizado na cidade de Campina Grande - PB e possui o zoom com valor 8.

Depois pegamos o elemento "mensagem" e adicionamos como um controle personalizado do nosso mapa, com a posição top-center.

Se quer posicionar o elemento na posição inferior esquerda poderia tentar a posição BOTTOM_LEFT.

Este exemplo foi inspirado na api atual do google maps e seus exemplos.

adicionou 834 caracteres ao conteúdo
Fonte Link
Danizavtz
  • 3,8mil
  • 12
  • 19
  • 32

Uma maneira de resolver o problema é adicionar um customcontrol na instância do google maps.

Isso vai adicionar um controle personalizado em uma camada acima do mapa, é possível escolher a posição onde ele será visualizado. Em meu exemplo estou usando na posição top center mas existem várias possíbilidades para posicionar o elemento de acordo com o que deseja. Ref

Como colocar um card fixo e responsivo em cima do mapa?

Não testei a questão da responsividade, masPara isso basta adicionar oa classe css no elemento de acordo com o id do elemento htmlstyle width: 100% ao seu controle.

Segue o exemplo da parte essencialcódigo que mostra como adicionar umdeixa o controle personalizadoresponsivo:

   #mensagem {
       width: 50%;
   }

Repare que aqui estamos atribuindo esta classe css ao elemento com id "mensagem".


Segue o exemplo completo que mostra como adicionar um controle personalizado:
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Custom control gmap</title>
  <style>
    #map-canvas {
      height: 700px;
      width: 100%;
    }

    #mensagem {
      font-family: Arial, sans-serif;
      background: #522;
      width: 50%;
    }
 </style>
</head>
<body>
  <div id="map-canvas"></div>
  <div id="mensagem">
    <h3>Minha região</h3>
  </div>
  <script>
    
    showMap = () => {
      const map = new google.maps.Map(document.getElementById('map-canvas'), {
         center: { lat: -7.2245007, lng: -35.8798429}, zoom: 8
      });

      const custommessage = document.getElementById('mensagem');
      
      map.controls[google.maps.ControlPosition.TOP_CENTER].push(custommessage);
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?callback=showMap">
  </script>
</body>
</html>

Explicando o código:

No corpo do html criamos o elemento "map-canvas" que é uma div que receberá a instância do google maps. No elemento "mensagem" inserimos o texto que queremos usar como um controle customizado, este controle personalizado possui o texto "minha região".

Dentro da tag script na função showMap faço a instânciação do google maps e atribuímos ao nosso elemento "map-canvas". O mapa está centralizado na cidade de Campina Grande - PB e possui o zoom com valor 8.

Depois pegamos o elemento "mensagem" e adicionamos como um controle personalizado do nosso mapa, com a posição top-center.

Se quer posicionar o elemento na posição inferior esquerda poderia tentar a posição BOTTOM_LEFT.

Este exemplo foi inspirado na api atual do google maps e seus exemplos.

Uma maneira de resolver o problema é adicionar um customcontrol na instância do google maps.

Isso vai adicionar um controle personalizado em uma camada acima do mapa, é possível escolher a posição onde ele será visualizado. Em meu exemplo estou usando na posição top center mas existem várias possíbilidades para posicionar o elemento de acordo com o que deseja. Ref

Não testei a questão da responsividade, mas basta adicionar o css no elemento de acordo com o id do elemento html.

Segue o exemplo da parte essencial que mostra como adicionar um controle personalizado:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Custom control gmap</title>
  <style>
    #map-canvas {
      height: 700px;
      width: 100%;
    }

    #mensagem {
      font-family: Arial, sans-serif;
      background: #522;
      width: 50%;
    }
 </style>
</head>
<body>
  <div id="map-canvas"></div>
  <div id="mensagem">
    <h3>Minha região</h3>
  </div>
  <script>
    
    showMap = () => {
      const map = new google.maps.Map(document.getElementById('map-canvas'), {
         center: { lat: -7.2245007, lng: -35.8798429}, zoom: 8
      });

      const custommessage = document.getElementById('mensagem');
      
      map.controls[google.maps.ControlPosition.TOP_CENTER].push(custommessage);
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?callback=showMap">
  </script>
</body>
</html>

Se quer posicionar o elemento na posição inferior esquerda poderia tentar a posição BOTTOM_LEFT.

Este exemplo foi inspirado na api atual do google maps e seus exemplos.

Uma maneira de resolver o problema é adicionar um customcontrol na instância do google maps.

Isso vai adicionar um controle personalizado em uma camada acima do mapa, é possível escolher a posição onde ele será visualizado. Em meu exemplo estou usando na posição top center mas existem várias possíbilidades para posicionar o elemento de acordo com o que deseja. Ref

Como colocar um card fixo e responsivo em cima do mapa?

Para isso basta adicionar a classe css style width: 100% ao seu controle.

Segue o código que deixa o controle responsivo:

   #mensagem {
       width: 50%;
   }

Repare que aqui estamos atribuindo esta classe css ao elemento com id "mensagem".


Segue o exemplo completo que mostra como adicionar um controle personalizado:
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Custom control gmap</title>
  <style>
    #map-canvas {
      height: 700px;
      width: 100%;
    }

    #mensagem {
      font-family: Arial, sans-serif;
      background: #522;
      width: 50%;
    }
 </style>
</head>
<body>
  <div id="map-canvas"></div>
  <div id="mensagem">
    <h3>Minha região</h3>
  </div>
  <script>
    
    showMap = () => {
      const map = new google.maps.Map(document.getElementById('map-canvas'), {
         center: { lat: -7.2245007, lng: -35.8798429}, zoom: 8
      });

      const custommessage = document.getElementById('mensagem');
      
      map.controls[google.maps.ControlPosition.TOP_CENTER].push(custommessage);
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?callback=showMap">
  </script>
</body>
</html>

Explicando o código:

No corpo do html criamos o elemento "map-canvas" que é uma div que receberá a instância do google maps. No elemento "mensagem" inserimos o texto que queremos usar como um controle customizado, este controle personalizado possui o texto "minha região".

Dentro da tag script na função showMap faço a instânciação do google maps e atribuímos ao nosso elemento "map-canvas". O mapa está centralizado na cidade de Campina Grande - PB e possui o zoom com valor 8.

Depois pegamos o elemento "mensagem" e adicionamos como um controle personalizado do nosso mapa, com a posição top-center.

Se quer posicionar o elemento na posição inferior esquerda poderia tentar a posição BOTTOM_LEFT.

Este exemplo foi inspirado na api atual do google maps e seus exemplos.

adicionou 385 caracteres ao conteúdo
Fonte Link
Danizavtz
  • 3,8mil
  • 12
  • 19
  • 32

Uma maneira de resolver o problema é adicionar um customcontrol na instância do google maps.

Isso vai adicionar um controle personalizado em uma camada acima do mapa, é possível escolher a posição onde ele será visualizado. Em meu exemplo estou usando na posição top center mas existem várias possíbilidades para posicionar o elemento de acordo com o que deseja. Ref

Não testei a questão da responsividade, mas basta adicionar o css no elemento de acordo com o id do elemento html.

Segue o exemplo da parte essencial que mostra como adicionar um controle personalizado:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Custom control gmap</title>
  <style>
    #map-canvas {
      height: 700px;
      width: 100%;
    }

    #mensagem {
      font-family: Arial, sans-serif;
      background: #522;
      width: 50%;
    }
 </style>
</head>
<body>
  <div id="map-canvas"></div>
  <div id="mensagem">
    <h3>Minha região</h3>
  </div>
  <script>
    
    showMap = () => {
      const map = new google.maps.Map(document.getElementById('map-canvas'), {
         center: { lat: -7.2245007, lng: -35.8798429}, zoom: 8
      });

      const custommessage = document.getElementById('mensagem');
      
      map.controls[google.maps.ControlPosition.TOP_CENTER].push(custommessage);
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?callback=showMap">
  </script>
</body>
</html>

Se quer posicionar o elemento na posição inferior esquerda poderia tentar a posição BOTTOM_LEFT.

Este exemplo foi inspirado na api atual do google maps e seus exemplos.

Uma maneira de resolver o problema é adicionar um customcontrol na instância do google maps.

Isso vai adicionar um controle personalizado em uma camada acima do mapa, é possível escolher a posição onde ele será visualizado. Em meu exemplo estou usando na posição top center mas existem várias possíbilidades para posicionar o elemento de acordo com o que deseja. Ref

Não testei a questão da responsividade, mas basta adicionar o css no elemento de acordo com o id do elemento html.

Segue o exemplo da parte essencial que mostra como adicionar um controle personalizado:

<body>
  <div id="map-canvas"></div>
  <div id="mensagem">
    <h3>Minha região</h3>
  </div>
  <script>
    
    showMap = () => {
      const map = new google.maps.Map(document.getElementById('map-canvas'), {
         center: { lat: -7.2245007, lng: -35.8798429}, zoom: 8
      });

      const custommessage = document.getElementById('mensagem');
      
      map.controls[google.maps.ControlPosition.TOP_CENTER].push(custommessage);
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?callback=showMap">
  </script>
</body>

Se quer posicionar o elemento na posição inferior esquerda poderia tentar a posição BOTTOM_LEFT.

Este exemplo foi inspirado na api atual do google maps e seus exemplos.

Uma maneira de resolver o problema é adicionar um customcontrol na instância do google maps.

Isso vai adicionar um controle personalizado em uma camada acima do mapa, é possível escolher a posição onde ele será visualizado. Em meu exemplo estou usando na posição top center mas existem várias possíbilidades para posicionar o elemento de acordo com o que deseja. Ref

Não testei a questão da responsividade, mas basta adicionar o css no elemento de acordo com o id do elemento html.

Segue o exemplo da parte essencial que mostra como adicionar um controle personalizado:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Custom control gmap</title>
  <style>
    #map-canvas {
      height: 700px;
      width: 100%;
    }

    #mensagem {
      font-family: Arial, sans-serif;
      background: #522;
      width: 50%;
    }
 </style>
</head>
<body>
  <div id="map-canvas"></div>
  <div id="mensagem">
    <h3>Minha região</h3>
  </div>
  <script>
    
    showMap = () => {
      const map = new google.maps.Map(document.getElementById('map-canvas'), {
         center: { lat: -7.2245007, lng: -35.8798429}, zoom: 8
      });

      const custommessage = document.getElementById('mensagem');
      
      map.controls[google.maps.ControlPosition.TOP_CENTER].push(custommessage);
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?callback=showMap">
  </script>
</body>
</html>

Se quer posicionar o elemento na posição inferior esquerda poderia tentar a posição BOTTOM_LEFT.

Este exemplo foi inspirado na api atual do google maps e seus exemplos.

adicionou 84 caracteres ao conteúdo
Fonte Link
Danizavtz
  • 3,8mil
  • 12
  • 19
  • 32
Carregando
Fonte Link
Danizavtz
  • 3,8mil
  • 12
  • 19
  • 32
Carregando