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, 2022 in Java by Soham
• 9,710 points
747 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, 2022 by Rahul
• 9,680 points

Related Questions In Java

0 votes
1 answer

Vanilla JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for it

Use Internet Explorer 9 or later if you're using VANILLA pure JavaScript without jQuery. document.addEventListener("DOMContentLoaded", function(event) { // ...READ MORE

answered Nov 8, 2022 in Java by Damonlang
• 700 points
2,994 views
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
2,581 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,920 points
1,431 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
1,601 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,360 points
983 views
0 votes
1 answer

How to schedule a google meet and get the meet link in NodeJs?

To create a Google Meet, you'll need ...READ MORE

answered May 27, 2022 in Node-js by Neha
• 9,020 points
3,874 views
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,670 points
1,742 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,670 points
796 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, 2022 in Java by Rahul
• 9,680 points
2,095 views
0 votes
1 answer

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

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

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