Integrando o Google Maps em um Form [Parte 1]

O scriptcase é ferramenta maravilhosa, no entanto, a medida que avançamos os nossos conhecimentos em programação o scriptcase, em alguns aspectos, ele vai ficando para trás, o que nos leva a fuçar o scriptcase, testar, testar e testar até que conseguimos fazer alguns hacks e alcançarmos o que desejamos!

Hoje, em muitos projetos, nos deparamos com clientes que querem de alguma forma um serviço de mapas no seu sistema, em especial o Google Maps.

Apesar de gostar e usar muito o Open Street Maps junto com a biblioteca leaflet (mostrarei como integrar em outro post), o Google Maps tem um conjunto de recursos que dependendo da aplicação que você esteja desenvolvendo, o seu uso se torna indispensável.

Sem mais lero lero agora, vamos ao que interessa! Integrar o Google Maps no form do scriptcase e atualizar os campos automaticamente.

O primeiro passo é gerar uma chave API google:

Gerando uma chave API

1. Vá ao Google Cloud Platform Console.
2. No menu drop-down (para ver o menu é só clicar no hambúrguer no canto superior esquerdo), selecione ou crie o projeto que você quer adicionar uma chave API.
3. No menu de navegação, selecione APIs & Serviços > Credenciais.
4. Na página Credenciais, clique em Criar credenciais > Chave de API. 
   Aparecerá uma caixa de diálogo mostrando que uma nova chave API foi criada (uma string criptografada).
5. Clique em Fechar 
   A nova chave API estará listada na página Credenciais abaixo de Chaves de API.

O segundo passo é criar os campos que você necessita na base de dados. No caso do meu cliente, ele necessitava gravar a geolocalização dos seus conveniados para mostrar para os seus clientes em um mapa amplo (abordarei mais a frente em outro post como utilizar o Open Street Maps + Leaflet), e o MySQL é o SGBD utilizado:

Criar campos no banco de dados

CREATE TABLE IF NOT EXISTS `my_schema`.`conveniado` (
  `conveniadoId` INT UNSIGNED NOT NULL AUTO_INCREMENT,
  `conveniadoStatus` CHAR(1) NOT NULL DEFAULT 'Y' COMMENT 'Y = Sim, N = Não',
  `conveniadoNome` VARCHAR(255) NOT NULL,
  `conveniadoLogomarca` BLOB NULL,
  `conveniadoDesconto` VARCHAR(50) NULL,
  `conveniadoDescricao` TEXT NULL DEFAULT NULL,
  `conveniadoSegmentoId` INT(10) UNSIGNED NOT NULL,
  `conveniadoResponsavel` VARCHAR(100) NULL,
  `conveniadoTelefone` VARCHAR(20) NULL,
  `conveniadoEmail` VARCHAR(100) NULL,
  `conveniadoLogradouro` VARCHAR(100) NULL,
  `conveniadoNumero` VARCHAR(10) NULL,
  `conveniadoBairro` VARCHAR(100) NULL,
  `conveniadoCep` VARCHAR(10) NULL,
  `conveniadoCidade` VARCHAR(100) NULL,
  `conveniadoUf` CHAR(2) NULL,
  `conveniadoLat` FLOAT(18,16) NULL,
  `conveniadoLng` FLOAT(18,16) NULL,
  `conveniadoDataHoraCadastro` TIMESTAMP NULL DEFAULT CURRENT_TIMESTAMP(),
  `conveniadoDataHoraAtualizacao` TIMESTAMP NULL ON UPDATE CURRENT_TIMESTAMP(),
  PRIMARY KEY (`conveniadoId`),
  INDEX `fk_conveniado_tbl_segmento1_idx` (`conveniadoSegmentoId` ASC),
  CONSTRAINT `fk_conveniado_tbl_segmento1`
    FOREIGN KEY (`conveniadoSegmentoId`)
    REFERENCES `sindseps`.`tbl_segmento` (`id`)
    ON DELETE NO ACTION
    ON UPDATE NO ACTION)
ENGINE = InnoDB

Note que os campos utilizados para gravar essa informação no banco de dados são:

conveniadoLogradouro VARCHAR(100) NULL,
conveniadoNumero VARCHAR(10) NULL,
conveniadoBairro VARCHAR(100) NULL,
conveniadoCep VARCHAR(10) NULL,
conveniadoCidade VARCHAR(100) NULL,
conveniadoUf CHAR(2) NULL,
conveniadoLat FLOAT(18,16) NULL,
conveniadoLng FLOAT(18,16) NULL

Utilizei o tipo float(18,16) nos campos latitude e longitude, significa dizer que os campos terão até 16 decimais, ficando dessa forma Ex: -37.866963, 144.9784263.

Pronto! Agora vamos para o scriptcase, crie uma aplicação do tipo de formulário e mãos a obra, assunto para o próximo post.