Implementing google API autocomplete without creating an actual map

Implementing google API autocomplete without creating an actual map - javascript

As the title says, I am trying to use a location suggestion by using google API autocomplete without creating a google map. I've found some code on multiple sites and tried to put it together, filling in the missing parts, but so far it hasn't work. I was wondering if anyone knows how google API works and could help me out, thanks!
HTML:
<head>
....
<script src="file.js"></script>
....
</head>
<body>
....
<input type="text" class="form-control" id="university" onfocus="geolocate()" placeholder="Name of University" required>
....
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&signed_in=true&libraries=places&callback=initialize" async defer></script>
</body>
JS:
/*global google */
var autocomplete;
function initialize() {
"use strict";
autocomplete = new google.maps.places.Autocomplete(document.getElementById("university"), {types: ["geocode"]});
}
function geolocate() {
"use strict";
var geolocation, circle;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}

Below is provided a Place Autocomplete example without any dependency to google.maps.Map class:
function initMap() {
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
document.getElementById('placeInfo').innerHTML = '<div><strong>' + place.name + '</strong><br>' + address;
});
}
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;
}
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location"/>
<pre id="placeInfo"></pre>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap"
async defer></script>

Related

Autocomplete show and save 2 different map details on same page

I am trying to setup a page that has 2 different addresses and displays with maps using the google maps api from autocomplete. I have one working great but I cannot get 2 working on different divs? I would also like to post the data from both as variables as working on the first.
The html I have working for one but not the other is :
<div id="pickup-details">
<div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12">
<input id="searchInput" onfocus="this.value=''" class="controls" type="text" placeholder="Enter pickup address">
<div id="map"></div>
</div>
<div id="dropoff-details">
<div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12">
<input id="searchInput2" onfocus="this.value=''" class="controls2" type="text" placeholder="Enter dropoff address">
<div id="map2"></div>
</div>
The css is :
#map {width: 100%;height: 300px;}
.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);
}
#searchInput {
background-color: #fff;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 50%;
}
#searchInput:focus {
border-color: #4d90fe;
}
#map2 {width: 100%;height: 300px;}
.controls2 {
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);
}
#searchInput2 {
background-color: #fff;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 50%;
}
#searchInput2:focus {
border-color: #4d90fe;
}
and the js I have is :
var map;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 52.48757519999999, lng: -1.9116437000000133},
zoom: 13
});
var map2 = new google.maps.Map(document.getElementById('map2'), {
center: {lat: 52.48757519999999, lng: -1.9116437000000133},
zoom: 13
});
var input = document.getElementById('searchInput');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setIcon(({
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(35, 35)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || ''),
(place.address_components[3] && place.address_components[3].short_name || ''),
(place.address_components[4] && place.address_components[4].short_name || ''),
(place.address_components[5] && place.address_components[5].short_name || ''),
(place.address_components[6] && place.address_components[6].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
//clear all//
document.getElementById('postal_code').value=null;
document.getElementById('administrative_area_level_1').value=null;
document.getElementById('locality').value=null;
document.getElementById('route').value=null;
document.getElementById('street_number').value=null;
document.getElementById('place_name').value=null;
//Location details
for (var i = 0; i < place.address_components.length; i++) {
if(place.address_components[i].types[0] == 'postal_code'){
document.getElementById('postal_code').value=place.address_components[i].short_name;
}
if(place.address_components[i].types[0] == 'country'){
document.getElementById('administrative_area_level_1').value=place.address_components[i].long_name;
}
if(place.address_components[i].types[0] == 'locality'){
document.getElementById('locality').value=place.address_components[i].long_name;
}
if(place.address_components[i].types[0] == 'route'){
var test2 = value=place.address_components[i].long_name;
document.getElementById('route').value=place.address_components[i].long_name;
}
if(place.address_components[i].types[0] == 'street_number'){
var test1 = value=place.address_components[i].long_name;
document.getElementById('street_number').value=place.address_components[i].long_name;
}
test3 = test1+' '+test2;
test4 = place.name;
if (test3 == test4) {
document.getElementById('place_name').value=null;
}
if (test3 != test4) {
document.getElementById('place_name').value=place.name;
}
}
document.getElementById('show_pick_up').innerHTML = place.name+' '+place.formatted_address;
$('#show_pick_up').show();
//document.getElementById('place_name').value=place.name;
//document.getElementById('route').value=place.address_components[1].short_name;
//document.getElementById('postal_code').value=place.address_components[6].short_name;
});
}

You have to create and initialize your 2 maps separately. You should store references to your 2 maps. This example is taken straight from Google Maps API examples: Simple Map You will see 2 maps starting at 2 different locations.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
map2 = new google.maps.Map(document.getElementById('map2'), {
center: {lat: 42.2007934, lng: -85.604063},
zoom: 8
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 250px;
width: 250px;
float: left;
}
#map2 {
height: 250px;
width: 250px;
float: right;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<div id="map2"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

The problem is sorted with the map not loading automatically, I just had to add the below when the div was reloaded
window.dispatchEvent(new Event('resize'));

Automatic location in textfield Google map api

I'm trying to get the location inside the text field automatically when ever I write some location! but it's not working and no location is showing up when I write something. please help me to resolve it. Thanks in advance. I am trying to get values in next page. and it is working perfectly just want the intelicence of google map address.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script>
function sync()
{
var n1 = document.getElementById('n1');
var n2 = document.getElementById('pac-input');
n1.value = n2.value;
}
</script>
<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>
</head>
<body>
<div id="type-selector" class="controls">
<form name='form' method="get" action="Input.php">
<input type="hidden" id="n1" name="name1">
<input id="pac-input" name="name" class="controls" type="text"
placeholder="Enter a location" onmouseout="sync()">
<input type="radio" name="type" id="changetype-all" checked="checked">
<label for="changetype-all">All</label>
<input type="radio" name="type" id="changetype-establishment">
<label for="changetype-establishment">Establishments</label>
<input type="radio" name="type" id="changetype-address">
<label for="changetype-address">Addresses</label>
<input type="radio" name="type" id="changetype-geocode">
<label for="changetype-geocode">Geocodes</label>
<input type="submit" name="submit" value="Submit" >
</form>
</div>
<div id="map"></div>
<script>
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input = /** #type {!HTMLInputElement} */(
document.getElementById('pac-input'));
var types = document.getElementById('type-selector');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
marker.setIcon(/** #type {google.maps.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(35, 35)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
radioButton.addEventListener('click', function() {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-address', ['address']);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMphVv_7FuU0Yi1ofpDNnO1r9wppukLxo&libraries&libraries=places&callback=initMap"
async defer></script>
</body>
</html>

How to make Google Map Place Search Box without Marker?

This is a Code Snippet of Google Map Search Function to search particular location.How can i make a google map search function that search particular location without marker. I've research google maps search box but so far most of what i research have markers even in Google Developers Website can't find any of it.
var searchBox = new google.maps.places.SearchBox(document.getElementById('searchmap'));
google.maps.event.addListener(searchBox,'places_changed',function() {
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for (var i = 0; place= place[i]; i++) {
bounds.extend(place.geometry.location);
marker.setPosition(place.geometry.location);
}
map.fitBounds(bounds);
map.setZoom(15);
});
google.maps.event.addListener(marker,'position_changed', function(){
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lat();
$('#lat').val(lat);
$('#lat').val(lat);
});

Here is modified example from Places search box page that demonstrates how to utilize Google Place Autocomplete feature (the dependency to mark places using markers is deleted)
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
});
var input = document.getElementById('searchmap');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
searchBox.addListener('places_changed', function () {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
var bounds = new google.maps.LatLngBounds();
places.forEach(function (place) {
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
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);
}
#searchmap {
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;
}
#searchmap:focus {
border-color: #4d90fe;
}
<input id="searchmap" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initAutocomplete"
async defer></script>

Google Maps + Streetview issue - How to disable Photo Sphere

So on my site I'm using Google Maps + Streetview:
https://developers.google.com/maps/documentation/javascript/examples/streetview-simple
Also I'm using standard searchbox with autocomplete, the problem is when I enter some locations, there is no streetview, just Photo Sphere image without any controls for moving around like in standard streetview...
I really don't want Photo Sphere, because I want my users to freely move around with street view, and now they sometimes get "trapped" in one Photo Sphere image... Is there a way I can force streetview without Photo Sphere?

I'm not sure how to turn off PhotoSpheres, but I did find a workaround that may be useful to you. I noticed at https://developers.google.com/maps/documentation/javascript/reference#StreetViewSource that when searching for a location, if you set the source to OUTDOOR, then PhotoSpheres are not returned.
Therefore, if you add listeners for location changes, and then search for the location without PhotoSpheres, I think you should be able to prevent them from showing up.
Here is a modified google maps example to illustrate:
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete without PhotoSpheres</title>
<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, #pano {
height: 100%;
width: 50%;
float:left;
}
.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>
</head>
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="map"></div>
<div id="pano"></div>
<script>
var map;
var panorama;
var streetViewService;
var DEFAULT_PROXIMITY = 50;
var MAX_PROXIMITY = 10000;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input = /** #type {!HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var autocomplete = new google.maps.places.Autocomplete(input);
//autocomplete.bindTo('bounds', map);
streetViewService = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: {lat: -33.8688, lng: 151.2195},
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.location) {
findClosestStreetView(place.geometry.location, DEFAULT_PROXIMITY);
}
});
function findClosestStreetView(point, proximity) {
streetViewService.getPanorama({location: point, radius: proximity, source: google.maps.StreetViewSource.OUTDOOR}, function processSVData(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
map.panTo(data.location.latLng);
panorama.setPano(data.location.pano);
} else {
if (proximity < MAX_PROXIMITY) {
findClosestStreetView(point, proximity + 50);
} else {
// NO PANARAMA FOUND - do something else here...
panorama.setVisible(false);
}
}
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?&libraries=places&callback=initMap" async defer></script>
</body>
</html>

google map appear with grey inside modal in bootstrap

I use "Bootstrap v3.3.5 (http://getbootstrap.com)
Copyright 2011-2015 Twitter, Inc. " for my site and i want to add google-map. I run this code, and all maps is grey. I dont understand why this not work with modal. Can someone help me?
I also have included <script src="https://maps.googleapis.com/maps/api/js"></script>.
HTML:
<body>
<a class="openmodal" href="#contact" data-toggle="modal" data-id="Peggy Guggenheim Collection - Venice">Contact</a>
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content" id="back">
<div class="modal-header">
<h4>Contact<h4>
</div>
<div class="modal-body">
<div id="map"></div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</div>
</div>
JS:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
CSS:
#map {
width: 500px;
height: 400px;
}

Here is the code above in a working fiddle -> http://jsfiddle.net/wgur1z7n/ (bootstrap 3.3.5)
Trigger the google maps resize event after the modal is shown :
$('#contact').on('shown.bs.modal', function () {
google.maps.event.trigger(map, "resize");
});

Triggering "resize" did not work for me. The map showed up, but with wrong coordinates and wrong zoom level. You probably have an initMap function on your page. This worked for me:
<script>
$('#myModal').on('shown.bs.modal', function () {
initMap();
});
</script>

Try this rookie solution
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes">
<meta charset="utf-8">
<style>
#map {
height: 450px;
width: 1080px;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.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;
}
.modal {
display: block;
z-index: 1;
padding-top: 20px;
padding-bottom: 20px width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin-left: 60px;
margin-bottom: 20px;
padding: 0;
border: 1px solid #888;
width: 90%;
height: 90%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 4s;
animation-name: animatetop;
animation-duration: 4s
}
#-webkit-keyframes animatetop {
from {
top: -900px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -900px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
.close {
color: white;
float: right;
font-size: 40px;
font-weight: bold;
margin-top: 10px;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #a8c9ff;
color: white;
}
.modal-body {
padding: 2px 16px;
background-color: white;
color: black;
}
.modal-footer {
padding: 2px 16px;
background-color: #a8c9ff;
color: white;
}
</style>
</head>
<body onload="clr()">
<div>
<div id='myModal' class='modal'>
<div class='modal-content'>
<div class='modal-header'>
<span onclick='cl()' class='close' style="border: 2px; border-color: black">OK</span>
<h2>Search location and click OK</h2>
<h4 style="color: red">Note : If map dosen't load propery Click here! (Click on location to select or Drag marker to position.)</h4></div>
<div class='modal-body'>
<input id="pac-input" class="controls" type="text" placeholder="Enter a location">
<div id="type-selector" class="controls">
<input type="radio" name="type" id="changetype-all">
<label for="changetype-all">All</label>
<input type="radio" name="type" id="changetype-establishment">
<label for="changetype-establishment">Establishments</label>
<input type="radio" name="type" id="changetype-address">
<label for="changetype-address">Addresses</label>
<input type="radio" name="type" id="changetype-geocode" checked="checked">
<label for="changetype-geocode">Geocodes</label>
</div>
<div id="map" style="position: none"></div>
</div>
<div class='modal-footer'></div>
</div>
</div>
<div style="">
<input type="button" onclick="notifi()" id="btn" value="Show map">
<input type="text" style="width: 400px" id="Location" placeholder="Choose location from map..." disabled="">
</div>
</div>
<script>
function initMap() {
var $Location = document.getElementById('Location');
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: -33.8688, lng: 151.2195 },
zoom: 13
});
google.maps.event.trigger(map, 'resize');
var input = /** #type {!HTMLInputElement} */ (
document.getElementById('pac-input'));
var types = document.getElementById('type-selector');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29),
draggable: true
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("No details available for input: '" + place.name + "'");
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setIcon( /** #type {google.maps.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(35, 35)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
$Location.value = "Latitude : " + place.geometry.location.lat() + " Longitude : " + place.geometry.location.lng();
google.maps.event.addListener(marker, 'dragend', function(marker) {
var latLng = marker.latLng;
$Location.value = "Latitude : " + latLng.lat() + " Longitude : " + latLng.lng();
});
google.maps.event.addListener(marker, 'click', function(event) {
$Location.value = "Latitude : " + this.getPosition().lat() + " Longitude : " + this.getPosition().lng();
});
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
map.addListener('click', function(e) {
setTimeout(function() { marker.setPosition(e.latLng); }, 10);
$Location.value = "Latitude : " + e.latLng.lat() + " Longitude : " + e.latLng.lng();
google.maps.event.addListener(marker, 'click', function(event) {
$Location.value = "Latitude : " + this.getPosition().lat() + " Longitude : " + this.getPosition().lng();
});
});
marker.addListener('click', function() {
map.setCenter(marker.getPosition());
});
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
radioButton.addEventListener('click', function() {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-address', ['address']);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
}
</script>
<script type="text/javascript">
var modal = document.getElementById('myModal');
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
function cl() {
modal.style.display = "none";
}
function notifi() {
modal.style.display = "block";
clr();
}
function explode() {
modal.style.display = "none";
}
setTimeout(explode, 3000);
function ref() {
location.reload();
}
function clr() {
document.getElementById("Location").value = "";
document.getElementById("pac-input").value = "";
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPQ7PC_2JN_9jNw4z3N-PIsOtJF6HY-Hs&libraries=places&callback=initMap" async defer></script>
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

Implementing google API autocomplete without creating an actual map - javascript

Related

Autocomplete show and save 2 different map details on same page

Automatic location in textfield Google map api

How to make Google Map Place Search Box without Marker?

Google Maps + Streetview issue - How to disable Photo Sphere

google map appear with grey inside modal in bootstrap

Categories

Resources