1

I have multiple location. One is from Netherlands and one from India. How to display both country marker in google map view port?

Currently only Netherlands markers are displayed. So I have to drag map for watch Indian location marker. How can I get both in same view port without dragging?

var properties = {
    "locations": [
        {
            "property_title": "Properties 1",
            "property_avg_review": "4.75",
            "property_price": "$4",
            "property_latitude": "21.232689",
            "property_longitude": "72.865141"
        },
        {
            "property_title": "Chalet Type B (vb. Westerbergen)",
            "property_avg_review": 0,
            "property_price": "$400.25",
            "property_latitude": "52.7121",
            "property_longitude": "6.39892"
        }
    ]
};

function initialize(response) {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    locations = properties.locations;

    for (var i = 0; i < locations.length; i++) {

        var title = locations[i]['property_title'];
        var avg_review = locations[i]['property_avg_review']
        var address = locations[i]['property_address'];
        var price = locations[i]['property_price'];
        var latitude = locations[i]['property_latitude'];
        var longitude = locations[i]['property_longitude'];
        var data_index = i;



        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(latitude, longitude),
            map: map,
            icon: normalIcon(),
            label: {
                text: price,
                color: 'black',
                fontSize: '16px',
                fontWeight: 'bold',
                marginTop: '7px'
            }
        });

        map.setCenter(marker.getPosition())

        markers['hover_' + data_index] = marker;
        markers['hover_' + data_index].setZIndex(google.maps.Marker.MAX_ZINDEX + data_index);

        var rating = parseFloat(avg_review);
        var numStars = 5;
        var fullStar = new Array(Math.floor(rating + 1)).join('<i class="fa fa-star"></i>');
        var halfStar = ((rating % 1) !== 0) ? '<i class="fa fa-star-half-empty"></i>' : '';
        var noStar = new Array(Math.floor(numStars + 1 - rating)).join('<i class="fa fa-star-o"></i>');

        var box_content = '<div class="property_box_map">';
        box_content += '<div class="property_review_price">';
        box_content += '<label><b>From</b></label> ' + price + ' | <span class="stars">' + fullStar + halfStar + noStar + '</span>';
        box_content += '</div>';
        box_content += '</div>';

        google.maps.event.addListener(marker, 'click', (function (marker, box_content, infowindow) {
            return function () {
                infowindow.setContent(box_content);
                infowindow.open(map, marker);
                activeWindow = infowindow;
            }
        })(marker, box_content, infowindow));

        google.maps.event.addListener(infowindow, 'domready', function () {

            var iwOuter = jQuery('.gm-style-iw');
            var iwBackground = iwOuter.prev();
            // Remove the background shadow DIV
            iwBackground.children(':nth-child(2)').css({ 'display': 'none' });
            // Remove the white background DIV
            iwBackground.children(':nth-child(4)').css({ 'display': 'none' });

        });
    }
    google.maps.event.addListener(map, "click", function (event) {
        if (typeof activeWindow != "undefined") {
            activeWindow.close();
        }
    });

}
google.maps.event.addDomListener(window, 'load', initialize);

//get normal icon for map.
function normalIcon() {
    return {
        url: "https://cdn.smokymountains.com/static/maps/pointer-normal.png",
        scaledSize: new google.maps.Size(80, 40),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(32, 65),
        labelOrigin: new google.maps.Point(40, 17)
    };
}

//get active icon for map whenever hover on property.
function activeIcon() {
    return {
        url: "https://cdn.smokymountains.com/static/maps/pointer-active.png",
        scaledSize: new google.maps.Size(80, 40),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(32, 65),
        labelOrigin: new google.maps.Point(40, 17)
    };
}   
-1

add this --> var bounds = new google.maps.LatLngBounds();

before this line --> for (var i = 0; i < locations.length; i++) {

add this --> bounds.extend(marker.position);

before this line --> bounds.extend(marker.position);

add this --> map.fitBounds(bounds);

at end } of --> function initialize(response) {

  • could you please edit your answer with your suggestions impemented into the code (or improve readability in any other way)? – ThingumaBob Oct 25 '18 at 12:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.