I'm quite a noob when it comes to Javascript, but I'm trying out something for my website/school project.
On a map I want to display 2 locations, with each a marker and an informationwindow of there own. 1 shows my location + contact details, the second marker should display other details for a company.
I've managed to get 2 markers in the map to display at the place I want to, but the next problem is giving each marker it's own InfoWindow.
var Rafael = new google.maps.LatLng(52.341949,6.682236);
var Aandagt = new google.maps.LatLng(52.341949,6.782236);
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(52.341949,6.682236),
streetViewControl: false,
zoomControl: false,
panControl: false,
scaleControl: false,
overviewMapControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: Rafael,
map: map,
title:"Rafael"
});
var marker = new google.maps.Marker({
position: Aandagt,
map: map,
title:"Aandagt"
});
var infowindow = new google.maps.InfoWindow({
content: '<h9>AANDAGT Reclame & Marketing</h9><h10><br /><br />Einsteinstraat 8b<br />7601 PR Almelo<br /><br />Telefoon (0546) 85 03 69<br />Fax (0546) 45 53 31<br /><br />info#aandagt.nl</h10>'
})
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close(map,marker);
});
Any help or suggestion how to add and attach 2 InfoWindows, 1 for marker 'Rafael' and 1 for marker 'Aandagt' would be much appreciated.
To view my current map: http://www.imrafaelhi.nl/stageverslag/?page_id=266
You have created 2 markers with different position values and an mouseover listener for the marker named Rafael.
I suggest you declare the markers as: marker1 and marker2.
Then create 2 contentstrings vars for each infowindow associated with each marker: content1, content2
Add a listener (mouseover) for each marker to show the content string.
Add a listener (mouseout) to close the infowindow associated with the marker.
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, this);
});
// assuming you also want to hide the infowindow when user mouses-out
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
you can give id to every marker..and can access those markers with their ids:
var marker = new google.maps.Marker({
position:mycenter,
title:infoName,
id: count++
// animation:google.maps.Animation.BOUNCE
});
if(marker.id == count) //get access to marker id value..
{
//do what you want..
}
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 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
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.
I am making a website over cyclists killed in Norway. For my project I have been using google maps api v3, but I have vague familiarity with javascript. You can see my result so far here: http://salamatstudios.com/googlemapstest/
Basicly I want to have multiple markers with infowindows on each one. Each one of the infowindows will contain:
Name (age),
Location,
Date of death,
Read more (which will be linked to a page on the website itself).
Like this example here: http://salamatstudios.com/bicycles/
I tried working with just one marker and infowindow and that worked just fine. When I want to add new markers with custom info windows on each I get stuck. At the moment I have 3 markers on different locations as seen in the first link, but none of the info windows appear when I click the marker..
How do I go around it to code it so the infowindows appear? And how can I have custom text in every infowindow? I am going to have about 30-40 markers on the map when it is done. All of the info windows will have different types of information.
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(65.18303, 20.47852),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// MAP CONTROLS (START)
mapTypeControl: true,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_TOP
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
// MAP CONTROLS (END)
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
// -------------- MARKER 1
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(59.96384, 11.04120),
map: map,
icon: 'img/bike5.png'
});
// MARKER 1'S INFO WINDOW
var infowindow1 = new google.maps.InfoWindow({
content: 'Name<br />Location<br />Date<br /><br />Read more(test link)'
});
// End of infowindow code
// Adding a click event to the marker
google.maps.event.addListener(marker1, 'click', function() {
// Calling the open method of the infoWindow
infowindow1.open(map, marker);
});
// -------- END OF 1st MARKER
// -------------- MARKER 2
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(60.63040, 8.56102),
map: map,
icon: 'img/bike5.png'
});
// MARKER 2'S INFO WINDOW
var infowindow2 = new google.maps.InfoWindow({
content: 'Name<br />Location<br />Date<br /><br />Read more(test link)'
});
// End of infowindow code
// Adding a click event to the marker
google.maps.event.addListener(marker2, 'click', function() {
// Calling the open method of the infoWindow
infowindow2.open(map, marker);
});
// -------- END OF 2nd MARKER
// -------------- MARKER 3
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(60.39126, 5.32205),
map: map,
icon: 'img/bike5.png'
});
// MARKER 3'S INFO WINDOW
var infowindow3 = new google.maps.InfoWindow({
content: 'Name<br />Location<br />Date<br /><br />Read more(test link)'
});
// End of infowindow code
// Adding a click event to the marker
google.maps.event.addListener(marker3, 'click', function() {
// Calling the open method of the infoWindow
infowindow3.open(map, marker);
});
// -------- END OF 3rd MARKER
}
google.maps.event.addDomListener(window, 'load', initialize);
Would be great if some could give me a clue. I've tried searching around a bit, but I can't really find my answer. Thanks in advance! :-)
You need to attach the infowindow to the correct markers. Currently they are all associated with "marker", which doesn't exist (and should cause an error message in the javascript console when you click on the markers).
Inside the click listener change:
infowindow1.open(map, marker);
infowindow2.open(map, marker);
infowindow3.open(map, marker);
To:
infowindow1.open(map, marker1);
infowindow2.open(map, marker2);
infowindow3.open(map, marker3);
working example
In addition to HoangHieu Answer when you use for loop it better to use it this way:
marker.info = new google.maps.InfoWindow({
content: 'some text'
});
google.maps.event.addListener(marker, 'click', function() {
this.info.open(map, this);
});
google.maps.event.addListener(marker1, 'click', function() {
// Calling the open method of the infoWindow
infowindow1.open(map, marker);
});
change to
google.maps.event.addListener(marker1, 'click', function() {
// Calling the open method of the infoWindow
infowindow1.open(map, this);
});