Results 1 to 9 of 9

Thread: Map with address

  1. #1

    Default Map with address

    hi!
    I'm trying to use the element map.
    But I use the address instead of latitude and longitude.
    for now I did the following:
    Code:
                                                        xtype: 'map',
                                                        //useCurrentLocation: true,
                                                        mapOptions: {
                                                            center: new google.maps.LatLng(37.381592, -122.135672), 
                                                            zoom: 12,
                                                            mapTypeId : google.maps.MapTypeId.ROADMAP,
                                                            navigationControl: true,
                                                            navigationControlOptions: {
                                                                style: google.maps.NavigationControlStyle.DEFAULT
                                                            }
                                                        }
    is it possible to use an address?

  2. #2
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Answers
    12

    Default

    Here's a sample. Make sure you include the script in your HTML file:
    Code:
    <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
    It's a very simple example. On startup, it will zoom the map into Sencha Inc.'s address and place a marker at the location:

    Code:
    Ext.define('test.view.Address', {
      extend: 'Ext.Panel',
    
      config:  {
        layout: 'card',
        fullscreen: true,
    
        items: [
          {
            xtype: 'map',
            mapOptions: {
              zoom: 16,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              navigationControl: true,
              navigationControlOptions: {
                style: google.maps.NavigationControlStyle.DEFAULT
              }
            },
    
            listeners: {
              maprender: function(extMapComonent, googleMapComponent) {
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode(
                  { address: '1700 Seaport Boulevard Suite 120, Redwood City, CA 94063' },
                  function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                      extMapComponent.setMapCenter(results[0].geometry.location);
                      var marker = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: googleMapComponent,
                        title: 'Sencha Inc.',
                        animation: google.maps.Animation.DROP,
                      });
                    }
                  }
                );
              }
            }
          }
        ]
      }
    });
    To read more about Google Map's Geocoding, visit these pages:
    https://developers.google.com/maps/documentation/geocoding/
    https://developers.google.com/maps/documentation/javascript/geocoding


  3. #3

    Default

    i tried this:
    Code:
        xtype: 'map',
        //useCurrentLocation: true,
        mapOptions: {
            center: new google.maps.LatLng(37.381592, -122.135672),
            zoom: 12,
            mapTypeId : google.maps.MapTypeId.ROADMAP,
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.DEFAULT
            }
        },
        listeners: {
            maprender: function(comp, map) {
                var marker;
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({
                    'address': 'Viale Italia 40, La Spezia, Italia'
                }, function(results, status) {
                    map.setCenter(results[0].geometry.location);
                    marker = new google.maps.Marker({
                        map: map, 
                        position: results[0].geometry.location,
                        title: titolo
                    });
                });
       
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
                });
    
    
                setTimeout(function() {
                    map.panTo(position);
                }, 1000);
            }
        }
    I took an example of geolocation from a website.
    However, in this way the map is not seen

  4. #4

    Default

    ok I fixed the code using your example:
    Code:
        xtype: 'map',
        //useCurrentLocation: true,
        mapOptions: {
            zoom: 12,
            mapTypeId : google.maps.MapTypeId.ROADMAP,
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.DEFAULT
            }
        },
        listeners: {
            maprender: function(comp, map) {
                var mymap = this;
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({
                    address: '1700 Seaport Boulevard Suite 120, Redwood City, CA 94063'
                }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        mymap.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                            position: results[0].geometry.location,
                            map: map,
                            title: 'Sencha Inc.',
                            animation: google.maps.Animation.DROP
                        });
                    }
                });
            }
        }
    i see the map, but i don't see the map and the address is always wrong!

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Answers
    12

    Default

    Quote Originally Posted by senchanew View Post
    i see the map, but i don't see the map and the address is always wrong!
    You see the map but you don't see the map? That's odd! :-)

    Copy/paste my code EXACTLY, then create a separate app.js file just to show it. Tried, tested, it works. You can backtrack from there to find out why your code isn't.

    Here's the app.js file. If you copy this AND my original, you'll see it works.
    Code:
    Ext.application({
        name: 'test',
    
        views: ['Address'],
    
        launch: function() {
            Ext.create('test.view.Address');
        }
    });

  6. #6

    Default

    hello, sorry for the delay!
    I mean I see the map but not the marker.
    and also the address is always wrong.
    remains set near Mountain View-


    I tried your code in a specific file app, but the page remains blank.


    This is my last attempt:
    Code:
    navPdv.push({
        xtype: 'map',
        mapOptions: {
            zoom: 12,
            mapTypeId : google.maps.MapTypeId.ROADMAP,
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.DEFAULT
            }
        },
        listeners: {
            maprender: function(comp, map) {
                var mymap = this;
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({
                    address: 'Plaa de Sant Iu, 5 08002 Barcelona, Spain 932 56 35 00'
                }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        mymap.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                            position: results[0].geometry.location,
                            map: map,
                            title: 'Sencha Inc.',
                            animation: google.maps.Animation.DROP
                        });
                    }
                });
            }
        }
    })

  7. #7

    Default

    ok found the error.
    works.
    thank you very much!

  8. #8

    Default

    This one works fine, but you need to change mymap to map

  9. #9
    Sencha User
    Join Date
    May 2014
    Posts
    3

    Default

    The map doesn't show the marker because the centring is not working (it throws an error if you look in the console) - the marker is there if you zoom out far enough.

    myMap = this is a reference to the panel holding the map I think, rather than the map itself.

    If you reference the map properly, it will then centre itself on the marker.

    myMap.getMap() references the map object, so this works: mymap.getMap().setCenter(results[0].geometry.location);

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •