CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-markersinfowindow
Rafael Klein
Rafael Klein

Reputation: 1

Multiple Marker InfoWindows in Javascript

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><a href="http://www.aandagt.nl">AANDAGT Reclame & Marketing</a></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 /><a href="mailto:[email protected]">[email protected]</a></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

Upvotes: 0

Views: 1159

Answers (2)

Gaurav Gupta
Gaurav Gupta

Reputation: 373

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..
 }

Upvotes: 0

user1484172
user1484172

Reputation: 21

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();
});

Upvotes: 0

Related Questions