Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Force Google Maps API to use Lat/Long values only - modifying pre-made JS

    I am using a Wordpress theme for a Real Estate site, and the theme has the following function: When you add a listing, the theme will use the listing title (street address), and the 'city' and 'state' tags, to set the listing map pin. It can also default to lat/long (you can manually add it when creating a new listing)

    Due to wanting to use a descriptive title - rather than a street address - for the listings, I want the map to place the pin based only on the lat/long. When I use a descriptive title the listing map does not load - so the map is not defaulting to the lat/long after it fails to geocode the descriptive title.

    Mapping code is as follows (I am no expert so have been trying many changes, all which break the mappping functions!) - I believe this is a part that needs changing. From what I can figure, it is supposed to default to lat/long but it just won't load the map/marker without any kind of address in the title.

    Code:
    function geocode_and_place_marker(property) {
       var geocoder = new google.maps.Geocoder();
       var address = property.street+', '+property.city+' '+property.state+', '+property.zip;
    
           //If latlong exists build the marker, otherwise geocode then build the marker
           if (property['latlong']) {
               var lat = parseFloat(property['latlong'].split(',')[0]),
                    lng = parseFloat(property['latlong'].split(',')[1]);
                var latlng = new google.maps.LatLng(lat,lng);
                build_marker(latlng, property);
    
           } else {
               geocoder.geocode({ address : address }, function( results, status ) {
                   if(status == google.maps.GeocoderStatus.OK) {
                        var latlng = results[0].geometry.location;
                        build_marker(latlng, property);
                    }
                });
            }
    }
    It would be worth noting that the code above also applies to a function which places multiple listing markers on a homepage map. Preferably I would like the maps to always populate from the manually added lat/long (even the homepage one) but I just cannot get it to happen without breaking the maps... I have tried many different options myself, but based on my limited knowledge and the fact that I cannot find another instance of a similar issue, I just keep on breaking it.

    Any information would be much appreciated.

    I have added the full code below if that is any help...

    Code:
    var estateMapping = (function () {
    var self = {},
        marker_list = [],
        open_info_window = null,
        x_center_offset = 0, // x,y offset in px when map gets built with marker bounds
        y_center_offset = -100,
        x_info_offset = 0, // x,y offset in px when map pans to marker -- to accomodate infoBubble
        y_info_offset = -100;
    
    function build_marker(latlng, property) {
        var marker = new MarkerWithLabel({
            map: self.map, 
            draggable: false,
            flat: true,
            labelContent: property.price,
            labelAnchor: new google.maps.Point(22, 0),
            labelClass: "label", // the CSS class for the label
            labelStyle: {opacity: 1},
            icon: 'wp-content/themes/realestate_3/images/blank.png',   
            position: latlng
            });
    
            self.bounds.extend(latlng);
            self.map.fitBounds(self.bounds);
            self.map.setCenter(convert_offset(self.bounds.getCenter(), x_center_offset, y_center_offset));
    
            var infoBubble = new InfoBubble({
                maxWidth: 275,
                content: contentString,
                borderRadius: 3,
                disableAutoPan: true
            });
    
            var residentialString = '';
            if(property['commercial'] != 'commercial') {
                var residentialString='<p class="details">'+property.bed+' br, '+property.bath+' ba';
            }
    
            var contentString =
            '<div class="info-content">'+
            '<a href="'+property.permalink+'"><img class="left" src="'+property.thumb+'" /></a>'+
            '<div class="listing-details left">'+
            '<h3><a href="'+property.permalink+'">'+property.street+'</a></h3>'+
            '<p class="location">'+property.city+', '+property.state+'&nbsp;'+property.zip+'</p>'+
            '<p class="price"><strong>'+property.fullPrice+'</strong></p>'+residentialString+', '+property.size+'</p></div>'+
            '</div>';
    
            var tabContent =
            '<div class="info-content">'+
            '<img class="left" src="'+property.agentThumb+'" />'+
            '<div class="listing-details left">'+
            '<h3>'+property.agentName+'</h3>'+
            '<p class="tagline">'+property.agentTagline+'</p>'+
            '<p class="phone"><strong>Tel:</strong> '+property.agentPhone+'</p>'+
            '<p class="email"><a href="mailto:'+property.agentEmail+'">'+property.agentEmail+'</a></p>'+
            '</div>'+
            '</div>';
    
            infoBubble.addTab('Details', contentString);
            infoBubble.addTab('Contact Agent', tabContent);
    
            google.maps.event.addListener(marker, 'click', function() {
                if(open_info_window) open_info_window.close();
    
                if (!infoBubble.isOpen()) {
                    infoBubble.open(self.map, marker);
                    self.map.panTo(convert_offset(this.position, x_info_offset, y_info_offset));
                    open_info_window = infoBubble;
                }
            });
    }
    
    function geocode_and_place_marker(property) {
       var geocoder = new google.maps.Geocoder();
       var address = property.street+', '+property.city+' '+property.state+', '+property.zip;
    
           //If latlong exists build the marker, otherwise geocode then build the marker
           if (property['latlong']) {
               var lat = parseFloat(property['latlong'].split(',')[0]),
                    lng = parseFloat(property['latlong'].split(',')[1]);
                var latlng = new google.maps.LatLng(lat,lng);
                build_marker(latlng, property);
    
           } else {
               geocoder.geocode({ address : address }, function( results, status ) {
                   if(status == google.maps.GeocoderStatus.OK) {
                        var latlng = results[0].geometry.location;
                        build_marker(latlng, property);
                    }
                });
            }
    }
    
    function init_canvas_projection() {
        function CanvasProjectionOverlay() {}
        CanvasProjectionOverlay.prototype = new google.maps.OverlayView();
        CanvasProjectionOverlay.prototype.constructor = CanvasProjectionOverlay;
        CanvasProjectionOverlay.prototype.onAdd = function(){};
        CanvasProjectionOverlay.prototype.draw = function(){};
        CanvasProjectionOverlay.prototype.onRemove = function(){};
    
        self.canvasProjectionOverlay = new CanvasProjectionOverlay();
        self.canvasProjectionOverlay.setMap(self.map);
    }
    
    function convert_offset(latlng, x_offset, y_offset) {
        var proj = self.canvasProjectionOverlay.getProjection();
        var point = proj.fromLatLngToContainerPixel(latlng);
        point.x = point.x + x_offset;
        point.y = point.y + y_offset;
        return proj.fromContainerPixelToLatLng(point);
    }
    
    self.init_property_map = function (properties, defaultmapcenter) {
        var options = {
            zoom: 1,
            center: new google.maps.LatLng(defaultmapcenter.mapcenter),
            mapTypeId: google.maps.MapTypeId.ROADMAP, 
            disableDefaultUI: true,
            streetViewControl: false
        };
    
        self.map = new google.maps.Map( document.getElementById( 'map' ), options );
        self.bounds = new google.maps.LatLngBounds();
        init_canvas_projection();
    
        //wait for idle to give time to grab the projection (for calculating offset)
        var idle_listener = google.maps.event.addListener(self.map, 'idle', function() {
            for (i=0;i<properties.length;i++) {
                geocode_and_place_marker(properties[i]);
            }
            google.maps.event.removeListener(idle_listener);
        });
    
    }
    
    return self;
    }());

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    can you show us the html that feeds the values to the map code and fires the function?

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot for your quick response, your comment leads me to believe you would have pointed me in the right direction, as I was looking at the JS mapping script, but the function I was looking for was buried in the PHP elsewhere.

    Thanks, and anyone else who is in my position - check the PHP!


  •  

    Posting Permissions

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