Skip to Content
avatar image
Former Member

Problem with the marker of google maps in my BSP page

Hi everyone,

i have a problem, the marker of my google maps implementation, is draggable, but doesn't work correctly. With the movement sometimes has a lag or just doesn't retrieve the info or does not work perfectly. And also when y make bigger or smaller the map or just with the scroll does not work anymore. But just sometimes not always.

Can someone help me please, thanks in advance. Sorry i am new with BSP.

This is my code.

<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>


<!DOCTYPE html>


<htmlb:content design = "design2003">
<%--<htmlb:content design = "design2003" controlRendering = "SAP" >--%>


  <htmlb:page>


    <head>


      <title>Place details</title>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
      <meta charset="utf-8">
      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDi9mBgBcSZwI0PCcJqeDvbItklIIuDIIQ&libraries=places&callback=initMap" async defer></script>


      <style>
        html, body {
          height: 600px;
          width: 600px;
          margin: 0;
          padding: 0;
          }
          #map {
          height: 100%;
        }
      </style>


    </head>


<%--    <body onload="initMap()">--%>
    <body>


      <htmlb:form id="geoTool" >


        <table class="formgrid" id="tblAddressPanelGeoTool">


          <tr>
            <th rowspan="3"><span id="lblAddress">Address</span></th>
            <td class="frLabelCell"><label><span id="lblStreet">Address</span></label></td>
            <td class="frTxtboxCell"><input ID="txtStreet" name="txtStreet" Class="text" /></td>
            <td> </td>
            <td> </td>
            <td> </td>
          </tr>


          <tr>
            <td class="frLabelCell"><label><span id="lblPLZ">PLZ</span></label></td>
            <td class="frTxtboxCell"><input ID="txtPLZ" name="txtPLZ" Class="textHalf" /></td>
            <td class="frLabelCell"><label><span id="lblPlace">City</span></label></td>
            <td class="frTxtboxCell"><input ID="txtPlace" name="txtPlace" Class="text" /></td>
            <td> </td>
          </tr>


          <tr>
            <td class="frLabelCell"><label><span id="lblCountry">Country</span></label></td>
            <td class="frTxtboxCell"><input ID="txtCountryCode" name="txtCountryCode" Class="text" /></td>
            <td> </td>
            <td> </td>
            <td style="text-align:right">
            <htmlb:button id = "btnSearch" text = "Search" onClick = "Search_OnClick()" design  = "standard" />
            </td>
          </tr>


          <tr>
            <th rowspan="4"><span id="lblCoordinates"></span></th>
            <td class="frLabelCell"><label><span id="lblLatitude"></span></label></td>
            <td class="frTxtboxCell"><input type="text" id="txtLatitude" name="txtLatitude" class="text" readonly="readonly"/></td>
            <td class="frLabelCell"><label><span id="lblLongitude"></span></label></td>
            <td class="frTxtboxCell"><input type="text" id="txtLongitude" name="txtLongitude" class="text" readonly="readonly"/></td>


      </htmlb:form>


      <htmlb:form id = "geoTool2" method = "POST" action = "SAPEVENT:SUBMIT_FORM_AS_POST_METHOD" >
        <input type="hidden" id="txtLatitude2" name="txtLatitude2" class="text" readonly="readonly"/>
<%--        <input id="txtLatitude2" name="txtLatitude2" class="text" readonly="readonly"/>--%>
        <input type="hidden" id="txtLongitude2" name="txtLongitude2" class="text" readonly="readonly"/>
<%--        <input id="txtLongitude2" name="txtLongitude2" class="text" readonly="readonly"/>--%>
                        
                        
                        
                        
                        
                        
                 
        <htmlb:button id = "btnApply" text = "Confirm" onClick = "Apply_OnClick()" design  = "standard"/>


          </tr>


        </table>


      </htmlb:form>


      <div id="map" class="googlemap"></div>


      <script>


        var accommodationCode;
        var placeCode;
        var regionCode;
        var countryCode;
        var gSource;


        function initMap() {
          try {
            <% IF gt_zisaddr-zigeo_lat IS NOT INITIAL. %>
                var address = '"'+
                '<%= gt_zisaddr-zigeo_lat %>' + ', ' +  //Street
                '<%= gt_zisaddr-zigeo_long %>' +           //ZIP
                '"';
                var myLatlng = {lat: '<%= gt_zisaddr-zigeo_lat %>', lng: '<%= gt_zisaddr-zigeo_long %>'}
            <% ELSE. %>
                var address = '"'+
                '<%= gt_zisaddr-zistras %>' + ', ' +  //Street
                '<%= gt_zisaddr-ziort %>' + ', ' +    //City
                '<%= gt_zisaddr-zicntry %>' +         //Country
                '<%= gt_zisaddr-zizip %>' +           //ZIP
                '"';
                var myLatlng = {lat: 0, lng: 0}
            <% ENDIF. %>
            var myOptions = {
              zoom: 16,
              center: myLatlng,
              panControl: true,
              zoomControl: true,
              mapTypeControl: true,
              scaleControl: true,
              streetViewControl: true,
              overviewControl: true
            };
            var geocoder = new google.maps.Geocoder();
            var map = new google.maps.Map(document.getElementById('map'), myOptions);
            var marker = new google.maps.Marker({
              position: myLatlng,
              gestureHandling: 'cooperative',
              map: map
            });




            if (geocoder) {
              geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                  if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                    map.setCenter(results[0].geometry.location);
                    var infowindow = new google.maps.InfoWindow({
                    content: '<b>'+address+'</b>',
                    size: new google.maps.Size(150,50)
                    });
                    lv_location = results[0].geometry.location;
                    document.geoTool.txtLatitude.value  = results[0].geometry.location.lat();
                    document.geoTool2.txtLatitude2.value  = results[0].geometry.location.lat();
                    document.geoTool.txtLongitude.value = results[0].geometry.location.lng();
                    document.geoTool2.txtLongitude2.value = results[0].geometry.location.lng();
                    var marker = new google.maps.Marker({
                      position: results[0].geometry.location,
                      map: map,
                      draggable: true,
                      title:address
                    });
                    google.maps.event.addListener(marker, 'dragend', function (event) {
                    document.getElementById("txtLatitude").value = this.getPosition().lat();
                    document.getElementById("txtLatitude2").value = this.getPosition().lat();
                    document.getElementById("txtLongitude").value = this.getPosition().lng();
                    document.getElementById("txtLongitude2").value = this.getPosition().lng();
                    });
                    google.maps.event.addListener(marker, 'click', function() {
                      infowindow.open(map,marker);
                    });
                  } else {
                    alert("No results found");
                  }
                } else {
                  alert("Geocode was not successful for the following reason: " + status);
                }
              });
              document.geoTool.txtStreet.value      = '<%= gt_zisaddr-zistras %>';
              document.geoTool.txtPLZ.value         = '<%= gt_zisaddr-zizip %>';
              document.geoTool.txtPlace.value       = '<%= gt_zisaddr-ziort %>';
              document.geoTool.txtCountryCode.value = '<%= gt_zisaddr-zicntry %>';
              document.geoTool.txtLatitude.value    = '<%= gt_zisaddr-zigeo_lat %>';
              document.geoTool2.txtLatitude2.value  = '<%= gt_zisaddr-zigeo_lat %>';
              document.geoTool.txtLongitude.value   = '<%= gt_zisaddr-zigeo_long %>';
              document.geoTool2.txtLongitude2.value = '<%= gt_zisaddr-zigeo_long %>';
            }
          }
          catch(err){
            if (window.name != "status.reload"){
              window.name = "status.reload"; // avoid endless loop
              window.location.reload();
            }
          }
        }


      </script>


    </body>


  </htmlb:page>


</htmlb:content>
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

0 Answers