Home/ Questions/Q 8989881
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T22:22:14+00:00

The freshly loaded page shows the map just like defined in initialize() . But

  • 0

The freshly loaded page shows the map just like defined in initialize(). But a click on the <p:commandButton> just makes it disappear instead of updating the position.
One workaround that does the job is to just reinitialize the map in codeAddress(), but that’s just sleazy because I see no reason why it should work any different from the way it does here.

the jsf code:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <script
        src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
</h:head>
<h:body>
    <h:outputScript library="js" name="test.js" />
    <body onload="initialize()" />

    <h:form id="geo">
        <p:inputText id="address" />
        <p:commandButton value="Geocode" oncomplete="codeAddress();"
            update=":geo" />
        <div style="height: 400px; width: 400px; float: right;"
            id="map_canvas"></div>
    </h:form>
</h:body>
</html>

the test.js:

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

      }

      function codeAddress() {
        var address = document.getElementById('geo:address').value;

        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            alert(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);
          }

        });
      }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Cdeez answer helped me a lot. Replacing the <h:form>-code from the question with this did the trick:

    <h:form id="geo">
    <p:inputText id="address" />
    <p:commandButton value="Geocode" oncomplete="codeAddress(); return false;" ajax="false"/>
</h:form>
    <div style="height: 400px; width: 400px; float: right;" id="map_canvas"></div>

    It’s not great because for this solution I had to drop using ajax, but at least it works in a way. I am still open to better solutions.

    • 0