当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Google Places API example

问题描述:

The Problem

I've been trying to get this google maps API example working but after copying the code exactly from google's site, the example fails to render properly. ie the map completely fails to render, search bar is -350px of the page ect.

To see what I mean, check out this JSfiddle.

The example works great on Google's above mentioned documentation page, so I know its something I'm doing. Any ideas?

EDIT: I got the css from google's site, but still the problem persists.

Below is the code causing the problems:

<!DOCTYPE html>

<html>

<head>

<title>Places Autocomplete</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<meta charset="utf-8">

<link href="CSS/default.css" rel="stylesheet">

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

<style>

input {

border: 1px solid rgba(0, 0, 0, 0.5);

}

input.notfound {

border: 2px solid rgba(255, 0, 0, 0.4);

}

</style>

<script>

function initialize() {

var mapOptions = {

center: new google.maps.LatLng(-33.8688, 151.2195),

zoom: 13,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById('map-canvas'),

mapOptions);

var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField'));

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

});

google.maps.event.addListener(autocomplete, 'place_changed', function() {

infowindow.close();

marker.setVisible(false);

input.className = '';

var place = autocomplete.getPlace();

if (!place.geometry) {

// Inform the user that the place was not found and return.

input.className = 'notfound';

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);

google.maps.event.addDomListener(radioButton, 'click', function() {

autocomplete.setTypes(types);

});

}

setupClickListener('changetype-all', []);

setupClickListener('changetype-establishment', ['establishment']);

setupClickListener('changetype-geocode', ['geocode']);

}

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

</script>

</head>

<body>

<div id="panel" style="margin-left: -260px">

<input id="searchTextField" type="text" size="50">

<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-geocode">

<label for="changetype-geocode">Geocodes</lable>

</div>

<div id="map-canvas"></div>

</body>

</html>

网友答案:

JS field doesn't accept Google Maps API library for external resources. (I'm not sure why) So you need to insert <script>tag into the body field.

And JS field generates "window.onload" automatically. You don't have to write "google.maps.event.addDomListener" in JS field.

http://jsfiddle.net/wf9a5m75/NpYwE/27/

<div id="panel" style="margin-left: -260px">
    <input id="searchTextField" type="text" size="50">
    <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-geocode">
    <label for="changetype-geocode">Geocodes</lable>
</div>
<div id="map-canvas"></div>
        <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
网友答案:

You will notice the errors in the javascript console:

Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/maps/documentation/javascript/examples/default.css
Uncaught ReferenceError: google is not defined fiddle.jshell.net/agconti/NpYwE/show/:133

You aren't including the google API script correctly on the fiddle.

分享给朋友:
您可能感兴趣的文章:
随机阅读: