Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

jvalrc

Abrir script ao clicar no botão img

Por , em Desenvolvimento frontend

Recommended Posts

jvalrc    0

jvalrc
Postado

Bom dia galera!

 

Sou novo no fórum e no mundo da programação também.

Não fiz nenhum curso, estou pegando tudo na marra e criando minha página, então, peço paciência rsrs.

 

Minha página principal tem o cabeçalho e em baixo joguei o script da API do Google Maps. Criei um "botão" com uma imagem de acordo com um código que vi também em fórum, primeiramente queria uma ajuda para confirmar se o código está correto para esse tipo de função, foi o seguinte:

 

<input type="image" scr="images/image.gif">

 

no CSS defini a position: absolute; (para a imagem "botão") e z-index: -1; (para o mapa), assim, posicionei esse "botão" por cima do mapa, até ai tudo bem, ele está aparecendo lá e sobreposto no mapa, agora vem a minha principal duvida kk eu queria colocar uma função das API's do Google nesse botão, no caso a desse link (postarei o código, mas mandei o link caso queiram ver o mesmo em funcionamento) https://developers.google.com/maps/documentation/javascript/examples/places-searchbox , nesse link, há o " Places search box", no caso , para realizar buscas de locais dentro do mapa, apenas uma caixa, com uma linha, onde deve-se escrever apenas o nome do local...

 

Então, eu queria verificar a possibilidade de fazer com que esse campo de busca saia de dentro do "botão" (o botão está no canto superior esquerdo do mapa, queria que esse campo de busca saísse para a direita), no caso a imagem que joguei sobreposto ao mapa...

 

Obs.: Não sei se o código que criei do botão serve para essa ação (<input type="image" scr="images/image.gif">).

 

segue código informado no site do Google (esse é o código que o google disponibiliza do html+java, no caso, meu código é o que eles disponibilizaram apenas para o mapa encontrar a localização do usuário, eu queria que o mapa encontrasse a localização do usuário e queria adicionar essa função de busca apenas ao botão):

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}

#pac-input:focus {
border-color: #4d90fe;
}

.pac-container {
font-family: Roboto;
}

#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}

#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}

</style>
<title>Places Searchbox</title>
<style>
#target {
width: 345px;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<script>
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.

function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});

var markers = [];
// [sTART region_getplaces]
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();

if (places.length == 0) {
return;
}

// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];

// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};

// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));

if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
// [END region_getplaces]
}


</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"
async defer></script>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito