The Google map is missing from view, but the search box is visible

The Google map is not showing, but the search box is visible. I am unsure about what could be causing this issue in my code. I have set the size of the div, so that may not be the reason for it not appearing on the screen. Also, I have not attached the CSS files. Below is the code snippet:

HTML Code:

<body>
    <div id="wrapper">
        <nav class="navbar navbar-default navbar-cls-top " role="navigation"         style="margin-bottom: 0">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div class="header-right">
                <img src="logo (1).ico" height="70px" width="70px" alt="Invite Logo">
                <img src="logo (2).ico" height="70px" width="70px" alt="Invite Logo">
            </div>
        </nav>

        <nav class="navbar-default navbar-side" role="navigation">

            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">
                    <li>
                        <div class="user-img-div">
                            <img src="user.png" class="img-thumbnail" />

                                <div class="inner-text">
                                Khadiza Kobra
                                </div>
                        </div>
                    </li>
                    <li>
                        <a  href="check-in.html"><i class="fa fa-dashboard "></i>Maps</a>
                    </li>
                    <li>
                        <a href="friends.html"><i class="fa fa-desktop"></i>My Circle</a>

                    </li>
                    <li>
                        <a class="active-menu-top" href="#"><i class="fa fa-yelp "></i>Settings<span class="fa arrow"></span></a>
                             <ul class="nav nav-second-level collapse in">
                                <li>
                                    <a href="profile.html"><i class="fa fa-coffee"></i>Profile</a>
                                </li>
                                <li>
                                    <a href="account settings.html"><i class="fa fa-flash "></i>account settings</a>
                                </li>
                                <li>
                                    <a class="active-menu"  href="index.html"><i class="fa fa-send "></i>logout</a>
                                </li>
                            </ul>
                    </li>
                    <li>
                        <a href="notifications.html"><i class="fa fa-flash "></i>notifications</a>
                    </li>
                    <li>
                        <a href="friends reviews.html"><i class="fa fa-anchor "></i>Friends reviews</a>
                    </li>
                    </ul>
            </div>
        </nav>
        <div id="page-wrapper" >
            <div id="page-inner" >
                <div class="row">
                <input id="pac-input" class="controls" type="text" placeholder="Search Box">
                <div id="map"></div>
                <script>      
                 function initAutocomplete() {
                  var map = new google.maps.Map(document.getElementById('map'), {
                   center: {lat: 23.685, lng: 90.3563},
                   zoom: 13,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                   });
        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
        map.addListener('bounds_changed', function() {
        searchBox.setBounds(map.getBounds());
        });
        var markers = [];
        searchBox.addListener('places_changed', function() {
         var places = searchBox.getPlaces();
          if (places.length == 0) {
            return;
          } 
          markers.forEach(function(marker) {
            marker.setMap(null);
          });
          markers = [];
          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)
            };
            markers.push(new google.maps.Marker({
              map: map,
              icon: icon,
              title: place.name,
              position: place.geometry.location
            }));
            if (place.geometry.viewport) {
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
        });
        setMarkers(map);
      }
      var beaches = [
        ['Dhaka', 23.777176, 90.399452, 4],
        ['Mirpur 10', 23.8375, 90.3753, 5],
        ['Shahbag', 23.7381, 90.3954, 3],
        ['Dhanmondi 5', 23.7459, 90.3852, 2],
        ['MIST Mirpur', 23.8383, 90.3606, 1]
      ];
        function setMarkers(map) {
        var image = {
          url: 'map_icon.png',
          size: new google.maps.Size(20, 32),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(0, 32)
        };
        var shape = {
          coords: [1, 1, 1, 20, 18, 20, 18, 1],
          type: 'poly'
        };
        for (var i = 0; i < beaches.length; i++) {
          var beach = beaches[i];
          var marker = new google.maps.Marker({
            position: {lat: beach[1], lng: beach[2]},
            map: map,
            icon: image,
            shape: shape,
            title: beach[0],
            zIndex: beach[3]
          });
        }
      }
    </script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBZlGIVcYhTwGPkeeZKj4GgcODjFps8y8U&sensor=true">
</script>                    

</body>
javascripthtmlcssgoogle-maps

Answer №1

One way to enhance your map display is by including an additional dimension in your map div element, like so: 

  <div id="map" style="width: 500px; height:500px;></div>

Answer №2

You have overlooked calling the initAutocomplete method. To rectify this, you can either include &callback=initAutocomplete in the API script source URL (while removing &sensor=true, as it is no longer necessary):

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBZlGIVcYhTwGPkeeZKj4GgcODjFps8y8U&callback=initAutocomplete">

or explicitly call the function like so:

google.maps.event.addDomListener(window, "load", initAutocomplete);

Here's a fiddle demonstrating this concept

Snippet of code:

function initAutocomplete() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 23.685,
      lng: 90.3563
    },
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  
  // Additional code follows...
}

// more functions and event listeners follow below...
#map {
  height: 400px;
  width: 400px;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>
<div id="wrapper">
  // HTML markup for navigation elements and other content goes here
        </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AJV is failing to validate my body using the function generated by the compile method

Currently, in my API development process with express, I have implemented AJV as a middleware to validate the incoming body data. The version of AJV being used is 6.12.6 Below is the JSON schema named body-foobar.json: { "type": "object& ...

javascriptnode.jsexpressajv

Exploring and extracting values from nested arrays of objects in JavaScript and React

Hey there, I am having trouble getting the data from the backend server to display on a chart library. Can you please take a look at my code and help me out? const data = [ { id: "americano", data: [{x: "10",y: 10,}, {x: &quo ...

javascriptreactjsfor-loopchartsheatmap

Line breaks in Vue v-tooltip functionality

Currently, I am implementing v-tooltip to add tooltip text to a button. My aim is to include a line break within the tooltip text, but I have been unable to determine if this is feasible using this method. After reviewing the documentation, I did not find ...

javascriptvue.jsv-tooltip

Numerous points of interaction within ion-item

Within my ion-list, each ion-item contains a link to navigate to the next page. When tapping on an ion-item, it successfully navigates to the detail page. The problem arises when there is a button inside each ion-item that triggers an action. Tapping on t ...

javascriptangularjsionic-framework

JSLint error: Inconsistent use of spaces and tabs detected

I recently ran the code below through JSLint: $(document).ready(function() { /* Insert paragraph upon page load */ // Retrieve all header elements var header = document.getElementsByTagName('h1'), parent, ...

javascriptjqueryjslint

Issues with basic calculator implemented in HTML

Recently, I've been dabbling in HTML. My goal is simple - to create a form where users can input two numbers, add them together, and see the result in one of the input fields. Here are the two input fields: <input type="text" id="Nu ...

javascripthtmlcalculator

Guide on creating my inaugural HTML embeddable widget?

A client recently requested me to create a JavaScript (MooTools)/HTML/CSS/PHP based game as a deployable widget. This will be my first time developing a widget, so I am seeking advice and insights to help me navigate any potential challenges from experie ...

phpjavascripthtmlcsswidget

I'm working on using CSS to design a layout similar to the one shown in the image below, experimenting with flexbox to achieve the

https://i.sstatic.net/4kNAd.png I am currently facing an issue with the layout of my navigation bar, as it is displaying in a column instead of a row like the format shown in the image. I have tried using flexbox and setting the display to inline-block in ...

htmlcssflexbox

Make sure to declare rest parameters first when using Typescript

I am dealing with a function that takes in multiple string arguments and one final argument of a complex type, which is called Expression. This particular code looks like this in JavaScript: function layerProp(...args) { const fields = args.slice(0, -1) ...

javascriptarraystypescriptrest-parameters

Recursive methodology for building DOM tree structure

var div = { element:'div', parent:'body', style: { width:'100px', height:'100px', border:'1px solid black' } child: { element:'input', type:'text', ...

javascript

Using ISO-8601 format to display dates in JSON within a .NET WebService

While working with a .net asmx webservice, I encountered an issue with the date format being returned. The date field is in the form of: "effective_date":"\/Date(978411600000)\/" After researching on Stack Overflow here: How do I format a Micros ...

javascriptasp.net.netjsonweb-services

Customizing default styles in Bootstrap

Struggling to change the color and border in a Bootstrap nav bar with SCSS. Despite writing the code below, nothing seems to happen: .nav-link.active { color: #495057; background-color: chartreuse; border-color: black; } After inspecting the e ...

csssassnavbar

Tips for stopping a Node.js for loop if it runs for more than 20 seconds

Imagine a situation where I have a for loop performing some actions, and I want to terminate the loop if it takes longer than 20 seconds to complete. async function mainFunc(){ for (let step = 0; step < 5; step++) { // Executes a complex op ...

javascriptnode.jsexpresstimer

Guide on setting a value in $(document).ready using code behind

I am currently working on a .NET application with the use of Twitter Bootstrap. My main challenge right now is retrieving data from a .aspx.cs page to a .aspx page. Here's a look at my code: strObject.cs public class strObject { public string Nam ...

javascriptc#jqueryasp.nettwitter-bootstrap

What could be causing my page to suddenly disappear?

After saving my changes in the IDE and refreshing the browser to test the prompt() function in my index.js file, the entire page goes blank, showing only a white screen. I double-checked the syntax of my function and it seems correct. Everything else on th ...

javascripthtmlcssreactjs

Jquery script that utilizes the Steam WebAPI to return data

I'm encountering an issue with a script I found on github. I added value.appid myself, thinking it was logical, but I believe that data.response.games contains values for all my games. How can I either print or view what is defined? I would like to ...

javascriptjquerymysqlwebapisteam

Tips for programmatically adding together numerous input entries within a PHP while loop utilizing java-script on the onfocusout event

Currently, I am working on a method to determine the value of the following id: id="salenag<?php echo $a; ?>". This involves fetching multiple values from a database using PHP and then summing them up before injecting the total into an in ...

javascriptphpjqueryajaxjquery-events

Experiencing a [$compile:multidir] error when attempting to implement a multiselect dropdown with Angular.js

I encountered an issue when utilizing a multi-select drop-down list in Angular.js. Error: angularjs.js:107 Error: [$compile:multidir] http://errors.angularjs.org/1.4.6/$compile/multidir?p0=ngDropdownMultiselec…22%20checkboxes%3D%22tr ...

javascriptangularjsangularjs-directive

The Jquery .remove() function will only take effect after the second click

I am currently working on implementing a notifications feature using bootstrap popover. The issue I am facing is that after a user clicks on a notification, it should be removed. However, for some reason, it requires two clicks to actually remove the notif ...

javascriptjquerycsstwitter-bootstrappopover

The Node.js express-generator application encounters a problem and is unable to start because of a TypeError: app.set function is not recognized

During the setup of my application using nodejs and express-generator, I encountered an issue when running the following commands in my terminal: npm install multer --save npm audit fix Afterwards, when I attempted to run node ./bin/www I received an err ...

javascriptnode.jsexpressnpm