Below is the full code of my Google Maps javascript file. What I'm trying to do is first initialise the map, then dynamically add a marker and refresh the map.
// GLOBALS
var map;
function refreshMap() {
google.maps.event.trigger(map,'resize');
map.setCenter(map.get('originalCenter'));
}
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
scrollwheel: false,
center: new google.maps.LatLng(56.4611388, -2.9719832),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
originalCenter: new google.maps.LatLng(56.4611388, -2.9719832)
}
map = new google.maps.Map(map_canvas, map_options)
}
// Initialise Map
google.maps.event.addDomListener(window, 'load', initialize);
// Add a Marker
marker = new google.maps.Marker({
position: new google.maps.LatLng(56.4611388, -2.9719832),
map: map,
title: 'Marker'
});
// Refresh
refreshMap();
I'm getting the following error when refreshMap() is run:
Uncaught TypeError: Cannot read property '__e3_' of undefined main.js:15
Is this the correct way to refresh the map?
The way your code currently runs is it sets up the initialize function to run when the page load event fires, then creates a marker (map is not yet initialized as the page load event has not fired), then calls refreshMap (again before the page load event so the map is still not initialized). The code below triggers the refreshMap function when the button is clicked, but it can't be run until the page is loaded and the initialize function has run.
working fiddle
// GLOBALS
var map;
function refreshMap() {
google.maps.event.trigger(map, 'resize');
map.setCenter(map.get('originalCenter'));
}
// this function runs on the page load event after the DOM has been rendered
// and both the map_canvas and btn elements exist.
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
scrollwheel: false,
center: new google.maps.LatLng(56.4611388, -2.9719832),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
originalCenter: new google.maps.LatLng(56.4611388, -2.9719832)
};
map = new google.maps.Map(map_canvas, map_options);
// need do do this in the initialize function, after the page has loaded and the 'btn' exists
google.maps.event.addDomListener(document.getElementById('btn'), 'click', function () {
// Add a Marker
marker = new google.maps.Marker({
position: new google.maps.LatLng(56.4611388, -2.9719832),
map: map,
title: 'Marker'
});
// Refresh
refreshMap();
});
}
// Initialize Map
google.maps.event.addDomListener(window, 'load', initialize);
Related
I'm working with google maps api 3. It's a bit of annoyance, but how do I get infowindow.open after the marker and the map have loaded?
I've tried to add various listeners such as tilesloaded and idle and haven't had any joy.
In this working example you see the infowindow is loading before anything else:
http://codepen.io/anon/pen/WvbexY
function initialize() {
if (document.getElementById("maper")) {
var latlng = new google.maps.LatLng(52.370778, 4.899448);
var mapOptions = {
zoom: 11,
center: latlng,
scrollwheel: "",
scaleControl: "",
disableDefaultUI: "",
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var tinygmaps = new google.maps.Map(document.getElementById("maper"), mapOptions);
var marker = new google.maps.Marker({
map: tinygmaps,
position: tinygmaps.getCenter()
});
var contentString = '<p>WHY ME FIRST?</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
position: latlng,
});
infowindow.open(tinygmaps, marker);
//var openwindow = google.maps.event.addListener(tileListener, 'tilesloaded', open_infowindow); // Hummmm!
}
}
google.maps.event.addDomListener(window, 'load', initialize);
function open_infowindow() {
infowindow.open(tinygmaps, marker);
google.maps.event.removeListener(tileListener);
};
Edit: Changed the codepen to listen for tilesloaded before displaying the infowindow. The fork of your codepen with the tilesloaded listener is here: http://codepen.io/brenzy/pen/VLYwGN
Because SO needs some code:
google.maps.event.addListenerOnce(tinygmaps, 'tilesloaded', function() {
// open the infowindow
});
On my machine, listening for both tilesloaded and idle appear to function the same. (Without either listener, the infowindow is displayed before the map.)
I am assuming that your version didn't work, because you missed the line
infowindow.open(tinygmaps, marker);
when you were refactoring, so the infowindow was being opened before the listener fired.
http://task4adamholt.appspot.com/?guestbook_name=Cars
For some reason every time the mouse is clicked, whether it be on the table or the actual map itself it refreshes all the maps for some reason.
Does anyone have any idea why, it's really strange. The .js file includes the following function
function getLoc(lon,lat,id) {
function initialize() {
var mapProp = {
center: new google.maps.LatLng(lat, lon),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(id), mapProp);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map,
title: 'Sent Here!'
});
}
google.maps.event.addDomListener(window, 'click', initialize);
document.getElementById(id).style.display = 'block';
}
This is the line that's causing the problem.
google.maps.event.addDomListener(window, 'click', initialize);
It listens for a click on the window, and runs the functions whenever a click happens, refreshing the map. I would definitely change the 'click' event to something else, like DOM ready.
I am trying to load (append) a php script by name child.php to a parent.php file via ajax call.
$.get("child.php", function(data) {
$("div-for-child").append(data);
}
The child.php contain script to load google maps. But this is not happening.
<script>
window.onload = function(){
initialise(cordinates, id, paramas);
};
</script>
And the initialise function is:
function initialise() {
var myLatlng = new google.maps.LatLng(cordinates);
var mapOptions = {
zoom: 8,
minZoom: 6,
maxZoom: 17,
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.DEFAULT
},
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl:false, // Set to false to disable
mapTypeControl:false, // Disable Map/Satellite switch
scaleControl:false, // Set to false to hide scale
streetViewControl:false, // Set to disable to hide street view
overviewMapControl:false, // Set to false to remove overview control
rotateControl:false // Set to false to disable rotate control
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var image = new google.maps.MarkerImage("image/path", null, null, null, new google.maps.Size(40,52));
var marker = new google.maps.Marker({ // Set the marker
position: myLatlng, // Position marker to coordinates
icon:image, //use our image as the marker
map: map, // assign the market to our map variable
title: 'Click to visit our company on Google Places' });
var infowindow = new google.maps.InfoWindow({ // Create a new InfoWindow
content:"<h3>Snowdown Summit Cafe</h3><p>Railway Drive-through available.</p>" // HTML contents of the InfoWindow
});
google.maps.event.addListener(marker, 'click', function() { // Add a Click Listener to our marker
infowindow.open(map,marker); // Open our InfoWindow
});
}
google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded.
The initalise function is an external script.
So the final picture. Whenever I load or append child.php to parent.php via ajax. The map in child.php is not being loaded. I just get an empty div with no content.
The head section is:
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"> </script>
<script src="js/map.js"> // Initialise function is here in map.js file
</head>
I'm trying to get Google Maps to keep its center when resizing responsively.
I've managed to get the map to center but can't work out how to add my marker back in to the JS to make it center too. I'm using the code from here for the map centering... Google maps responsive resize
var map; //<-- This is now available to both event listeners and the initialize() function
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(LAT,LNG),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scrollwheel: false,
keyboardShortcuts: false,
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
The code I am using to center the map is above. I have the marker code below too, but I'm not sure how to add it to make it keep its center too.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(LAT,LNG),
map: map,
title: 'Title',
animation: google.maps.Animation.DROP,
})
}
Can anybody help with this?
Here is a first step to get what you want to do:
var map; //<-- This is now available to both event listeners and the initialize() function
var mapCenter; // Declare a variable to store the center of the map
var centerMarker; // declare your marker
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(LAT,LNG),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scrollwheel: false,
keyboardShortcuts: false,
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Create a new marker and add it to the map
centerMarker = new google.maps.Marker({
position: new google.maps.LatLng(LAT,LNG),
map: map,
title: 'Title',
animation: google.maps.Animation.DROP
});
mapCenter = map.getCenter(); // Assign the center of the loaded map to the valiable
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
// Here you set the center of the map based on your "mapCenter" variable
map.setCenter(mapCenter);
});
Edit: Based on #Chad Killingsworth comment:
You may want to add an 'idle' event handler to the map to set the mapCenter variable. You can achieve this like this:
google.maps.event.addListener(map,'idle',function(event) {
mapCenter = map.getCenter();
});
Description of the 'idle' event from the doc:
This event is fired when the map becomes idle after panning or zooming.
I have created a google map using "maps.googleapis.com/maps/api/js?v=3". In that map I am showing markers for different locations, which is working fine. Below is the code which i have used.
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map1'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(23.42323, -45.47653),
});
});
Now I want to add some more location markers in Ajax. For ex: I will add the location name from a dropdown, it will do an ajax call to the server side. Pull out the location latitude and longitude and will show in the map. How can i achieve it.
I have written a separate js function to do the ajax call, but inside that the code is not getting 'map' instance.Here I have used only this code
new google.maps.Marker({
map: map,
position: new google.maps.LatLng(23.42323, -45.47653),
});
Here I am not initializing the map again. So its not getting the map instance and throwing error. How to fix it.
The scope of your map is limited to inside your event handle. Try this:
var map, markerCollection;
google.maps.event.addDomListener(window, 'load', function() {
map = new google.maps.Map(document.getElementById('map1'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
function addMarker(lat, lng){
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat, lng),
});
markerCollection.push(marker);
}
NOTES:
1) Be to fill in the values for "latitude" and "longitude" when defining the center of your map. Otherwise you just would get a map displayed.
2) I know it might not be the best practice to add your markers into an array but I find this makes than easy to access latter.
Since map is not a global variable it is getting dereferenced. Make the map object either global or within a container function that stores all of your code.
Global JS example
//now it's global
var map;
google.maps.event.addDomListener(window, 'load', function () {
map = new google.maps.Map(document.getElementById('map1'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(23.42323, -45.47653),
});
});