-1
Google Karte nicht angezeigt, aber das Suchfeld tut. Ich weiß nicht, was das Problem mit diesem Code ist. Ich habe sogar div Größe eingestellt, die Grund sein kann, nicht auf dem Bildschirm zu erscheinen. Ich habe die CSS-Dateien nicht angehängt. Mein Code ist unten angegeben:Google Karte nicht angezeigt, aber das Suchfeld funktioniert
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>
i zusätzliche Dimension meiner map.But es nicht funktioniert! –
Überprüfen Sie, ob in der Browser-Colsole Sie Fehler finden .. – scaisEdge