I have a google map integration in my ionic app. I want my marker on map appear whenever map appears however it depends on 'click' event. I have changed into 'idle' however, it doesn't even show the content of marker.
Question: Into what shall I change 'click'?
function getMap(lat, lon, content) {
var latLng = new google.maps.LatLng(lat, lon);
var mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
//Wait until the map is loaded
google.maps.event.addListenerOnce($scope.map, 'idle', function () {
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
var infoWindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open($scope.map, marker);
});
});
}
just delete google.maps.event.addListener(marker, 'click', function () {}) and leave infoWindow.open($scope.map, marker); alone
Related
I am trying to create an infowindow that shows a piece of text 'this is my marker' when the map is loaded but it is not showing. I'm using the exact same code from my lecturer's powerpoint but idk where I'm going wrong.
function initialize(){
let mapDiv = document.getElementById('map');
let mapOptions = {
center: new google.maps.LatLng(Coords.lat,Coords.lng),
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID
};
let marker = new google.maps.Marker({
position: new google.maps.LatLng(40.72,-74.00),
map: map,
title: 'I am here!',
icon: svgMarker
});
var infoWindow = new google.maps.InfoWindow({content: 'This is my marker'});
google.maps.event.addListener(marker, 'click', function()
{
infoWindow.open(map,this);
});
map = new google.maps.Map(document.getElementById("map"), mapOptions);
};
You have the sequence slightly wrong. You are attempting to add both the marker & the infoWindow before you have created the map. Perhaps if you re-sequence your code a little like this:
/* assumed that a global variable exists */
let Coords={
lat:41,
lng:-75
};
function initialize(){
let options = {
center: new google.maps.LatLng( Coords.lat,Coords.lng ),
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID
};
let map = new google.maps.Map( document.getElementById("map"), options );
let marker = new google.maps.Marker({
position: new google.maps.LatLng(40.72,-74.00),
map: map,
title: 'I am here!'
/*,
icon: svgMarker
*/
});
let infoWindow = new google.maps.InfoWindow( { content:'This is my marker' } );
infoWindow.open( map, marker );
google.maps.event.addListener(marker, 'click', function(e) {
infoWindow.open(map,this);
});
};
To get the infoWindow to appear when the map is loaded you should call the open method and if you supply the previously created marker as the second argument it will appear in the correct location.
I want to completely remove the title tag when the user mouseovers on the marker. This is what I have tried so far.
jQuery("[title]").removeAttr("title");
jQuery("*").removeAttr("title");
Neither works.
I have referred to the below solutions also.
removing default mouseover tooltip from marker in google-maps
title of a marker of google map marker API
But could not find any solution that actually removes the title tag.
I have updated the script set properties: title: ''.
Updated
and it worked: http://jsfiddle.net/edf3gwuk/
var infowindow = new google.maps.InfoWindow();
function point(lat, long) {
var self = this;
self.name = name;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
title: '',
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'mouseover', function (e) {
e.mb.target.removeAttribute('title')
//infowindow.setContent(marker.title);
//infowindow.open(map, marker);
}.bind(this));
google.maps.event.addListener(marker, 'mouseout', function () {
infowindow.close();
}.bind(this));
}
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 5,
center: new google.maps.LatLng(55, 11),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
new point(58, 14);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>
<section id="Map">
<div id="googleMap" style="width:350px;height:600px;"></div>
</section>
my solution is set to the content of the label is empty
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.
Thanks for checking it out.. I have an issue with this .js were i am using jquery to resize the map-canvas div. But once it has been resized i need the actual google map to reset its boundaries which i am using google.maps.event.trigger(map, "resize"), here is my code but once it fires the resize of the div, it cannot run the resize map trigger due to it being undefined? here is my .js
// JavaScript Document
// Scripts below in regards to instantiating the google map.
var map;
function initialize() {
var myLatLng = new google.maps.LatLng(-34.1840517,150.7131903);
var mapOptions = {
zoom: 17,
center: myLatLng,
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_LEFT
}
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: myLatLng,
map: map,
title: '6 Station Street, Douglas Park, 2569'
});
var contentString = '<div id="mapContent">'+'TESTING'+'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(function() {
$("#expand-map").click(function() {
$("#map-canvas").animate({"height" : "800px"}, 500);
google.maps.event.trigger(map, "resize");
});
});
You have just call the initialize function to draw map again after the map-canvas dimensions changed in animate function callback.
$(function() {
$("#expand-map").click(function() {
$("#map-canvas").animate({"height" : "800px"}, 500,function(){
initialize();
});
});
});
see here:
demo jsfiddle
I have an instance of google.maps.InfoWindow, and it has a custom closing button. Which is triggered by onClick event. However, if I click on close button, the info window is closed, which is expected, but a new marker appears on the map, on a place where info window use to be. It looks like the onClick="infoWindow.close()" is the placeReclameMarker(event.latLng); simultaneously.
var map;
var infoWindow;
function initialize() {
var latlng = new google.maps.LatLng(47.030698, 28.850098);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function (event) {
placeReclameMarker(event.latLng);
});
}
function placeReclameMarker(location) {
var marker = new google.maps.Marker({
position: location,
draggable: true,
map: map
});
google.maps.event.addListener(marker, 'rightclick', function () {
infoWindow = new google.maps.InfoWindow({
content: '<input type="button" onclick="infoWindow.close()">'
});
infoWindow.open(map, marker);
});
}
i'm not sure you can visit infoWindow variable in infoWindow object inner.
try:
content: '<input type="button" onclick="parent.infoWindow.close()">'
or
content: '<input type="button" onclick="parent.parent.infoWindow.close()">'
or
content: '<input type="button" onclick="alert(infoWindow)">'
infoWindow variable must not to be undefined.
good luck
I was having the same problem. Found the solution. The thing is you should not only close the InfowWindow, but kill the marker also.
Try this;
var map;
var marker;
var infoWindow;
function whateverFunction() {
// some code here to create the marker and the infoWindow
infoWindow.open(map, marker);
infoWindow.setContent('<input type=button name=Close onClick="marker.setMap(null);">');
}
Worked perfectly for me.