javascript - Open only one infowindow at a time google maps -
I am trying to create a Google map with several markers which only allows one info window at a time Marker IPs are the location of cameras and they are brought via Ruby. I have read the responses to similar questions, in which the solution is to create and reuse only one information window.
I have tried to apply the solution to many other questions, but I do not get it to work.
$ (document) .ready (function () {// execute (function () {// map options var option = {zoom: 2, center: new google.maps.LatLng ( 25, 10), // centric America mapTypeControl: false streetViewControl: false}; // map in the init map = new google.maps.Map (document.getElementById ('map-canvas'), option); // set multiple Marker at the top of the & lt;% @ cameras.each mark & gt; Marker & gt; // init marker & lt;% if c.deep_fetch (: location) {} = zero% = new Google !. Maps.Marker ({status: new google.maps.LatLng (& lt;% = c.deep_fetch (: location, latitude) {}%>, & lt;% = c.deep_fetch (: location ,: lng } {}% & Gt;), marked R: map, title: 'click me'}; // process multiple info windows (function (marker) {// click add event google.maps.event.addListener (marker, 'click', function () { Infiffando w = new google.maps.InfoWindow ({content: "from " + ' & Lt; / h5 & gt; '+' & lt; a href = "/ publiccam / & lt;% = c ['id']% & gt;" & Gt; View Camera & lt; / A & gt; & Lt; / P & gt; '}); Infowindow.open (map, marker, this); }); }) (Marker); & Lt;% end% & gt; & Lt;% end% & gt; }) (); });
Is it possible to create an info window for every camera, because of which I am creating a notification window with the camera & lt;% @ Do do c | % & Gt ;?
You should only an instance of infowindow object and setContent ( ) Use the method. Create the first Infinite object:
var infowindow = new google.maps.InfoWindow (); Then where you create your marker and click the Event Listener:
google.maps.event.addListener (marker, 'click', Function) {Infowindow.setContent ('infowindow content set here'); Infowindow.open (map, marker);}); Hope this will be helpful.
var map = zero; Var infowindow = new google.maps.InfoWindow (); Initialize function () {var myOptions = {Zoom: 8, Center: New google.maps.LatLng (43.9, 07787, -7.93,5 9, 741), 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 map marker // Set three markers with info window var point; Point = new google.maps.LatLng (43.65654, -79.90138); Make marker (point, 'this is point 1'); Point = new google.maps.LatLng (43.91892, -78.89231); Make marker (point, 'this point is 2'); Point = new google.maps.LatLng (43.82589, -79.10040); Make marker (point, 'this point is 3'); } Create markers (latlng, html) {var marker = new google.maps.marker ({status: latlng, map: map}); Google.maps.event.addListener (Marker, 'Click', function () {infowindow.setContent (html); infowindow.open (map, marker);}); } start over (); #map_canvas {height: 200px; } & lt; Div id = "map_canvas" & gt; & Lt; / Div & gt; & Lt; Script src = "https://maps.googleapis.com/maps/api/js" & gt; & Lt; / Script & gt;
Comments
Post a Comment