<\/a><\/p>\n O primeiro passo \u00e9 ter em m\u00e3os a latitude e longitude do local\u00a0que voc\u00ea deseja exibir em seu site.<\/p>\n Neste exemplo, vamos encontrar as coordenadas do Maracan\u00e3. Dessa forma, usaremos a cidade do Rio de Janeiro nesse exemplo.<\/p>\n Primeiramente, acesse o Google Maps em https:\/\/maps.google.com . Em seguida, digite o endere\u00e7o ou o nome do local. Neste exemplo, digitaremos “Maracan\u00e3”.<\/p>\n Uma vez tendo localizado o ponto exato, clique com o bot\u00e3o direito do mouse<\/strong>\u00a0sobre o local. Ent\u00e3o, clique em O que h\u00e1 aqui?<\/strong><\/p>\n Desta forma, o GoogleMaps exibir\u00e1 o nome da rua aonde voc\u00ea clicou, junto as coordenadas.<\/p>\n Em nosso exemplo, as coordenadas s\u00e3o:<\/p>\n Latitude: -22.912869 O modo mais f\u00e1cil de inserir o Google Maps em seu site, \u00e9 atrav\u00e9s de uma simples tag <img>. Esta API simples n\u00e3o requer uma API KEY (Chave da API do Google Maps). \u00c9 de livre uso, e pode ser implantado em qualquer site.<\/p>\n O c\u00f3digo padr\u00e3o \u00e9 este. Portanto, basta substituir LAT<\/strong> pela Latitude e LONG<\/strong> pela Longitude.<\/p>\n Explicando cada parametro:<\/p>\n <\/p>\n Exemplo de c\u00f3digo do Google Maps com as coordenadas do Maracan\u00e3:<\/p>\n Como resultado:<\/p>\n Agora, tamb\u00e9m aumentaremos o valor do parametro zoom para 15, aumentando o zoom. Exemplo:<\/p>\n Como resultado:<\/p>\n Exemplo adicionando um marcador ao mapa. Adicionaremos um marcador na esta\u00e7\u00e3o de Metr\u00f4, que possui as coordenadas\u00a0-22.909410, -43.232954 .<\/p>\n Para adicionar um marcador, basta incluir o parametro markers<\/strong>: \u00a0\u00a0…&markers=color:COR|LAT, LONG&….<\/p>\n Este parametro deve ser inserido na tag <img>. Contudo, repare que a latitude e longitude do parametro markers \u00e9 diferente das coordenadas principais do nosso mapa.<\/p>\n Resultado:<\/p>\n O Google tamb\u00e9m permite a inclus\u00e3o de um mapa din\u00e2mico, aonde se pode dar zoom e fazer movimentos pela regi\u00e3o.<\/p>\n Este m\u00e9todo requer uma chave de API do Google (ou API KEY Google Maps). Dessa forma, voc\u00ea pode obter instru\u00e7\u00f5es sobre como obter uma chave neste link<\/a>.<\/p>\n Em seguida, com a sua chave da API em m\u00e3os, utilize este exemplo de c\u00f3digo:<\/p>\n Resultado:<\/p>\nIdentificando suas coordenadas<\/h3>\n
![\"inserir](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2016\/06\/inserir-google-maps-no-site-1.jpg\")
<\/p>\n![\"inserir](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2016\/06\/inserir-google-maps-no-site-2-2.jpg\")
<\/p>\n![\"inserir](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2016\/06\/inserir-google-maps-no-site-3.jpg\")
<\/p>\n
\nLongitude: -43.228963
\n<\/a><\/p>\nModo simples, inserindo o Google Maps atrav\u00e9s de uma imagem<\/h3>\n
<img src=\"http:\/\/maps.googleapis.com\/maps\/api\/staticmap?center=LAT, LONG\r\n&zoom=11&size=250x250\"><\/pre>\n
\n
<img src=\"http:\/\/maps.googleapis.com\/maps\/api\/staticmap?center=-22.912869, -43.228963\r\n&zoom=11&size=250x250\"><\/pre>\n
![\"como-incluir-um-mapa-do-google-maps-03\"](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2016\/06\/como-incluir-um-mapa-do-google-maps-03.png\")
<\/p>\n<img src=\"http:\/\/maps.googleapis.com\/maps\/api\/staticmap?center=-22.912869, -43.228963\r\n&zoom=15&size=250x250\"><\/pre>\n
![\"como-incluir-um-mapa-do-google-maps-01\"](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2016\/06\/como-incluir-um-mapa-do-google-maps-01.png\")
<\/p>\n<img src=\"http:\/\/maps.googleapis.com\/maps\/api\/staticmap?center=-22.912869,-43.2289638\r\n&zoom=15&markers=color:red|-22.909410,-43.2329548&size=250x250\"><\/pre>\n
![\"como-incluir-um-mapa-do-google-maps-02\"](\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2016\/06\/como-incluir-um-mapa-do-google-maps-02.png\")
\n<\/a><\/p>\nAPI do Google Maps por Javascript: modo avan\u00e7ado<\/h3>\n
<html>\r\n <head>\r\n <title>Meu mapa exemplo<\/title>\r\n <style>\r\n #mapa {\r\n height:400px;\r\n width:400px;\r\n }\r\n <\/style>\r\n <\/head>\r\n <body>\r\n <div id=\"mapa\"><\/div>\r\n <script>\r\n\r\n function inicializar() {\r\n var coordenadas = {lat: -22.912869, lng: -43.228963};\r\n\r\n var mapa = new google.maps.Map(document.getElementById('mapa'), {\r\n zoom: 15,\r\n center: coordenadas \r\n });\r\n\r\n var marker = new google.maps.Marker({\r\n position: coordenadas,\r\n map: mapa,\r\n title: 'Meu marcador'\r\n });\r\n }\r\n <\/script>\r\n <script async defer\r\n src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=SUA_CHAVE_API_DO_GOOGLE&callback=inicializar\">\r\n <\/script>\r\n <\/body>\r\n<\/html><\/pre>\n