This page didn t load Google Maps correctly See the JavaScript console for technical details

0 votes

I am using the following mentioned code from Google Map API's and it is not working:-

<!DOCTYPE html> 
<html> 
<head> 
<title>Place Autocomplete</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 { 
      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> 
<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" 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> 
  </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: 

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>
<scriptsrc="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" 
        async defer></script>

What can I do to get a solution for this ?
Feb 11 in Java by Soham
• 8,730 points
54 views

1 answer to this question.

0 votes

The solution to your query is relatively easy to fix, by just replacing YOUR_API_KEY on the last line of your code with your actual API key!

If you do not have one yet, then  you can get it for free on the Google Developers Website.

answered Feb 11 by Rahul
• 8,980 points

Related Questions In Java

0 votes
1 answer

How to fix the error failed to load the JNI shared Library?

You need these three things : 64-bit OS 64-bit ...READ MORE

answered Apr 19, 2018 in Java by sophia
• 1,400 points
1,767 views
0 votes
3 answers

How to check whether a string is empty or not? Is there a function for this?

str != null && str.length() != 0 alternatively str ...READ MORE

answered Sep 11, 2018 in Java by Sushmita
• 6,900 points
454 views
0 votes
1 answer

What is the concept of Immutability for strings in Java ? Why are strings immutable ?

According to Effective Java, chapter 4, page 73, ...READ MORE

answered May 11, 2018 in Java by Rishabh
• 3,620 points
698 views
0 votes
1 answer

Which is the best GUI designer for Eclipse?

Windows Builder Pro is the best GUI ...READ MORE

answered May 21, 2018 in Java by Akrati
• 3,190 points
1,004 views
0 votes
1 answer

How do I start studying Node.JS to create a restful API?

Node.js is an open source server environment ...READ MORE

answered Jun 11, 2019 in Others by ArchanaNagur
• 2,340 points
433 views
0 votes
1 answer
0 votes
1 answer

Trying to call AWS API via PHP

Try using AWS SDK for PHP, Link ...READ MORE

answered Jun 6, 2018 in AWS by Cloud gunner
• 4,660 points
981 views
0 votes
1 answer

Problem with Swift API Gateway key authorizatiion Ask

Try to add all the headers that ...READ MORE

answered Jun 12, 2018 in AWS by Cloud gunner
• 4,660 points
346 views
0 votes
1 answer

Failed to load resource: the server responded with a status of 404 (not found)

In order to avoid an error while ...READ MORE

answered Feb 8 in Java by Rahul
• 8,980 points
149 views
0 votes
1 answer

What does "javascript:void(0)" mean?

The href of the link helps with ...READ MORE

answered Feb 8 in Java by Rahul
• 8,980 points
41 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP