[GIS] Displaying markers within viewport for different country in google map

coordinatesgeolocationgoogle maps

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)
    };
}

Best Answer

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) {

Related Solutions

[GIS] Google markers at same address not showing all markers

The clusterer is displaying correctly. All the markers are being plotted. The problem is that you can only click on the top most marker, making it seem like there is only one marker.

To see the content for coincident markers, you'll have to pass the infowindow contents of the underlying markers to the top most marker.

To do this, first off, keep track of each marker. You are using MarkerClusterer, so the markerClusterer instance will hold each marker. As each geocode result comes back, compare the latlng of that request with all the markers that have already been plotted. You can compare positions using the equals method of the latlng object.

If the new marker matches the position of an existing marker, take the infowindow contents from the first marker and append it to the new marker's infowindow contents. This way, when you click on the top most marker (the second company), it will show information from both companies. If there are more than two companies, you'll need to grab the infowindow contents for all the matching markers. This method will also allow the marker clusterer to still display the correct number of markers.

Here is a working example and the javascript code. The first and second addresses are the same. When you click the marker for 2, it will show "2 & 1".

<script type="text/javascript"> 
var map;

//marker clusterer
var mc;
var mcOptions = {gridSize: 20, maxZoom: 17};

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

//geocoder
var geocoder = new google.maps.Geocoder(); 

var address = new Array("1000 Market St, Philadelphia, PA","1000 Market St, Philadelphia, PA","1002 Market St, Philadelphia, PA","1004 Market St, Philadelphia, PA");
var content = new Array("1","2","3","4");

function createMarker(latlng,text) {

    var marker = new google.maps.Marker({
        position: latlng
    });

    ///get array of markers currently in cluster
    var allMarkers = mc.getMarkers();

    //check to see if any of the existing markers match the latlng of the new marker
    if (allMarkers.length != 0) {
        for (i=0; i < allMarkers.length; i++) {
            var currentMarker = allMarkers[i];
            var pos = currentMarker.getPosition();

            if (latlng.equals(pos)) {
                text = text + " & " + content[i];
            }

        }
    }

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.close();
        infowindow.setContent(text);
        infowindow.open(map,marker);
    });

    return marker;
}

function geocodeAddress(address,i) {

    geocoder.geocode( {'address': address}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {

            var marker = createMarker(results[0].geometry.location,content[i]);
            mc.addMarker(marker);

        } else { 
            alert("Geocode was not successful for the following reason: " + status); 
        } 
    });
}

function initialize(){

    var options = { 
        zoom: 13, 
        center: new google.maps.LatLng(39.96225,-75.13222), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map'), options); 

    //marker cluster
    mc = new MarkerClusterer(map, [], mcOptions);

    for (i=0; i<address.length; i++) { 
        geocodeAddress(address[i],i);
    }

}       
</script>

EDIT: Response to comment

Alternatively, you could nudge coincident markers by applying a small (random number between .999999 and 1.000001, for instance) multiplier to the position of each coincident marker. Here is an example. This is using the same data as the first example, except, instead of the markers 1 and 2 being placed on top of each other and sharing an infowindow, marker 2 is offset from marker 1. Note that your geocode results are going to be a little less accurate. Relevant code below:

//min and max limits for multiplier, for random numbers
//keep the range pretty small, so markers are kept close by
var min = .999999;
var max = 1.000001;

    function createMarker(latlng,text) {

        ///get array of markers currently in cluster
        var allMarkers = mc.getMarkers();

        //final position for marker, could be updated if another marker already exists in same position
        var finalLatLng = latlng;

        //check to see if any of the existing markers match the latlng of the new marker
        if (allMarkers.length != 0) {
            for (i=0; i < allMarkers.length; i++) {
                var existingMarker = allMarkers[i];
                var pos = existingMarker.getPosition();

                //if a marker already exists in the same position as this marker
                if (latlng.equals(pos)) {

                    //update the position of the coincident marker by applying a small multipler to its coordinates
                    var newLat = latlng.lat() * (Math.random() * (max - min) + min);
                    var newLng = latlng.lng() * (Math.random() * (max - min) + min);

                    finalLatLng = new google.maps.LatLng(newLat,newLng);

                }                   
            }
        }

        var marker = new google.maps.Marker({
            position: finalLatLng
        });     

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.close();
            infowindow.setContent(text);
            infowindow.open(map,marker);
        });

        return marker;
    }

[GIS] GeoExt (ExtJS + OpenLayers) not displaying Google Map

Following the tutorials and source code at http://www.geoext.org/examples.html#examples, I was able to get a Google Map working. My working code is shown below. Any further advice are still welcome. I guess I was using an outdated syntax.

           var mapPanel, controls = [];

        Ext.onReady(function() {
            Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
            var map = new OpenLayers.Map();
            var layer = new OpenLayers.Layer.Google(
                    'Google Streets',
                    {numZoomLevels: 20},
                    {visibility: true}
            );

            map.addLayers([layer]);
            map.addControls(controls);

            mapPanel = new GeoExt.MapPanel({
                title: "GeoExt MapPanel",
                renderTo: "mappanel",
                stateId: "mappanel",
                height: "100%",
                width: "100%",
                map: map,
                center: new OpenLayers.LonLat(5, 45),
                zoom: 4,
                // getState and applyState are overloaded so panel size
                // can be stored and restored
                getState: function() {
                    var state = GeoExt.MapPanel.prototype.getState.apply(this);
                    state.width = this.getSize().width;
                    state.height = this.getSize().height;
                    return state;
                },
                applyState: function(state) {
                    GeoExt.MapPanel.prototype.applyState.apply(this, arguments);
                    this.width = state.width;
                    this.height = state.height;
                }
            });
        });

        controls.push(
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.Attribution(),
                new OpenLayers.Control.PanPanel(),
                new OpenLayers.Control.ZoomPanel()
            );

        // functions for resizing the map panel
        function mapSizeUp() {
            var size = mapPanel.getSize();
            size.width += 40;
            size.height += 40;
            mapPanel.setSize(size);
        }
        function mapSizeDown() {
            var size = mapPanel.getSize();
            size.width -= 40;
            size.height -= 40;
            mapPanel.setSize(size);
        }

There is a <div id="mappanel"></div> in the <body></body> section.

Best Answer

Related Solutions

[GIS] Google markers at same address not showing all markers

[GIS] GeoExt (ExtJS + OpenLayers) not displaying Google Map

Related Question