This topic is: resolved

Google Map issue

  • Avatarrene76n
    Participant
    Post count: 1
    # 5 years, 8 months ago

    Hi guys

    I’ve been experiencing troubles with the Google Map in the property-detail.hmtl file.

    This entire portion of the code is not affecting the map at all , I’ve been trying to change the value for the zoom variable and nothing happened.

    var mapOptions = {
    zoom: 13,
    scrollwheel: true
    }

    I already tested it in Google Chrome, Safari and Firefox.

    Can you help me?

    AuthorAuthor
    Keymaster
    Post count: 26676
    # 5 years, 8 months ago

    Hi there

    This bug has been noticed and will be fixed in coming update and for the meantime you can replace the map code that is at the bottom of property-details.html

    <script type="text/javascript">
            function PropertiesMap() {
    
                /* Properties Array */
                var properties = [
                    { title:"116 Waverly Place",  price:"<strong>$</strong><span>2,800 monthly</span>",  lat:40.73238,  lng:-73.99948,  thumb:"images/property1-map.jpg",  url:"property-details.html",  icon:"images/map-marker.png", }
    				
    				];
    
                /* Map Center Location - From Theme Options */
                var location_center = new google.maps.LatLng(properties[0].lat,properties[0].lng);
    
                var mapOptions = {
                    zoom: 4,
    				center: new google.maps.LatLng(properties[0].lat,properties[0].lng),
    				scrollwheel: false
                }
    
                var map = new google.maps.Map(document.getElementById("gmap"), mapOptions);
    
                var markers = new Array();
                var info_windows = new Array();
    
                for (var i=0; i < properties.length; i++) {
    
                    markers[i] = new google.maps.Marker({
                        position: map.getCenter(),
    					map: map,
                        icon: properties[i].icon,
                        title: properties[i].title,
                        animation: google.maps.Animation.DROP
                    });
    
                    bounds.extend(markers[i].getPosition());
    
                    info_windows[i] = new google.maps.InfoWindow({
                        content:    '<div class="map-property">'+
                            '<h4 class="property-title"><a class="title-link" href="'+properties[i].url+'">'+properties[i].title+'</a></h4>'+
                            '<a class="property-featured-image" href="'+properties[i].url+'"><img class="property-thumb" src="'+properties[i].thumb+'" alt="'+properties[i].title+'"/></a>'+
                            '<p><span class="price">'+properties[i].price+'</span></p>'+
                            '<a class="btn btn-primary btn-sm" href="'+properties[i].url+'">Details</a>'+
                            '</div>'
                    });
    
                    attachInfoWindowToMarker(map, markers[i], info_windows[i]);
                }
    
                map.fitBounds(bounds);
    
                /* function to attach infowindow with marker */
                function attachInfoWindowToMarker( map, marker, infoWindow ){
                    google.maps.event.addListener( marker, 'click', function(){
                        infoWindow.open( map, marker );
                    });
                }
    
            }
    
            google.maps.event.addDomListener(window, 'load', PropertiesMap);
        </script>

     

    You will have to change the map address as you need this is the demo code which comes by default with the template files.

    Hope it helps.
    Thanks

    Avatarrene76n
    Participant
    Post count: 1
    # 5 years, 8 months ago

    Thanks

    This will help!

    AuthorAuthor
    Keymaster
    Post count: 26676
    # 5 years, 8 months ago

    Great!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.