Код примера Google Maps не работает в localhost

Я не уверен, в чем причина этого. Я скопировал образец кода и попытался запустить его в Dreamweaver на localhost. Но по некоторым причинам я не вижу, как карта загружается. Я помню Раньше он загружал его, но теперь его не загружают. У меня есть действительные ключи api, и мой сайт все еще не является общедоступным.Код примера Google Maps не работает в localhost

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?sensor=false"> 
    </script> 
    <script type="text/javascript"> 
     var geocoder; 
     var map; 
     function initialize() { 
     geocoder = new google.maps.Geocoder(); 
     var latlng = new google.maps.LatLng(-34.397, 150.644); 
     var mapOptions = { 
      zoom: 8, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
     } 

     function codeAddress() { 
     var address = document.getElementById('address').value; 
     geocoder.geocode({ 'address': address}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location 
      }); 
      } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
      } 
     }); 
     } 
    </script> 
    </head> 
    <body onload="initialize()"> 
    <!-- <div> 
     <input id="address" type="textbox" value="myaddress"> 
     <input type="button" value="Geocode" onclick="codeAddress()"> 
    </div>--> 
    <div id="map_canvas" style="height:90%;top:30px"></div> 
    </body> 
</html>

Это простейший код, но все же я не могу его поднять.

enter code here

Key Value Запрос GET /maps/api/js/QuotaService.RecordEvent?1shttp%3A%2F%2Flocalhost%2Fgeoc.html & 4E1 & 5e0 & 6U1 & 7sc7c7sc & обратного вызова = XDc ._papnzo & token = 120226 HTTP/1.1

Может кто-нибудь взглянуть и предложить мне, как это сделать? Я должен геокодировать адрес, а затем передать его в api.

источник

2013-02-18 Kiran Badi

В чем проблема? Отображается ли карта? Что такое «запрос ключевых значений», который вы опубликовали? – geocodezip

Сведения о ключевом значении взяты из инструментов браузера f12, которые хотят проверить, есть ли что-либо, связанное с квотой, блокирующей мой вызов. Я думаю, что это не так. –

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

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

или этот CSS:

body, html, #map_canvas { 
    height: 100%; 
    width: 100%; 
}

working example

фрагмент кода:

var geocoder; 
 
var map; 
 

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

 
function codeAddress() { 
 
    var address = document.getElementById('address').value; 
 
    geocoder.geocode({ 
 
    'address': address 
 
    }, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     map.setCenter(results[0].geometry.location); 
 
     var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: results[0].geometry.location 
 
     }); 
 
    } else { 
 
     alert('Geocode was not successful for the following reason: ' + status); 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

body, 
 
html, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div> 
 
    <input id="address" type="textbox" value="126 Beacon Avenue Jersey City NJ 07306 USA"> 
 
    <input type="button" value="Geocode" onclick="codeAddress()"> 
 
</div> 
 
<div id="map_canvas"></div>

источник

2013-02-18 22:48:33 geocodezip

Yup geocodezip, я не задал размер правильно. Одно уточнение, карты не принимают процентные значения или нам нужно дать значения экспликации в пикселях? –

Вы можете использовать процентное соотношение размеров. Но вам нужно убедиться, что размер родительского элемента определен или он не работает ... [Использование высоты в процентах для div карты] (http://econym.org.uk/gmap/basic19.htm) – geocodezip

Спасибо Geocodezip. Я также проверю ссылку. Теперь все отлично. –

Код примера Google Maps не работает в localhost

ответ

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