API PLANEIRO APRENDIZADO

LIVE PREVIEWBUY FOR $22

A) Detalhes – principal

Planejador de rota antecipado é uma ferramenta A a BOTHPLANNER escrita em JavaScript puro com Google mapa ver. 3 API. tem recursos muito avançados como:

1) Camada climática adicionada no mapa do Google com API OpenWeather
2) Calculadora de trânsito adicionada
3) Pesquisa de local adicionada em todas as caixas de texto de localização.
4) Corrigidos erros.
5) Calculadora de combustível.
6) Classificação de locais.
7) seção de ajuda adicionada.
8) Seleção de unidade de distância adicionada.
9) CSS otimizado, JS para minimizar o carregamento da página.
10) Camada de tráfego adicionada.
11) Caixa de pesquisa para localização próxima.
12) Detecção de localização automática.
13) Adicionou lugares no Google nas proximidades.
14) Agora você pode adicionar vários waypoints
15) Obtenha a rota mais curta de vários waypoints
16) Obtenha o custo da viagem / excursão por calculadora de custos
17) Converta KM em milhas facilmente
18) Responsabilidade.
19) Google Adsense.
20) Rota de arrastar, ajuste a rota conforme sua exigência.
21) Compartilhe o gerador de link capaz.
22) Botão de impressão.
23) Altere a linguagem do mapa do Google.
24) Corrija seu ponto de partida / final com facilidade e obtenha as instruções de rota adequadas em detalhes via API do Google.


Essa ferramenta pode ser facilmente anexada a quaisquer projetos existentes.

Se você tiver alguma consulta, pode entrar em contato conosco a qualquer momento minha página de perfil ou passagem para aumentar.

B) Como usar – principal

Extraia todos os arquivos formam o zip. O arquivo que você precisa incluir o Google API JavaScript junto com o routeplannerapi.js.

Se você quiser instalar o plug -in em seu site, siga abaixo depois de configurar as configurações acima

Inclua bibliotecas abaixo

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=adsense"></script>
<script src="js/routeplannerapi.min.js"></script>

Configure forma, para iniciar e terminar o local e chamar Calcroute (); função no botão Enviar como abaixo:

<form class="form-inline" role="form">

<div class="form-group">
<label class="sr-only" for="start">Starting Location :</label>
<input type="text" class="form-control" id="start" placeholder="Enter Starting Location">
</div>

<div class="form-group">
<label class="sr-only" for="end">Destination Location :</label>
<input type="text" class="form-control" id="end" placeholder="Enter Destination Location">
</div>

<div class="form-group">
<select class="form-control" id="mode" name="mode">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
<option value="TRANSIT">Transit</option>
</select>
</div>

<button type="button" class="btn btn-success" onClick="calcRoute();">Get Route</button>
</form>
   

Adicione o Google Map Div e o Google Direction div na página como abaixo

<div id="map-canvas" />
<div id="directionsPanel" />

É isso ! Você está pronto para ir se quiser fazer alguma alteração, siga as instruções abaixo:

var _ZNRPL = {
latitude : 41.850033,
longitude : -87.6500523,
start:"",
end:"",
adsense:true,
publisherid:"ca-google-maps_apidocs",
adformat : "BANNER",
adposition : "RIGHT_BOTTOM",
adbackgroundColor: '#c4d4f3',
adborderColor: '#e5ecf9',
adtitleColor: '#0000cc',
adtextColor: '#000000',
adurlColor: '#009900'
};

Você pode definir as variáveis, conforme sua exigência como abaixo:

Você pode definir o local central quando a página carregar, fornecendo latitude e longitude da sua localização.

latitude : 41.850033,
longitude : -87.6500523,

Você pode configurar seu local inicial ou final como abaixo

start:"Chicago",
end : "New York",

Você pode ativar ou desativar o Google AdSense como abaixo

adsense:true,

Se o AdSense estiver ativado, você precisará definir seu ID do editor como abaixo

publisherid:"ca-google-maps_apidocs",

Se o AdSense estiver ativado, você precisará definir o tipo de formato de banner como abaixo

adformat : "BANNER",

De acordo com o Google Adsense, o formato de banner pode ser:

  • LEADERBOARD Cria uma área de exibição totalmente horizontal.
  • BANNER Cria um anúncio horizontal de “banner”.
  • HALF_BANNER Cria um anúncio horizontal menor de “banner”.
  • SKYSCRAPER cria um grande anúncio vertical.
  • WIDE_SKYSCRAPER Cria um amplo anúncio vertical usando tipo maior.
  • VERTICAL_BANNER cria um anúncio vertical de tamanho médio.
  • BUTTON cria um pequeno anúncio.
  • SMALL_SQUARE cria um anúncio quadrado um pouco maior.
  • SQUARE Cria um grande anúncio quadrado com tipo grande.
  • SMALL_RECTANGLE cria um pequeno anúncio retangular.
  • MEDIUM_RECTANGLE cria um anúncio retangular médio.
  • LARGE_RECTANGLE cria um grande anúncio retangular.
  • SMALL_VERTICAL_LINK_UNIT cria uma pequena unidade de ligação vertical.
  • MEDIUM_VERTICAL_LINK_UNIT Cria uma unidade de ligação vertical média.
  • LARGE_VERTICAL_LINK_UNIT cria uma grande unidade de ligação vertical.
  • X_LARGE_VERTICAL_LINK_UNIT Cria uma unidade de ligação vertical extra grande.
  • SMALL_HORIZONTAL_LINK_UNIT Cria uma pequena unidade de link horizontal.
  • LARGE_HORIZONTAL_LINK_UNIT Cria uma grande unidade de link horizontal.

Se o AdSense estiver ativado, você precisará definir a posição de banner como abaixo

adposition : "RIGHT_BOTTOM",

De acordo com o Google Adsense, a posição do banner pode ser:

  • TOP_CENTER indica que a adunit deve ser colocada ao longo do centro superior do mapa.
  • TOP_LEFT Indica que a adunit deve ser colocada ao longo do canto superior esquerdo do mapa, com quaisquer subelementos do controle “fluindo” em direção ao centro superior.
  • TOP_RIGHT Indica que a adunit deve ser colocada ao longo do canto superior direito do mapa, com quaisquer subelementos do controle “fluindo” em direção ao centro superior.
  • LEFT_TOP indica que a adunit deve ser colocada ao longo do canto superior esquerdo do mapa, mas abaixo de qualquer TOP_LEFT elementos.
  • RIGHT_TOP indica que a adunit deve ser colocada ao longo do canto superior direito do mapa, mas abaixo de qualquer TOP_RIGHT
    elementos.
  • LEFT_CENTER indica que a adunit deve ser colocada ao longo do lado esquerdo do mapa, centrado entre o TOP_LEFT
    e BOTTOM_LEFT posições.
  • RIGHT_CENTER indica que a adunit deve ser colocada ao longo do lado direito do mapa, centrado entre o
    TOP_RIGHT e BOTTOM_RIGHT posições.
  • LEFT_BOTTOM indica que a adunit deve ser colocada ao longo da parte inferior esquerda do mapa, mas acima de qualquer BOTTOM_LEFT
    elementos.
  • RIGHT_BOTTOM indica que a adunit deve ser colocada ao longo do canto inferior direito do mapa, mas acima de qualquer BOTTOM_RIGHT
    elementos.
  • BOTTOM_CENTER indica que a adunit deve ser colocada ao longo do centro inferior do mapa.
  • BOTTOM_LEFT Indica que a adunit deve ser colocada ao longo da parte inferior esquerda do mapa, com quaisquer subelementos do controle “fluindo” em direção ao centro inferior.
  • BOTTOM_RIGHT indica que a adunit deve ser colocada ao longo do canto inferior direito do mapa, com quaisquer subelementos do controle “fluindo” em direção ao centro inferior.

Se o AdSense estiver ativado, você deve definir o esquema de Banner de cores como abaixo no formato hexadecimal

adbackgroundColor: '#c4d4f3',
adborderColor: '#e5ecf9',
adtitleColor: '#0000cc',
adtextColor: '#000000',
adurlColor: '#009900'


Source