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.
Related
What I want to achieve:
I want to display a search box in google map. When a user search a location, result is displayed in map box. On the map, when a user RightClick, I want to store the marker in database.
Resource I tried to implement
storing marker to database:
https://www.sanwebe.com/2013/10/google-map-v3-editing-saving-marker-in-database
displaying search box in map
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
I tried to implement these two as one: here is my minimal code
var mapCenter = new google.maps.LatLng(27.7172, 85.3240);
var map;
google.maps.event.addDomListener(window, 'load', map_initialize);
function map_initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
center: mapCenter,
zoom: 13,
mapTypeId: 'roadmap'
});
google.maps.event.addListener(map, 'rightclick', function(event) {
create_marker(event.latLng);
});
}
function create_marker(MapPos) {
var marker = new google.maps.Marker({
position: MapPos,
map: map
});
}
#map {
height: 200px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
With this code when I right click on the map, nothing happens i.e. neither the marker shows nor any error.
The map variable needs to be accessible from your create_marker function, therefore you declared it outside of your other functions. But also inside the map_initialize function. Remove the var declaration from there and it will work.
I have edited your original question to include a MCVE which means that I removed 90% of your code to keep only what you were after: adding a marker on right click.
Please take that as a suggestion for how to write your next questions.
var mapCenter = new google.maps.LatLng(27.7172, 85.3240);
google.maps.event.addDomListener(window, 'load', map_initialize);
function map_initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: mapCenter,
zoom: 13,
mapTypeId: 'roadmap'
});
google.maps.event.addListener(map, 'rightclick', function(event) {
create_marker(event.latLng);
});
}
function create_marker(MapPos) {
var marker = new google.maps.Marker({
position: MapPos,
map: map
});
}
#map {
height: 200px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
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.
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);
I need people to be able to click on the map, place a marker, update the input fields, and still be able to dbl click to zoom in more even after the marker is set.
What I have now does everything besides allow a dblclick event to zoom.
var map;
var marker = null;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.639, -95.689),
zoom: 3
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
$("#latcoord").val(event.latLng.lat());
$("#longcoord").val(event.latLng.lng());
if (marker) { marker.setMap(null); }
marker = new google.maps.Marker({ position: event.latLng, map: map});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Thanks!
set disableDoubleClickZoom to false
like this
map.set("disableDoubleClickZoom", false);
It won't even log to the console. I'm not sure what's going on here:
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(-41.2, 173.3),
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
}
var homeMarker = new google.maps.Marker();
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListener(map, "click", function(event) {
// If the marker already exists, set it's position to null
if (homeMarker) {
homeMarker.setPosition(null);
}
// Instantiate the marker again
homeMarker = new google.maps.Marker({
position: event.latLng,
map: map,
title: 'Your Home Location',
draggable: true
});
// Set the input fields to the latitude and longitude
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
$('input#homeLat').val(latitude.toFixed(6));
$('input#homeLong').val(longitude.toFixed(6));
});
// What is wrong here?
google.maps.event.addListener(homeMarker, "dragend", function(event) {
console.log('foo');
});
Basically, what is meant to happen is that I want to fetch the coordinates from the new position of the marker, which can be changed via a click on the map and a drag of the marker itself. I've got the former working, but my eventListener for dragend doesn't seem to be firing at all. Any ideas?
Alert while dragging, same code works for me.
getPosition() helps to get the current marker position
Try this,
google.maps.event.addListener(homeMarker, "dragend", function(event) {
alert('map dragged');
homeMarker.getPosition();
});