CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Faiz Rasool
Faiz Rasool

Reputation: 1379

Markers are not visible in google map

I'm trying to display google map with markers and circles. The map and the circle is displaying correctly but the marker are not visible on the map.

Please suggest what changes i should make in my code.

<div id="mapview" style="width: 100%; height: 700px;">
</div>
<script>
    var map;
    var info_window;
    function initialize() {
        var mapOptions = {
            zoom: 11,
            center: new google.maps.LatLng(51.561918, -0.31237799999996696),
            mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false
        };
        map = new google.maps.Map(document.getElementById('mapview'), mapOptions);
        var image = '../Image/salemarker.png';
        var user = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(51.561918, -0.31237799999996696),
            animation: google.maps.Animation.DROP, icon: image
        });
        var circle = new google.maps.Circle({
            map: map,
            radius: 1609.344, // 10 miles in metres
            strokeColor: '#08355A;',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#fffff',
            fillOpacity: 0.2,
        });
        info_window = new google.maps.InfoWindow({
            content: 'loading'
        });
        user.setMap(null);
        function addMarkersc() {
            createLocationOnMap('4 bed semi detached For sale', new google.maps.LatLng(51.5661728, 51.5661728), '<p>48, The fairway, wembley, HA..</p>');
        }
        addMarkersc();
        circle.bindTo('center', user, 'position');
        map.fitBounds(circle.getBounds());
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    var image1 = '../Image/salemarker.png';
    function createLocationOnMap(titulo, posicao, conteudo) {
        var m = new google.maps.Marker({
            map: map,
            title: titulo,
            icon: image1,
            position: posicao,
            html: conteudo
        });
        google.maps.event.addListener(m, 'mouseover', function () {
            info_window.setContent(this.html);
            info_window.open(map, this);
        });
    }
</script>

Upvotes: 0

Views: 149

Answers (3)

Mayur Patel
Mayur Patel

Reputation: 1751

You can try this 

    function InitializeMap1() {
    geocoderMap = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(48.856614, 2.352222);
    var myOptions =
    {
        zoom: 12,
        minZoom: 12, // panControl: false,   zoomControl: false,   scaleControl: false, streetViewControl: true, //
        center: latlng,
        streetViewControl: false,
        scaleControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        zoomControl: true
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    var arrayMain = [];
    var markerLatLng = new google.maps.LatLng(48.856614, 2.352222);
    var marker = new google.maps.Marker({
        map: map,
        position: markerLatLng,
        center: markerLatLng
    });
    arrayMain.push(marker);
}

Upvotes: 1

geocodezip
geocodezip

Reputation: 161404

Your marker is out of view. It is at 51.5661728,51.5661728:

createLocationOnMap('4 bed semi detached For sale', new google.maps.LatLng(51.5661728,51.5661728), '<p>48, The fairway, wembley, HA..</p>');}

Your map is centered at 51.561918,-0.31237799999996696

var mapOptions = {
  zoom: 11,
  center: new google.maps.LatLng(51.561918,-0.31237799999996696),
  mapTypeId: google.maps.MapTypeId.ROADMAP,scrollwheel: false
};

working fiddle

Upvotes: 2

Vaflan
Vaflan

Reputation: 103

Try like this:

<div id="mapview" style="width: 100%; height: 700px">    
<script>
    var map;
    var info_window;
    function addMarkersc() {
        var titulo = '4 bed semi detached For sale';
        var posicao = new google.maps.LatLng(51.5661728,51.5661728);
        var conteudo = '<p>48, The fairway, wembley, HA..</p>';
        var image = '../Image/salemarker.png';
        var m = new google.maps.Marker({
            map: map,
            title: titulo,
            icon: image,
            position: posicao,
            html: conteudo
        });      
        google.maps.event.addListener(m, 'mouseover', function () {
            info_window.setContent(this.html);
            info_window.open(map, this);
        });
    }
    function initialize() {
        var mapOptions = {
            zoom: 11,
            center: new google.maps.LatLng(51.561918,-0.31237799999996696),
            mapTypeId: google.maps.MapTypeId.ROADMAP,scrollwheel: false
        };
        map = new google.maps.Map(document.getElementById('mapview'),mapOptions);
        var image = '../Image/salemarker.png';
        var user = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(51.561918,-0.31237799999996696),
            animation: google.maps.Animation.DROP,
            icon: image
        });
        var circle = new google.maps.Circle({
            map: map,
            radius: 1609.344,    // 10 miles in metres
                  strokeColor: '#08355A;',
                  strokeOpacity: 0.8,
                  strokeWeight: 2,
                  fillColor: '#fffff',
                  fillOpacity: 0.2,
        });
        info_window = new google.maps.InfoWindow({
            content: 'loading'
        });
        user.setMap(null);
        circle.bindTo('center', user, 'position');
        map.fitBounds(circle.getBounds());
        addMarkersc();
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

Upvotes: 1

Related Questions