Google Maps API not showing up in MVC5
Question
I followed this tutorial for creating a Google maps API in my ASP.NET MVC5 project.
I have added this code to my _Layout.cshtml (at the bottom, underneath the <html> section - have tried moving them to the <head> section as suggested here but it didn't make any difference):
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
$(document).ready(function () {
initialize();
});
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(6.9167, 79.8473),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
// create a marker
var latlng = new google.maps.LatLng(6.9167, 79.8473);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'My Place'
});
}
</script>
and this code to my view (in the place I want the map to show):
<div id="map_canvas" style="width: 640px; height: 480px;">
</div>
At the bottom of my _Layout <body> section, I have:
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
and in my registering bundles function (which I know is working because rendering other bundles elsewhere is working) I have:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
but it's not working. What I get is a blank space like this (click for bigger version if needed):
but no map.
I have viewed the page source and both sections of code appear in it. I don't know what else to look at or try, if maybe there's some crucial step that I'm missing, if I need to do something different for MVC5 (the tutorial was for MVC4), if the Google API has changed again and you need a key again to be able to use it, or if the problem is something else entirely.
Update: The code above is working in this fiddle (thanks HoangHieu for getting me started with JSFiddle), so the problem is definitely in the setting up or linking together, not with the JavaScript/JQuery itself.
2 answers
solution1
1 ACCPTED 2015-04-02 19:01:24
It turns out that this line
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
as given in the tutorial I was following, and several other online tutorials, is incorrect. Perhaps Google Maps has been updated since they were written. In any case, the src attribute should use a https URL, not http.
I simply changed it to
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false">
and everything worked.
Here is some documentation from Google which may help future readers:
HTTPS or HTTP
We think security on the web is pretty important, and recommend using HTTPS whenever possible. As part of our efforts to make the web more secure, we've made all of the Google Maps APIs available over HTTPS. Using HTTPS encryption makes your site more secure, and more resistant to snooping or tampering.
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY" type="text/javascript"></script>If required, you can load the Google Maps JavaScript API over HTTP by requesting http://maps.googleapis.com/ , or http://maps.google.cn for users in China.
solution2
0 2015-04-01 10:20:18
DEMO: http://jsfiddle.net/uL2Lshu6/
Update DEMO : DEMO: http://jsfiddle.net/uL2Lshu6/2/
if You wanna use $(document) , you must include "jQuery" into html code Have you include jQuery
I have change
$(document).ready(function () {
initialize();
});
to
window.onload = initialize;
and it worked. I think it's differences between JavaScript's window.onload and JQuery's $(document).ready()
More: window.onload vs $(document).ready()
The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (eg images) also has been loaded.
The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load.
His had been change http://maps.google.com/maps/api/js?sensor=false to https://maps.google.com/maps/api/js?sensor=false And it fixed..
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.