google.maps.event.addDomListener(window, 'load', initialize);
I've put a google map on a static page in my rails app. Upon initial load the map is fine but I don't know the right javascript to make it load on subsequent page loadings.
The code responsible:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(52.619885, -0.523137);
var mapOptions = {
zoom: 10,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Welcome!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Try
google.maps.event.trigger(map, 'resize');
This should refresh the map
Related
So I'm trying to implement Google maps on a website, and on my localhost it works fine, and I see it perfectly.
However when I upload this to my hosting company, the map doesn't show at all.
When I inspect the element and check the console, I don't see any errors.
Code is below:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(53.092975, -7.895479);
var mapOptions = {
center: myLatlng,
zoom:16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'LCCEurotex'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I have no idea what could be causing it as my code looks the same as the one from the google documentation.
Any ideas on what could be causing it would be great.
Thanks for any help!
Move this portion of code to the footer page, Probably you has binding the map and div container is not property loaded, additionally, tray adding a heigth to the id map_canvas as default in your css.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDo7nFkoUthlGms4De0miS4EPfupB5x0cY"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(53.092975, -7.895479);
var mapOptions = {
center: myLatlng,
zoom:16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'LCCEurotex'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
In your CSS
div#map-canvas {
height: 500px !important;
}
Only add http:// to url of google maps api, change this line:
<script type="text/javascript" src="maps.google.com/maps/api/js?sensor=false"></script>
By this:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
I would like to ask you a solution for this problem.
I have a JS with a variable inside that is updated overtime by a JAVA application (i.e. JAVA writer into a thread), after that I take the coordinates from that variable and I create a new object Marker for my google maps. The problem is that the marker does not changes position, it changes only if I refresh the whole page (I dont want to do this).
Here's the code to be more clear.
The inputData.js where the variable is written by the java application
var newMarker = {'latitude':38.25705300000004,'longitude': 140.83760400000006};
my html page used to display the map
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MYKEY">
</script>
<script type="text/javascript" src="inputData.js"></script>
<script>
var map;
var sendai = new google.maps.LatLng(38.259535, 140.846816);
var lastPosition;
var image = 'images/circle-16.png';
function initialize() {
var mapOptions = {
zoom: 12,
center: sendai,
mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
setInterval(refreshData, 2000);
function refreshData() {
var marker = new google.maps.Marker({
map: map,
icon: image,
draggable: false
});
marker.setPosition(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setCenter(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setZoom(18);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
If I open my page like this everything work but when I change the script "inputData.js" the marker does not changes position.
The method setCenter on the other hand seems to work properly.
Help me please!
You'll need to reload the updated script to get the updated position:
function initialize() {
var mapOptions = {
zoom: 18,
center: sendai,
mapTypeId: google.maps.MapTypeId.ROADMAP},
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions),
//we will store the LatLng here
pos = new google.maps.MVCObject(),
//use a single marker with updated position
marker = new google.maps.Marker();
//set the latLng of the MVCObject
pos.set('latLng',new google.maps.LatLng(newMarker.latitude,
newMarker.longitude));
//bind the markers position to the latLng of the MVCObject
marker.bindTo('position',pos,'latLng');
marker.setMap(map);
setInterval(function(){
//the currently loaded script
var script=document.querySelector('script[src^="inputData.js"]'),
//the updated script
update=document.createElement('script');
//load-handler for the updated script
google.maps.event.addDomListenerOnce(update,'load',function(){
pos.set('latLng',new google.maps.LatLng(newMarker.latitude,
newMarker.longitude));
map.setCenter(pos.get('latLng'));
map.setZoom(18);
});
//replace current script with updated script
script.parentNode.replaceChild(update,script);
//load update
update.src='inputData.js?'+new Date().getTime();
},2000);
}
You don't need to create new instance of marker every time. Update your code with this and try:
var map;
var sendai = new google.maps.LatLng(38.259535, 140.846816);
var lastPosition;
var image = 'images/circle-16.png';
function initialize() {
var mapOptions = {
zoom: 12,
center: sendai,
mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
var marker;
marker = new google.maps.Marker({
map: map,
icon: image,
draggable: false
});
marker.setPosition(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setCenter(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setZoom(18);
setInterval(refreshData, 2000);
function refreshData() {
marker.setPosition(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setCenter(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setZoom(18);
}
google.maps.event.addDomListener(window, 'load', initialize);
Is there a way to hyperlink a custom marker on google maps marker to its coordinates on Google Maps itself? In this case link to LatLng. Also, is there a way to open it in a new tab using target="_blank" or javascript with the same effect?
function initialize() {
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(-29.528000, 31.194881)
}
var map = new google.maps.Map(document.getElementById('ContactMap'),
mapOptions);
var image = '/Assets/Images/Pages/Marker.png';
var myLatLng = new google.maps.LatLng(-29.528000, 31.194881);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
A real hyperlink is not possible, but of course you may set up a click-listener to achieve a similar behaviour:
google.maps.event.addListener(beachMarker,'click',function(){
window.open('https://maps.google.com/maps?q=' +
this.getPosition().toUrlValue() +
'&z='+this.getMap().getZoom(),'google');
});
I'm getting the "Cannot call method 'addDomListener' of undefined" error with the google.maps.event.addDomListener(window, 'load', initialize); code line, where event is 'undefined'. My code below is basically copied from an example on developer.google.com.
$(function () {
var officeMap = $("#map-canvas");
if (officeMap.length > 0) {
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644), zoom: 8
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
}
});
The google maps script (with API key) is loaded before this at the end of the document body (using Modernizr), looking like this: "https://maps.googleapis.com/maps/api/js?key=myApiKey&sensor=false" (I switch "myApiKey" with generate key ofc :))
Does the error indicate that the Google Maps script didn't load first? Or is my API-key invalid?
Or something else?
The google code sample is correct, but not going to run in most website given there is ajax script loading involve. And yes you are right the google script is not loaded at the point when you call the function.
Take a look at the source of that google script, it is not the full javascript sdk, it is just a proxy/starter file. I remember it is not like this last time when those sample code works without problem.
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"></script>
<script>
function initialize() {
var officeMap = $("#map-canvas");
if (officeMap.length > 0) {
var map;
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644), zoom: 8
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
}
</script>
Try using this instead of your key
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false">
My code
var myCenter=new google.maps.LatLng(-34.397, 150.644);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById('maparea'),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
title:'Hi'
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:'',
boxStyle: {
maxHeight:200
}
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
This is my first time trying to embed google maps into a webpage.
I've followed instructions from the API site, and I've Googled other maps, but what I'm seeing doesn't seem to help.
Here's what I've got.
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
// Enable the visual refresh
google.maps.visualRefresh = true;
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(51.54968,-0.16305),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Your code doesn't create a marker. You should add something like
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.54968,-0.16305),
map: map,
title: "One title"
});