Как отобразить карту в google map API v3

У меня есть этот образец кода для google map api для поиска местоположения. Я могу дать вход, но не смог отобразить карту в браузере. Я пробовал различные другие коды в https://developers.google.com/maps/documentation/javascript/examples/directions-panel и другие коды тоже, но все они имеют ту же проблему. Я не могу решить эту проблему. Я попытался нарисовать код CSS в форме javascript.Как отобразить карту в google map API v3

Пожалуйста, помогите мне, если что-то не так с этим кодом:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <link href="/maps/documentation/javascript/examples/default.css" 
     rel="stylesheet"> 
    <title>Places search box</title> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> 
    <script> 
function initialize() { 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    var defaultBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(-33.8902, 151.1759), 
     new google.maps.LatLng(-33.8474, 151.2631)); 
    map.fitBounds(defaultBounds); 

    var input =(document.getElementById('target')); 
    var searchBox = new google.maps.places.SearchBox(input); 
    var markers = []; 

    google.maps.event.addListener(searchBox, 'places_changed', function() { 
    var places = searchBox.getPlaces(); 

    for (var i = 0, marker; marker = markers[i]; i++) { 
     marker.setMap(null); 
    } 

    markers = []; 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0, place; place = places[i]; i++) { 
     var image = { 
     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) 
     }; 

     var marker = new google.maps.Marker({ 
     map: map, 
     icon: image, 
     title: place.name, 
     position: place.geometry.location 
     }); 

     markers.push(marker); 

     bounds.extend(place.geometry.location); 
    } 

    map.fitBounds(bounds); 
    }); 

    google.maps.event.addListener(map, 'bounds_changed', function() { 
    var bounds = map.getBounds(); 
    searchBox.setBounds(bounds); 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    <style> 
     #target { 
     width: 345px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="panel"> 
     <input id="target" type="text" placeholder="Search Box"> 
    </div> 
    <div id="map-canvas"></div> 
    </body> 
</html>

источник

2013-07-05 Manish Jha

У вас ошибка при создании объекта карты, вы только дать тип, но ушел из зум и возможность центра, как требуется, вы должны сделать это, как эти:

var mapOptions = { 
    zoom: 8, 
    center: new google.maps.LatLng(-34.397, 150.644), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

Google Maps Documentation

источник

2013-07-05 13:44:23 daver

ее не работает после предоставления всех необходимых параметров в MapOptions –

я не попробовал весь код, потому что вы сказали, что карта не показывает, так что я только сделать исправления для этой проблемы, может быть, у вас есть некоторые другие ошибки код – daver

, пожалуйста, сэр, помогите мне в решении ошибок и заставьте его работать –

вы также можете добавить стиль в контейнер карта-холст, так как он будет цв когда страница загружается;

#map-canvas { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    }

источник

2013-07-05 14:31:42 EvilEpidemic

Как отобразить карту в google map API v3

ответ

Смежные вопросы