I have js script file. Where I use google heatmap
Here is code of js file
$(document).ready(function () {
//map initialization
function initMap() {
map = new google.maps.Map(document.getElementById('map'),
{
zoom: 5,
center: { lat: 51.0742853, lng: 11.0294547 },
mapTypeId: 'roadmap'
});
var centerControlDiv = document.createElement('div');
var centerControlDiv2 = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, map);
var centerControl2 = new CenterControl1(centerControlDiv, map);
centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
getDriving();
}
});
In View I have script
script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCea6mL2cqwVid2ESIjuJ0C31RbNVQNPY0&libraries=visualization&callback=initMap">
When I run project I have initMap is not a function error. How I can fix it.
Delete callback=initMap not solve problem
Here is how scripts defined
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCea6mL2cqwVid2ESIjuJ0C31RbNVQNPY0&libraries=visualization&callback=initMap">
</script>
<script src="~/Scripts/DataTables-1.10.2/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css" />
<script src="~/Scripts/jquery-ui.min.js"></script>
<script src="~/Scripts/Datepicker-Languages/datepicker-languages.js"></script>
<link href="~/Content/Styles/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script src="~/Scripts/jQuery-ui-extensions/weekMonthDatepicker.js?v=1.0.0.0"></script>
<script src="~/Scripts/Reports/Heatmap.js"></script>
InitMap in this row <script src="~/Scripts/Reports/Heatmap.js"></script>
Remove the async, which tells the Browser to parse the code independently of the rest of the code being loaded and just rely on the defer, which tells the browser to wait until the document is loaded until executing it.
<script defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCea6mL2cqwVid2ESIjuJ0C31RbNVQNPY0&libraries=visualization&callback=initMap">
OR change the order of the scripts in the file to:
<script src="~/Scripts/Reports/Heatmap.js"></script>
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCea6mL2cqwVid2ESIjuJ0C31RbNVQNPY0&libraries=visualization&callback=initMap">
</script>
You also don't need to wait for the document to load (and don't want to) to define your function so remove the first and last lines.
//map initialization
function initMap() {
map = new google.maps.Map(document.getElementById('map'),
{
zoom: 5,
center: { lat: 51.0742853, lng: 11.0294547 },
mapTypeId: 'roadmap'
});
var centerControlDiv = document.createElement('div');
var centerControlDiv2 = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, map);
var centerControl2 = new CenterControl1(centerControlDiv, map);
centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
getDriving();
}
Related
I want to display a Google map - however, the latter isn't filled (no Google's logo is shown, neither the cities, streets, etc.). There's no error in the console. Here is an illustration of the problem:
Sources
The following code is an extract. Tags like <body>, etc. are not shown.
<div style="width: 500px; height: 500px;">
<div style="width: 500px; height: 500px;" id="page-gaz-de-ville-map"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var map;
$.getScript('https://maps.googleapis.com/maps/api/js?key=XYZ', initMap);
function initMap() {
var clusterStyles = [];
var mapstyles = [];
map = new google.maps.Map(document.getElementById('page-gaz-de-ville-map'), {
styles : mapstyles
});
}
});
</script>
Question
It is a fake API key.
Why is the map empty and how can I fix the problem?
I would recommend loading the js file as:
<script async defer src=".....key=XYZ&callback=initMap"></script>
This should ensure the deferred loading which I guess you were trying to achieve through the getScript call.
And define the initMap function at a script element in the head tag. Did the trick for me.
Please take the below code,
<!--- First of all need to add below script --->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=Your Key&v=3&libraries=places,visualization"></script>
<!--- Below code is used to invoke the google map --->
<script type="text/javascript">
$(document).ready(function() {
myLatlng = new google.maps.LatLng(64485, 2674827.909);
var myOptions = {
zoom: 18,
zoomControl: true,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
myMarker = new google.maps.Marker({
position: myLatlng
});
myMarker.setMap(map);
});
</script>
<!--- Html code --->
<div style="width: 600px; height: 400px;" id="map_canvas"></div>
Let me know if you have any questions.
This is actually You Want. 1st You Must Add HTML, BODY Tags, then Must Import JQuery Plugin ($(document) is JQuery)
$(document).ready(function () {
var map;
$.getScript('https://maps.googleapis.com/maps/api/js?key=XYZ', initMap);
function initMap() {
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(9.981496491854426, 76.30557754516597),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('page-gaz-de-ville-map'), myOptions);
}
});
You need to generate an api key.
and replace the XYZ, in javascript call, by your key.
can't seem to make this works
function initialize() {
var myLatlngBDG = new google.maps.LatLng(-6.913947, 107.633825);
var mapOptionsBDG = {
zoom: 5,
center: myLatlngBDG,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var mapBDG = new google.maps.Map(document.getElementById('map-BDG'), mapOptionsBDG);
var markerBDG = new google.maps.Marker({
position: myLatlngBDG,
map: mapBDG,
title: 'PT. Buana Citra Abadi Bandung'
});
};
google.maps.event.addDomListener(window, 'load', initialize);
the map itself is displayed, but the markes does not appear, and so is the title
according to this tutorial I need to write marker.setMap() to show marker, but as you can see I already write it
if the problem itself is not in the javascript then this might be the problem
the order including the script in HTML :
<html>
<<link rel="stylesheet" type="text/css" href="css/map.css"/>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8k-8ztQ6Vk34XP6OEBMZ7PryuMx8jjX8&callback=initMap"></script>
<script src="js/map.js"></script>
</html>
NEW PROBLEM
why is the map sometimes appears sometimes disappears? I mean when I refresh the page, it disappears, the I refresh several times and it re appears
It seems that everything is fine, take this code as an example and check yours maybe you find any difference
google.maps.event.addDomListener(window, "load", function () {
var myLatlngBDG = new google.maps.LatLng(-6.913947, 107.633825);
var mapOptionsBDG = {
zoom: 5,
center: myLatlngBDG,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var mapBDG = new google.maps.Map(document.getElementById("map-BDG"), mapOptionsBDG);
var markerBDG = new google.maps.Marker({
position: myLatlngBDG,
map: mapBDG,
title: 'PT. Buana Citra Abadi Bandung'
});
markerBDG.setMap(mapBDG);
});
#map-BDG{
width:500px;
height:300px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1>Maps Example</h1>
<div id="map-BDG"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8k-8ztQ6Vk34XP6OEBMZ7PryuMx8jjX8"></script>
<script src="script.js"></script>
</body>
</html>
I've been trying to add google maps to my page with no avail. My code works fine independently but when I add to a real webpage the map doesn't show at all.
<div id="map" style="width:100%;height:500px"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&callback=initMap"
async defer></script>
And the page looks like this
As you can see, the div pops up but not the map. How would I get this to show?
Your myMap function has never been called. You can call it like,
function myMap() {
...
}
myMap();
or use callback parameter on the script..
<script async defer src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=myMap"> </script>
Edit
You're calling it wrong, it should be an &, not & in your script parameter. Try to change your code to,
<div id="map" style="width:500px;height:500px"></div>
<script>
function myMap() {
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom: 5
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>
<script async defer src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&callback=myMap"> </script>
For more detail, check out this fiddle.
- Edit 2 -
I have no idea why you can't get it to work in your site. Since I could do it just fine.
Below are the script that I inject during runtime on the console in your site.
$('.content--body__wrapper').append('<div id="map" />')
$('#map').attr('style', 'width:500px; height:500px')
$('.content--body__wrapper').append(`<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>`);
$('.content--body__wrapper').append(`<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&callback=initMap" async defer></script>`);
What I can tell from your screenshot is your initMap function does not get called. And I am not sure if it's the callback from google map since it provides no error in your console.
Below is an alternative approach, that you might want to try. Try to call initMap on the js instead of callback.
<div id="map" style="width:100%;height:500px"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI"></script>
<script>
$(function() {
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
initMap();
});
</script>
In my Django app I would like to load google map but it doesn't work. I have this situation:
index.html
<!DOCTYPE html>
<html>
<head>
# here other css
<style>
#mapCanvas {height: 400px;width: 100%;}
.dynamicCanvas {height: 400px;width: 100%;}
</style>
</head>
<body>
<div id="loadpage"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYKEY"></script>
# here other plugin
<script>
jQuery(document).ready(function($) {
// click on #btn_map and open the page with the map
$( document ).on( "click", '#btn_map', function( e ) {
e.preventDefault();
var href = $(this).attr('data-href');
$('#loadpage').load("./mypage.html"));
// google map initialize
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapCanvas"),
myOptions);
}
google.maps.event.addDomListener(window, "load", initialize);
});
});
</script>
</body>
</html>
mypage.html
<div>
<div id="mapCanvas" class="dynamicCanvas"></div>
</div>
In the console I don't get errors. Simply the mypage.html load and the google map doesn't load. Can you help me please?
It won't work. You can not bind window load function in a button click for a window which has been already loaded.
Note: Write all this code in that file which has div for map.
just exclude initialize() function from document.ready
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapCanvas"),
myOptions);
}
and call it from button click
jQuery(document).ready(function($) {
// click on #btn_map and open the page with the map
$(document).on("click", '#btn_map', function(e) {
initialize();
});
});
I am trying to add a Google Map to my website, and I tried this:
$.getScript("https://maps.googleapis.com/maps/api/js?sensor=false", function () {
alert("1");
var map;
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
alert("2");
map = new google.maps.Map(document.getElementById("container"), myOptions);
});
This is not working. Can anybody tell me why?
EDIT
Script loaded perfectly. I know this because alert(1) shows but after that control does not reach alert(2).
document.getElementById(id)
What is id, where did that get defined?
Also getScript is for doing Ajax requests, which isn't really how you should be doing Google Maps. Just call the script in the normal way, and have an init function which executes on document ready. Or even better use the window.load event listener that the Google Maps API provides for you anyway.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false" />
<script type="text/javascript">
function init(id)
{
var map;
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById(id), myOptions);
}
google.maps.event.addDomListener(window, 'load', init('yourDivID'));
</script>
You have to use async loading for this - https://developers.google.com/maps/documentation/javascript/tutorial#asynch
In the current approach, the script do this-
function getScript(src) {
document.write('<' + 'script src="' + src + '"' + ' type="text/javascript"><' + '/script>');
}
So, when you call $.getScript, that will goto void. And, google.maps.LatLng becomes undefined.
I've created a version with the async one. You can check the fiddle # http://jsfiddle.net/rifat/G3yPw/
You should have a look on your container div.
It must have specified width and height.
And I used to separate the affectation of LatLng :
var map;
var ll = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: ll,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("container"), myOptions);