1. Tudásbázis
  2. Modulok fejlesztése
  3. google map keresés

google map keresés

Beküldte makgab - 2013. február 28. 08.03
makgab képe

Üdv!

Adott egy form ország, város mezőkkel:

 $form['country'] = array(
  '#type' => 'select',
  '#title' => t('Country'),
  // ...
  );
 
 $form['city'] = array(
  '#type' => 'textfield',
  '#title' => t('City'),
  // ...
  );

Szeretnék a City mező alá egy beágyazott google maps-et és amikor pl. a user beírta a várost, akkor automatikusan a google maps odakeresne (a szokásos markerrel).

Próbáltam keresgélni a neten, hogyan lehetne beágyazni google maps-et a formba, de nem találtam (vagy rosszul kerestem).
Illetve milyen kóddal oldható meg a keresés.

Drupal verzió: 
7.x
Fórum: 
Modulok fejlesztése
makgab képe

Beküldte makgab - 2013. március 2. 12.12

Van egy html kód, ami működik:

<html>
  <head>
    <title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
 
    <style>
      body {
        font-family: sans-serif;
        font-size: 14px;
      }
      #map_canvas {
        height: 200px;
        width: 300px;
        margin-top: 0.6em;
      }
      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 = 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.
          }
          var image = {
            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.setIcon(image);
          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>
      <input id="searchTextField" type="text" size="50">
     </div>
 
    <div id="map_canvas"></div>
 
  </body>
 
 
</html>

Ezt szétszedtem css-re ($DRUPALDIR/sites/all/modules/mymodule/css/gmap.css):

body {
   font-family: sans-serif;
   font-size: 14px;
}
#map_canvas {
    height: 200px;
    width: 300px;
    margin-top: 0.6em;
}
input {
    border: 1px solid  rgba(0, 0, 0, 0.5);
}
input.notfound {
    border: 2px solid  rgba(255, 0, 0, 0.4);
}

és js-re ($DRUPALDIR/sites/all/modules/mymodule/js/gmap.js):

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 = 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 27? Because it looks good.
          }
          var image = {
            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.setIcon(image);
          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);

Aztán a drupal modul fájlban:

...
drupal_add_js( drupal_get_path('module','mymodule') . '/js/gmap.js', 'file' );
drupal_add_js( 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places', 'file' );
drupal_add_css( drupal_get_path('module','mymodule') . '/css/gmap.css', array('group' => CSS_DEFAULT, 'every_page' => TRUE) );
...
  $form['map'] = array(
  '#type' => 'markup',
  '#prefix' => '<div id="map_canvas">',
  '#suffix' => '</div>',
  );
...

A 300x200 pixeles "div" létrejön, csak üres. A JS nem működik.
Mit rontottam el?
Böngészőben az oldal forrásában látszódik mindegyik hivatkozás (rákattintva megnyilik a tartalma): a két js és a css.

0
0
makgab képe

Beküldte makgab - 2013. március 5. 16.14

Van esetleg valakinek működő megoldása?

0
0
makgab képe

Beküldte makgab - 2013. március 12. 21.25

Most ez jelenik meg, de korábban nem volt ilyen "hiba":

    Warning: file_get_contents(): https:// wrapper is disabled in the server configuration by allow_url_fopen=0 in _locale_parse_js_file() (line 1488 of /data/www/virtual/htdocs/includes/locale.inc).
    Warning: file_get_contents(https://maps.googleapis.com/maps/api/js): failed to open stream: no suitable wrapper could be found in _locale_parse_js_file() (line 1488 of /data/www/virtual/htdocs/includes/locale.inc).
0
0
makgab képe

Beküldte makgab - 2013. március 13. 21.46

Ami nálam működött:

// module
// Google Map
// JS
drupal_add_js( 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', 'file' );
drupal_add_js( 'http://maps.google.com/maps/api/js?sensor=true', 'file' );
drupal_add_js( 'https://raw.github.com/HPNeo/gmaps/master/gmaps.js', 'file' );
drupal_add_js( drupal_get_path('module','mymodule') . '/js/gmap-prettify.js', 'file' );
drupal_add_js( drupal_get_path('module','mymodule') . '/js/gmap-locate.js', 'file' );
// CSS
drupal_add_css( drupal_get_path('module','mymodule') . '/css/gmap-styles.css', array('group' => CSS_DEFAULT, 'every_page' => TRUE) );
 
...
  $form['map'] = array(
  '#type' => 'markup',
  '#prefix' => '<div id="map">',
  '#suffix' => '</div>',
  );
...

// gmap-styles.css
#map {
  height:300px;
  background:#6699cc;
}

// gmap-locate.js
$(document).ready(function(){
   	$('#edit-city').blur(function() {
      prettyPrint();
      map = new GMaps({
        div: '#map',
        lat: -12.043333,
        lng: -77.028333
      });
        GMaps.geocode({
          address: $('#edit-city').val().trim(),
          callback: function(results, status){
            if(status=='OK'){
              var latlng = results[0].geometry.location;
              map.setCenter(latlng.lat(), latlng.lng());
              map.addMarker({
                lat: latlng.lat(),
                lng: latlng.lng()
              });
            }
          }
        });
    });
  });
0
0
makgab képe

Beküldte makgab - 2013. március 31. 22.02

Adott két input text mező (edit-city, edit-address). Hogy kellene a JS-ben ezt öszevonni?
Azt szeretném, hogy a várost és a címet is keresse.

Így próbáltam a kódot módosítani:

// gmap-locate.js
$(document).ready(function(){
   	$('#edit-city').blur(function() {
      prettyPrint();
      map = new GMaps({
        div: '#map',
        lat: -12.043333,
        lng: -77.028333
      });
        GMaps.geocode({
          // address: $('#edit-city').val().trim(), <-- ez volt az eredeti
          address: $('#edit-city'+' '+'#edit-address').val().trim(),
          callback: function(results, status){
            if(status=='OK'){
              var latlng = results[0].geometry.location;
              map.setCenter(latlng.lat(), latlng.lng());
              map.addMarker({
                lat: latlng.lat(),
                lng: latlng.lng()
              });
            }
          }
        });
    });
  });

Az eredeti kódban az edit-city mezőbe beírva a várost és a címet működik a kód:

address: $('#edit-city').val().trim(),

Viszont a város és cím két külön mezőbe kerül és ezt szeretném összehozni.
0
0
makgab képe

Beküldte makgab - 2013. március 31. 22.10

Így már működik:

address: $('#edit-city').val().trim()+' '+$('#edit-address').val().trim(),

:)

0
0