Marker on my Google map shows at first and disappears

Question

I have got a google map using custom style using API v3. The problem is that I am adding a marker to the map to show a Location.But when the page loads the marker shows up for a fraction of second and then disappears. I have used the script below to create the map.

Please let me know what can I do to fix this?

    <script type="text/javascript">

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

     function init() {

                var mapOptions = {

                    zoom: 14,


                    center: new google.maps.LatLng(19.235116, 72.8551),



                    styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"on"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"}]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#ffff00"},{lightness:-25},{saturation:-97}]}]
                };


              var map = new google.maps.Map(document.getElementById('map'), mapOptions);
              var myLatlng = new google.maps.LatLng(19.235116, 72.8551);

  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(19.235116, 72.8551),
      map: map,
      title: 'Photonics Enterprise'
  });

                var mapElement = document.getElementById('map');

              var map = new google.maps.Map(mapElement, mapOptions);
            }

             </script>

check my answer below. The problem is your are rewrinting the map you've just created, thus you are obtaining a new and empty map at the end of the execution of your code — sabotero

sabotero sabotero · Accepted Answer · 2014-05-31T13:29:46

The problem is your are rewrinting the map you've just created, thus you are obtaining a new and empty map at the end of the execution of your code

Try this:

<script type="text/javascript">

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

    function init() {
        //map options
        var mapOptions = {

            zoom: 14,
            center: new google.maps.LatLng(19.235116, 72.8551),
            styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"on"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"}]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#ffff00"},{lightness:-25},{saturation:-97}]}]
        };

        //creating map
        var map = new google.maps.Map(document.getElementById('map'), mapOptions);
        // creating latlng object                 
        var myLatlng = new google.maps.LatLng(19.235116, 72.8551);

        // creating marker and binding it to the map you have just created
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(19.235116, 72.8551),
            map: map,
            title: 'Photonics Enterprise'
        });

        // don't recreate the map, because you'll loose all objects in the map created above!!
        //var mapElement = document.getElementById('map');
        //var map = new google.maps.Map(mapElement, mapOptions);
    }

</script>

Marker on my Google map shows at first and disappears

1 Answers