I a using Google Maps in my app.
The user is to be able to place a marker on any place in the map.
To this end I wrote the following code:
var marker;
function myMap() {
var mapCanvas = document.getElementById("map-canvas");
var myCenter=new google.maps.LatLng(50.833,-12.9167);
var mapOptions = {center: myCenter, zoom: 5};
var map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
//marker.setMap(null); // this line does not work
placeMarker(map, event.latLng);
});
}
function placeMarker(map, location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
The marker is supposed to always move to the place where the user clicked.
The line
marker.setMap(null);
is supposed to remove the old marker (before the new marker is placed).
However, with this line in the code I cannot place any markers any more. Not including this line means that every marker stays in the map and is not removed (i.e. the map is filling up with markers over time).
Look at the javascript console, you will see Uncaught TypeError: Cannot read property 'setMap' of undefined. The first time, marker is null, you need to only set its map property to null if it already exists.
google.maps.event.addListener(map, 'click', function(event) {
if (marker) marker.setMap(null);
placeMarker(map, event.latLng);
});
proof of concept fiddle
code snippet:
var marker;
function myMap() {
var mapCanvas = document.getElementById("map-canvas");
var myCenter = new google.maps.LatLng(50.833, -12.9167);
var mapOptions = {
center: myCenter,
zoom: 5
};
var map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
if (marker) marker.setMap(null);
placeMarker(map, event.latLng);
});
}
function placeMarker(map, location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
google.maps.event.addDomListener(window, "load", myMap);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
The problem is that you try to use method setMap after the first click when marker variable doesn't have this method. So, first check if marker has the method and then call it.
google.maps.event.addListener(map, 'click', function(event) {
// check if setMap is available and call it.
if(marker.hasOwnProperty('setMap')){
marker.setMap(null);
}
placeMarker(map, event.latLng);
});
Related
This question already has an answer here:
Open infoWindows from an external link outside of the google map
(1 answer)
Closed 4 years ago.
I am displaying markers and info windows on a Google Map using the following (partial) code. I have a listener setup so that when you click a marker, the corresponding info window shows (attached to the marker).
My question is, how can I access the info windows outside of this listener? For example, if I wanted to write Javascript to arbitrarily choose an info window and display it over its marker, can I do that by using its ID somehow?
This code was mostly taken from Google example scripts.
var bounds=new google.maps.LatLngBounds();
var infowindow=new google.maps.InfoWindow(), marker, i;
for (i=0; i<markerLength; i++){
var position=new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker=new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
setmarkers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i){
return function(){
infowindow.setContent(infocontent[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
You could use the position of the marker in an array (if you know it) or you could assign your markers with some custom id property and trigger a click event on a specific marker based on that id.
var map = null;
var markers = [];
var infowindow = new google.maps.InfoWindow();
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(43.907787, -79.359741),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Setup three markers with info windows
var point;
point = new google.maps.LatLng(43.65654, -79.90138);
createMarker(point, 'This is marker with id aaa', 'aaa');
point = new google.maps.LatLng(43.91892, -78.89231);
createMarker(point, 'This is marker with id abc', 'abc');
point = new google.maps.LatLng(43.82589, -79.10040);
createMarker(point, 'This is marker with id ccc', 'ccc');
}
function createMarker(latlng, html, id) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
myCustomId: id
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
}
function clickMarker(id) {
// Loop through markers array
for (var i=0; i<markers.length; i++) {
// Check custom id
if (markers[i].myCustomId === id) {
// Trigger marker click
google.maps.event.trigger(markers[i], 'click');
}
}
}
initialize();
#map_canvas {
height: 150px;
}
<div id="map_canvas"></div>
<hr>
<button onClick="clickMarker('aaa')">Marker with id aaa</button>
<button onClick="clickMarker('abc')">Marker with id abc</button>
<button onClick="clickMarker('ccc')">Marker with id ccc</button>
<script src="https://maps.googleapis.com/maps/api/js"></script>
It is said in documentation, that I can set content to node, not only to string, in InfoWindow.
Unfortunately, when I try to set node, it doesn't work:
var point;
point = new google.maps.LatLng(43.65654, -79.90138);
// html = 'hello world';
html = $('<div>hello world</div>');
var marker = new google.maps.Marker({
position: point,
map: map
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(html);
infowindow.open(map, marker);
});
Jsfiddle is here: https://jsfiddle.net/pmek2zhs/3/
Click on marked and you'll see nothing appears. If you change html variable assignment to commented one, it will work.
$('<div>hello world</div>'); is not an HTML node, it is a JQuery object.
Use $('<div>hello world</div>')[0] to get something the API can use.
updated fiddle
code snippet:
var map = null;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(43.907787, -79.359741),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Add markers to the map
// Set up three markers with info windows
var point;
point = new google.maps.LatLng(43.65654, -79.90138);
// html = 'hello world';
html = $('<div>hello world</div>')[0];
var marker = new google.maps.Marker({
position: point,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
google.maps.event.trigger(marker, 'click');
}
initialize();
html,
body {
height: 100%;
}
#map_canvas {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
I am new to JS and having challenges on resizing my google map. My problem: that only a third of my map is displaying and this is because a resize trigger needs to be implemented. My question: Where exactly do I correctly place the below trigger code within my script to implement it correctly.
Any help will be much appreciated
google.maps.event.trigger(map, 'resize');
Script:
<script type="text/javascript">
var map;
/*use google maps api built-in mechanism to attach dom events*/
google.maps.event.addDomListener(window, "load", function () {
/*create map*/
var map = new google.maps.Map(document.getElementById("googleMap"), {
center: new google.maps.LatLng(51.506477,-0.071741),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
/*create infowindow (which will be used by markers)*/
var infoWindow = new google.maps.InfoWindow();
/*marker creater function (acts as a closure for html parameter)*/
function createMarker(options, html) {
var marker = new google.maps.Marker(options);
if (html) {
google.maps.event.addListener(marker, "click", function () {
infoWindow.setContent(html);
infoWindow.open(options.map, this);
});
}
return marker;
}
/*add markers to map*/
var marker0 = createMarker({
position: new google.maps.LatLng(51.506477,-0.071741),
map: map,
icon: "../../account/gallery/1700728/images/marker-red.png"
}, "<p>Saint Katharine's Way London E1W 1LD, United Kingdom</p>");
});
$(document).ready(function() {
$('#googleMap').css({'width':'100%','height':'380'});
google.maps.event.trigger(map, 'resize');
});
</script>
This is my code
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
//map.on('click', function(){});
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latlng,
map: map
});
map.setCenter(event.latlng);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
when I click on the map nothing happens. So, I tried to make alter like this:
google.maps.event.addListener(map, 'click', function(event) {
alter("here");
var marker = new google.maps.Marker({
position: event.latlng,
map: map
});
map.setCenter(event.latlng);
});
The alter works. so the function is being executed but the marker is not being added, could you help please? many thanks
Edit
I tried to do this:
alert(event.latlng);
and I got undefined
I think you are using incorrect variable. It should be event.latLng instead of event.latlng. Note the uppercase L in variable name.
Demo: http://jsfiddle.net/lotusgodkk/x8dSP/3578/
position: event.latLng,
Trying out tha Maps API. I got stuck at removing markers.
Adding Marker works great, but deletion isnt working.
Any idea why this would not work? Thank in advance!
function placeMarker(event) {
var marker = new google.maps.Marker({
clickable: true,
position: event.latLng,
map: map
});
}
function deleteMarker() {
marker.setMap(null);
marker = null;
}
function initialize() {
var mapOptions = {
zoom: 8,
center: home
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListener(map,'rightclick', placeMarker);
google.maps.event.addListener(marker,'click', deleteMarker);
}
google.maps.event.addDomListener(window, 'load', initialize);
Defining global variables
var map,
marker,
home = new google.maps.LatLng(46.5, 13.5);
results in error message:
Uncaught TypeError: Cannot read property '__e3_' of undefined main.js:15
from line
google.maps.event.addListener(marker, 'click', deleteMarker);
marker is still undefined because it is not created and event listener cannot be attached to it. That line has to be moved to placeMarker() function:
function placeMarker(event) {
marker = new google.maps.Marker({
clickable: true,
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, 'click', deleteMarker);
}
See example at jsbin.