Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>For Google Maps autocomplete example you could use mine.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"&gt; &lt;h:head&gt; &lt;title&gt;Places Autocomplete&lt;/title&gt; &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;&lt;/meta&gt; &lt;meta charset="utf-8"&gt;&lt;/meta&gt; &lt;link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"&gt;&lt;/link&gt; &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;amp;sensor=false&amp;amp;libraries=places"&gt;&lt;/script&gt; &lt;style&gt; html, body { height: 100%; margin: 0; padding: 0; } #map-canvas, #map_canvas { height: 100%; } @media print { html, body { height: auto; } #map_canvas { height: 650px; } } #panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; } input { border: 1px solid rgba(0, 0, 0, 0.5); } input.notfound { border: 2px solid rgba(255, 0, 0, 0.4); } &lt;/style&gt; &lt;script&gt; // &lt;![CDATA[ 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] &amp;&amp; place.address_components[0].short_name || ''), (place.address_components[1] &amp;&amp; place.address_components[1].short_name || ''), (place.address_components[2] &amp;&amp; place.address_components[2].short_name || '') ].join(' '); } infowindow.setContent('&lt;div&gt;&lt;strong&gt;' + place.name + '&lt;/strong&gt;&lt;br&gt;' + 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); // ]]&gt; &lt;/script&gt; &lt;/h:head&gt; &lt;h:body&gt; &lt;div id="panel" style="margin-left: -260px"&gt; &lt;input id="searchTextField" type="text" size="50"&gt;&lt;/input&gt; &lt;input type="radio" name="type" id="changetype-all" checked="checked"&gt;&lt;/input&gt; &lt;label for="changetype-all"&gt;All&lt;/label&gt; &lt;input type="radio" name="type" id="changetype-establishment"&gt;&lt;/input&gt; &lt;label for="changetype-establishment"&gt;Establishments&lt;/label&gt; &lt;input type="radio" name="type" id="changetype-geocode"&gt;&lt;/input&gt; &lt;label for="changetype-geocode"&gt;Geocodes&lt;/label&gt; &lt;/div&gt; &lt;div id="map-canvas"&gt;&lt;/div&gt; &lt;/h:body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload