Map on Website not see, but if I click on F12 for debug then it sudendly happen

Reply

sergeC

Member

34 Points

88 Posts

Map on Website not see, but if I click on F12 for debug then it sudendly happen

Apr 26, 2016 03:18 PM|sergeC|LINK

Dear all,

This thread is a more investigation from my side to try to know why my Map is not visible on my page.
The original thread can be seen here

Why I have notice that when I run my page which contain the MAP, then the square is gray out but the map is loaded as I can place pin.
Then if I press only once the F12 key to be in debug mode, then suddenly the MAP apears and the remains

Any idea ?

Sorry I am not an expert in this but can give you any needed infromation for helping me identify why it behaves like this

If I check the debuger while refreshing my page containing the map I have only the follwing warning :

"Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys"

regards

Reply

Fei Han - MS...

All-Star

40565 Points

6233 Posts

Microsoft

Re: Map on Website not see, but if I click on F12 for debug then it sudendly happen

Apr 27, 2016 05:26 AM|Fei Han - MSFT|LINK

Hi sergeC,

From the link, we could find that the script element that loads the API has no API key, which will cause NoApiKeys error.

sergeC
"Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys"

you could also ask for help on Google Maps JavaScript API forum.

http://stackoverflow.com/questions/tagged/google-maps-api-3

Best Regards,

Fei Han

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

Reply

sergeC

Member

34 Points

88 Posts

Re: Map on Website not see, but if I click on F12 for debug then it sudendly happen

Apr 30, 2016 03:27 PM|sergeC|LINK

I have added the following script as sugested and my page appears as see in below link :
https://onedrive.live.com/redir?resid=9ECBD63702497F70!13035&authkey=!ALyxepZH4eEpdH8&v=3&ithint=photo%2cPNG

As you can see the map area is not visible but if I click on it I manage to retrive Location value.

Once I click F12 to be in debug mode, map sundenly appears :
https://onedrive.live.com/redir?resid=9ECBD63702497F70!17080&authkey=!AGAig2JD8VYWwW8&v=3&ithint=photo%2cpng

Same thing happen either on IE v 11 or chrome

Any idea what is going on ?

Reply

sergeC

Member

34 Points

88 Posts

Re: Map on Website not see, but if I click on F12 for debug then it sudendly happen

May 03, 2016 06:52 AM|sergeC|LINK

anyone has any idea ?

Reply

Fei Han - MS...

All-Star

40565 Points

6233 Posts

Microsoft

Re: Map on Website not see, but if I click on F12 for debug then it sudendly happen

May 05, 2016 08:30 AM|Fei Han - MSFT|LINK

Hi sergeC,

sergeC
Once I click F12 to be in debug mode, map sundenly appears

I’d like to know whether the map will never show in browser if you don’t press F12 to use developer tools, or it will show after a time. Besides, do you ask for help on Google Maps JavaScript API forum?

http://stackoverflow.com/questions/tagged/google-maps-api-3

Best Regards,

Fei Han

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

Reply

sergeC

Member

34 Points

88 Posts

Re: Map on Website not see, but if I click on F12 for debug then it sudendly happen

May 10, 2016 11:06 AM|sergeC|LINK

Dear Fei,

Map never appears in browser.

It appears only after pressing the F12.

Yes I have send message to Google Maps JavaScript API forum and they ask me to place the key and I have done exactly how they suggest me but with same result
Here is the link of my post without real answer :
http://stackoverflow.com/questions/36907029/map-only-visible-on-my-web-page-if-i-press-f12-key-under-ie/36934960#36934960

Here is below how my page which contains the map looks like :

@model ProductAddressVM
@using HS.Helpers;
@using SCMS.Web.Helpers;
@{
	UserInfoDTO uiDTO = AppHelper.GetUserInfoDTOFromSession();
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBfMACVTyH7ibKt5vrSqesJSXUUubYvhJ8" async defer></script>


<div class="panel-body">
	   @using (Ajax.BeginForm("addUpdateProductAddress", "product", null,
	   new AjaxOptions { OnBegin = "showLoader", OnComplete = "hideLoader", OnSuccess = "addEditPASuccess", OnFailure = "addEditPAFailure" },
	   new { @id = "frmProductAddress", @class = "form-horizontal", @role = "form" }))
	{
		   @Html.ValidationSummary(true)
		   @Html.HiddenFor(m => m.ProductID)
		   <div id="ajaxErrorSA" class="validation-summary-errors" style="display: none;">
		   </div>
		   <div id="alertPAAddUpdate" class="alert alert-success" style="display: none;">@Resources.AlertDataSaveSuccess</div>
	   <div>
		   @Html.HiddenFor(m => m.AddressID, new { @id = "hdnAddressID" })
		   <div class="form-group required">
			   @Html.LabelFor(m => m.AddressLine1, new { @class = "col-sm-2 control-label" })
			   <div class="col-sm-4">
				   @Html.TextBoxFor(m => m.AddressLine1, new { @maxlength = "30", @class = "form-control" })
				   @Html.ValidationMessageFor(mbox => mbox.AddressLine1)
			   </div>
		   </div>
		   <div class="form-group">
			   @Html.LabelFor(m => m.AddressLine2, new { @class = "col-sm-2 control-label" })
			   <div class="col-sm-4">
				   @Html.TextBoxFor(m => m.AddressLine2, new { @maxlength = "30", @class = "form-control" })
			   </div>
		   </div>
		   <div class="form-group required">
			   @Html.LabelFor(m => m.City, new { @class = "col-sm-2 control-label" })
			   <div class="col-sm-4">
				   @Html.TextBoxFor(m => m.City, new { @maxlength = "30", @class = "form-control" })
				   @Html.ValidationMessageFor(mbox => mbox.City)
			   </div>
		   </div>
		   <div class="form-group required">
			   @Html.LabelFor(m => m.PostalCode, new { @class = "col-sm-2 control-label" })
			   <div class="col-sm-4">
				   @Html.TextBoxFor(m => m.PostalCode, new { @maxlength = "15", @class = "form-control" })
				   @Html.ValidationMessageFor(m => m.PostalCode)
			   </div>
		   </div>

		   <div class="form-group required">
			   @Html.LabelFor(m => m.CountryRegionName, new { @class = "col-sm-2 control-label" })
			   <div class="col-sm-4">
				   @Html.DropDownListFor(m => m.ConutryRegionCode, ViewBag.CountryList as List<SelectListItem>, htmlAttributes: new { @id = "ddlContryRegion", @class = "form-control pull-left col-lg-4" })
			   </div>
		   </div>

		   <div class="form-group required">
			   @Html.LabelFor(m => m.StateProvinceName, new { @class = "col-sm-2 control-label" })
			   <div class="col-sm-4">
				   @Html.DropDownListFor(m => m.StateProvinceID, ViewBag.StateProvinceList as List<SelectListItem>, new { @id = "ddlStoreProvince", @class = "form-control pull-left col-lg-4" })
				   @Html.ValidationMessageFor(m => m.StateProvinceID)
			   </div>
		   </div>
		   <div class="form-group">
			   @Html.LabelFor(m => m.GLat, new { @class = "col-sm-2 control-label"})
			   <div class="col-sm-4">
				   @Html.TextBoxFor(m => m.GLat, new { @maxlength = "50", @class = "form-control", Id = "latitude" })
				   @Html.ValidationMessageFor(m => m.GLat)
			   </div>
		   </div>
		   <div class="form-group">
			   @Html.LabelFor(m => m.GLon, new { @class = "col-sm-2 control-label" })
			   <div class="col-sm-4">
				   @Html.TextBoxFor(m => m.GLon, new { @maxlength = "50", @class = "form-control", Id = "longitude" })
				   @Html.ValidationMessageFor(m => m.GLon)
			   </div>
		   </div>
		   
			   <div class="col-sm-offset-2 col-sm-6">
				   <div id="dvMap" style="width: 500px; height: 500px">
				   </div>
			   </div>
			
		   <div class="form-group">
			   <div class="col-sm-offset-2 col-sm-6">
				   <button type="submit" class="btn btn-default" id="btnSave"><i class="fa fa-check fa-fw"></i>@Resources.lblSave</button>
			   </div>
		   </div>

	   </div>

 }
</div>


<script src="@Url.Content("~/Scripts/Core/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script type="text/javascript">

	function initializeMap() {
		var mapOptions = {
			center: new google.maps.LatLng(50.838901385494296, 4.3560791015625),
			zoom: 10,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};

		var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

		var markers = [];


		var infoWindow = new google.maps.InfoWindow();
		var latlngbounds = new google.maps.LatLngBounds();
		var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

		function setMapOnAll(map) {
			for (var i = 0; i < markers.length; i++) {
				markers[i].setMap(map);
			}
		};

		google.maps.event.addListener(map, 'click', function (e) {
			$('#latitude').val(e.latLng.lat());
			$('#longitude').val(e.latLng.lng());

			//add marker on click
			var marker = new google.maps.Marker({
				position: e.latLng,
				map: map,
				title: 'marker'
			});
			setMapOnAll(null);
			markers.push(marker);
		}
		)
	}

	function addEditPASuccess(data) {
		hideLoader();
		if (data) {
			showSaveMessage("alertPAAddUpdate");
		}
		else {
			$('.validation-summary-errors').css('display', 'block');
			var errObj = $('#ajaxErrorPA');
			errObj.html(data.msg);
			errObj.css('display', 'block');
		}
	}

	function getStateProvienceList(crCode, spID) {
		$.ajax({
			url: ServerBaseURL + "userProfile/GetStateProvinceList",
			type: "GET",
			cache: false,
			data: { crCode: crCode, spID: spID },
			beforeSend: showLoader,
			complete: hideLoader,
			success: function (data) {
				hideLoader();
				if (data != typeof undefined && data != null && data.FetchSuccess) {
					var ddlHtmlText = data.DDlStateProvinceHtml;
					if (ddlHtmlText.length > 0) {
						$('#ddlStoreProvince').empty();
						$('#ddlStoreProvince').append(ddlHtmlText);
					}
					else {
						$('#ddlStoreProvince').empty();
						$('#ddlStoreProvince').append('<option value="" selected="selected">' + _LS['SelectDDL'] + '</option>');
					}
				}
				else {
					alert(_LS['Error']);
				}
			},
			failure: function (xhr) {
				hideLoader();
				alert(_LS['NetworkReqFailure']);
			}
		});
	}
	
	$(document).ready(
		function ()
		{
		$("#ddlContryRegion").on("change", function () {
			var selectedCountry = $(this).val();
			if (selectedCountry != null && selectedCountry != "") {
				getStateProvienceList($(this).val(), 0);
			}
			else {
				$("#ddlStoreProvince").empty().append('<option value="" selected="selected">' + _LS['SelectDDL'] + '</option>');
			}
		});

		initializeMap();
		}
		);

		//var mapOptions = {
		//center: new google.maps.LatLng(50.838901385494296, 4.3560791015625),
		//zoom: 10,
		//mapTypeId: google.maps.MapTypeId.ROADMAP 
		//};

		//var markers = [];

		//
		//var infoWindow = new google.maps.InfoWindow();
		//var latlngbounds = new google.maps.LatLngBounds();
		//var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

		//function setMapOnAll(map) {
		//	for (var i = 0; i < markers.length; i++) {
		//		markers[i].setMap(map);
		//	}
		//}
		////
		//google.maps.event.addListener(map, 'click', function (e) {
		//	$('#latitude').val(e.latLng.lat());
		//	$('#longitude').val(e.latLng.lng());

		//	//add marker on click
		//	var marker = new google.maps.Marker({
		//		position: e.latLng,
		//		map: map,
		//		title: 'marker'
		//	});
		//	setMapOnAll(null);
		//	markers.push(marker);
	//}
	//);

</script>

The map get display in the "dvMap" DIV element. Then map is initialised by the InitializeMap() script method. In this method, I am wondering if the problem occurs because it cannot find the dvMap element may be ?

I have notice that if I insert this line below before the map variable in order to know if the div section can be reach :

var oVDiv = document.getElementById("dvMap");
		alert("The content of the first dvMap element is " + "\"" + oVDiv.innerHTML + "\".");

It does not return the map div !!!!!

Instead it return : " The content of the first dvmap element is <div style="overflow:hidden;"></div>

I wish you could help because I am figthing with this for weeks now :-(

regards

Reply

sergeC

Member

34 Points

88 Posts

Re: Map on Website not see, but if I click on F12 for debug then it sudendly happen

May 12, 2016 09:56 AM|sergeC|LINK

Any idea ?

Reply

sergeC

Member

34 Points

88 Posts

Re: Map on Website not see, but if I click on F12 for debug then it sudendly happen

Jul 28, 2016 07:40 AM|sergeC|LINK

Dear all,

I still have this issue and have no idea how to solve it. What I have notice a new thing is as follow :

When my page is loaded the first time then, the map is not visible but I can interact with it.
Then when I change the size of the internet explorer window, suddendly the map appaears correctly.

Any idea what is going on ? any refressing issue which is not happening ?

regards

serge

Reply

shivigupta31...

Participant

1222 Points

371 Posts

Re: Map on Website not see, but if I click on F12 for debug then it sudendly happen

Jul 28, 2016 08:27 AM|shivigupta31web|LINK

Hi sergeC,

Try changing the zie of your map div, alter the height and width using CSS or inline CSS and then try, mostly the design issue can be cause of such anomaly.

Hope this helps.

Thanks.
Stay humble.

Reply

jmpalines

Member

230 Points

148 Posts

Re: Map on Website not see, but if I click on F12 for debug then it sudendly happen

Jul 28, 2016 08:46 AM|jmpalines|LINK

fire up fiddler then browse the page see if any resource are not loaded

Map on Website not see, but if I click on F12 for debug then it sudendly happen RSS

9 replies

Shortcuts

Map on Website not see, but if I click on F12 for debug then it sudendly happen

Re: Map on Website not see, but if I click on F12 for debug then it sudendly happen

sergeC

Re: Map on Website not see, but if I click on F12 for debug then it sudendly happen

Re: Map on Website not see, but if I click on F12 for debug then it sudendly happen

Re: Map on Website not see, but if I click on F12 for debug then it sudendly happen

sergeC

Re: Map on Website not see, but if I click on F12 for debug then it sudendly happen

Re: Map on Website not see, but if I click on F12 for debug then it sudendly happen

Re: Map on Website not see, but if I click on F12 for debug then it sudendly happen

Re: Map on Website not see, but if I click on F12 for debug then it sudendly happen

Re: Map on Website not see, but if I click on F12 for debug then it sudendly happen