multiple info windows on a map with google maps API - infowindow

As i just begin to understand how API v3 work, i have a problem to set different content for my info windows. I'm not a programmer also!! I'd like to put several markers (no problem) with different contents. The problem is i have only one info window working, not the second one. How to attribute a content to a specific marker. Can't find the way in the google maps documentation.
Here the code:
<script type="text/javascript">
google.maps.visualRefresh = true;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.648288,8.173828),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var contentString = '<iframe src="http://www.360- ----- vision.fr/panos/communes_ot_patrimoine/Sanary/" height="300px" width="500px"></iframe>'+
'<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Eglise Sanary</h2>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var image = 'images/marqueur-360.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(43.115145,5.789623),
map: map,
icon: image,
title:"Eglise de Sanary"
});
var contentString1 = '<iframe src="http://www.360- vision.fr/panos/communes_ot_patrimoine/castelsardo/" height="300px" width="500px"> </iframe>'+
'<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Castelsardo</h2>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString1
});
var image = 'images/marqueur-360.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(41.042074,8.739624),
map: map,
icon: image,
title:"Castelsardo"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Here the link to see my map.
map example
Thanks a lot for any suggestion.
Steph. :-)

Each infowindow can be linked to specific marker, name marker and infowindow accordingly .
Eg:
var marker= ....
var infowindow=...
infowindow.open(map,marker);
var marker2= ....
var infowindow2=...
infowindow2.open(map,marker2);

Related

Get FeatureId of target in popup on vector layer in Leaflet

The below code works ok, I get lots of interesting data in getFeatureId.
How do I get my hands on that in the popup ?
var map = L.map('map').setView([53.505, -7.09], 7);
L.tileLayer('https://{s}.etc.etc/{z}/{x}/{y}.png', {
attribution: 'osm..'
}).addTo(map);
var VectorTileOptions = {
rendererFactory: L.canvas.tile,
attribution: '',
interactive: true,
getFeatureId:function(feat){
return feat.properties.routes
}
};
var TilesPbfLayer = L.vectorGrid.protobuf(tileurl, VectorTileOptions).addTo(map);
var popup = L.popup();
map.on('popupopen', function(e) {
popup.setContent("how do i get the feature Id ? ")
});
TilesPbfLayer.bindPopup(popup)
I can get a click event on the tile layer, and its got a layer with my stuff in
TilesPbfLayer.on('click', function(e) {
if (e.layer)
popup.setContent(e.layer.properties.routes)
})

How can I Open Multiple Popups in Leaflet Marker at a time

Map` like this:
L.Map = L.Map.extend({
openPopup: function(popup) {
this._popup = popup;
return this.addLayer(popup).fire('popupopen', {
popup: this._popup
});
}
});
But I am using leaflet. Is there anyway to extent like so that i can prevent closing my marker popup?
L.mapbox.accessToken = constant.accessToken;
var map = L.mapbox.map('map', 'mapbox.streets', {zoomControl: true});
Update Dec 2017
Leaflet popup options have been extended to include { autoClose: false } which has the required effect :
var my_marker = L.marker([my_lat, my_lng], {icon: my_icon})
.addTo(map)
.bindPopup('My Popup HTML', {closeOnClick: false, autoClose: false});
Let me quote the Leaflet documentation on L.Popup:
Used to open popups in certain places of the map. Use Map.openPopup to open popups while making sure that only one popup is open at one time (recommended for usability), or use Map.addLayer to open as many as you want.
In order to open several popups, instantiate them using L.popup(latlng, options), then .addTo(map) them.
Define an array:
let map=L.map('mymap');
...
var markers = L.markerClusterGroup();
...
var marker=[];
marker[0]= L.marker([latitud1,longitud1]).addTo(map).bindPopup('Hola 0',{autoClose: false, closeOnClick: false});
marker[1]= L.marker([latitud2,longitud2]).addTo(map).bindPopup('Hola 1',{autoClose: false, closeOnClick: false});
To put on the map:
marker.forEach(function(marker) {
markers.addLayer(marker);
map.addLayer(markers);
});
Show the popup for only one:
var curPos = marker[0].getLatLng();
map.setView(new L.LatLng(curPos.lat,curPos.lng), 13);
marker[0].openPopup();
Show all popups:
marker.forEach(function(marker) {
var popup = marker.getPopup();
marker.bindPopup(popup.getContent()).openPopup();
});
Close all popups:
map.eachLayer(function (layer) {
layer.closePopup();
});

how to draw a line (between pushpins) exactly over the railroad in bing map

Here is my map of between points based on latitude & longitude.
if you observe the line and rail road carefully you see, the railroad is not straight line but the line i draw between pushpins are straight. But i need my drawing lines should be over the rail road. i am not sure whether it's possible or not. if possible please advice.
And here is my html code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Crossing Map</title>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
var pinLayer = new Microsoft.Maps.EntityCollection();
var infoboxLayer = new Microsoft.Maps.EntityCollection();
function GetMap() {
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{
credentials:"API Key"
});
// Create the info box for the pushpin
pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
infoboxLayer.push(pinInfobox);
//created variables(one variable per location)
var loc1 = new Microsoft.Maps.Location(29.775560, -95.348878);
// Add a pin to the map
var pin1 = new Microsoft.Maps.Pushpin(loc1);
pin1.Title = "Brooks St";
pin1.Description = "First PIn Descriptoin is here.";
pinLayer.push(pin1); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
var loc2 = new Microsoft.Maps.Location(29.776584, -95.348878);
// Add a pin to the map
var pin2 = new Microsoft.Maps.Pushpin(loc2);
pin2.Title = "Harrington St";
pin2.Description = "Second pin description";
pinLayer.push(pin2); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin2, 'click', displayInfobox);
var loc3 = new Microsoft.Maps.Location(29.778530, -95.348663);
// Add a pin to the map
var pin3 = new Microsoft.Maps.Pushpin(loc3);
pin3.Title = "Loraine St";
pin3.Description = "Third pin desc";
pinLayer.push(pin3); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin3, 'click', displayInfobox);
var loc4 = new Microsoft.Maps.Location(29.783419, -95.348963);
// Add a pin to the map
var pin4 = new Microsoft.Maps.Pushpin(loc4);
pin4.Title = "Quitman St";
pin4.Description = "pin 4 desc";
pinLayer.push(pin4); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin4, 'click', displayInfobox);
var loc5 = new Microsoft.Maps.Location(29.802104, -95.342655);
// Add a pin to the map
var pin5 = new Microsoft.Maps.Pushpin(loc5);
pin5.Title = "Calvalcade";
pin5.Description = "5th pin desc";
pinLayer.push(pin5); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin5, 'click', displayInfobox);
// Create a polyline
var lineVertices = new Array(loc1,loc2,loc3,loc4,loc5); //var lineVertices = new Array(loc1, loc2, loc3);
var line = new Microsoft.Maps.Polyline(lineVertices);
//map.setView({center:loc2, zoom: 9} );
map.setView({center:loc2, zoom: 15} );
map.entities.push(line);
map.entities.push(pinLayer);
map.entities.push(infoboxLayer);
}
function displayInfobox(e) {
pinInfobox.setOptions({
title: e.target.Title,
description: e.target.Description,
visible:true,
offset: new Microsoft.Maps.Point(0,25)
});
pinInfobox.setLocation(e.target.getLocation());
}
function hideInfobox(e) {
pinInfobox.setOptions({ visible: false });
}
</script>
</head>
<body onload="GetMap();">
<div class="wapper">
<div class="contentareaNoM safetybg">
<div id="core">
<div id='mapDiv' style="positio:relative; margin-left:100px; width:800px; height:800px;"></div>
</div>
</div>
</div>
</body>
</html>
You need to have the polyline (with coordinates) that corresponds to your railroad then you will be able to draw onto those elements. In this way, you will be able to have every point of the railway.
You can take a look at OpenStreetMap that include those element with precise geometry information where the coverage is good.

Google Map Makers Sprite in OSX not displaying

I can't seem to get the my map markers to display when I use an image sprite on the iphone. They appear when I use the standard google map markers on iphone and when viewing the site in the desktop the sprite icons work fine.
Here is the code I use to create the markers, I am using Zepto but JQuery could as easily apply.
$.ajax({
dataType: 'jsonp',
url: myLocations.LocatorUrl,
timeout: 8000,
success: function(data) {
var infoWindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
$.each(data, function(index, item){
var data = item, pincolor,
latLng = new google.maps.LatLng(data.lat, data.lng);
var d = 'http://blah';
var pinImage = new google.maps.MarkerImage(d+"/assets/img/sprite.locator.png",
new google.maps.Size(24, 36),
new google.maps.Point(0,25),
new google.maps.Point(10, 34));
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.type,
icon: pinImage
});
bounds.extend(latLng); // Extend the Latlng bound method
var bubbleHtml = '<div class="bubble"><h2>'+item.type+'</h2><p>'+item.address+'</p></div>'; // Custom HTML for the bubble
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(bubbleHtml);
infoWindow.open(map, marker);
});
markers.push(marker); // Push markers into an array so they can be removed
})(marker, data);
});
map.fitBounds(bounds); // Center based on values added to bounds
}, error: function(x, t, m) {
console.log('errors')
if(t==="timeout") {
alert("got timeout");
} else {
alert(t);
}
}
});
Got it. Turns out the images I was referencing were on localhost, when I swapped this to the actual IP address of my local machine it worked.

Multiple Pushpin with infobox in Bing Map

I am trying to add multiple pushpin with separate infobox. that means each pushpin will have their own infobox with own info.
there is a loop.inside that
latlng = new Microsoft.Maps.Location(latitude[pointerCount], longtitue[pointerCount]);
MarkingLocation[pointerCount] = new Microsoft.Maps.Pushpin(latlng, {icon:"marker2.ico", height:50, width:50, anchor:new Microsoft.Maps.Point(0,50)});
myInfobox = new Microsoft.Maps.Infobox(latlng, myinfoboxOption);
Microsoft.Maps.Events.addHandler(MarkingLocation[pointerCount], 'click', function() {myInfobox.setOptions({ visible:true });});
map.entities.push(MarkingLocation[pointerCount]);
map.entities.push(myInfobox);
Problem is that it's showing the last infobox only for every pushpin. Suppose I've 4 pushpin in Londom,France,Germany,America. now no matter which pin I've clicked, it's only show the America infobox on America pushpin.please can anyone help that what I've been missing.........
And one more thing, can anyone please show the way to use htmlContent in infobox. I've tried to set it thrugh option,but it's not woring......
myinfoboxoption = {width:300,
height: 100,
title: str_loc,
htmlContent: htmlc,
showPointer: false,
offset: new Microsoft.Maps.Point(-100,0)};
Please help........
This is how I implemented multiple infobox:
<html>
<head>
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script>
var pinInfoBox; //the pop up info box
var infoboxLayer = new Microsoft.Maps.EntityCollection();
var pinLayer = new Microsoft.Maps.EntityCollection();
var apiKey = "YourKey";
function GetMap() {
map = new Microsoft.Maps.Map(document.getElementById("map"), {credentials: apiKey});
// Create the info box for the pushpin
pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
infoboxLayer.push(pinInfobox);
for (var i = 0 ; i < 10; i++){
//add pushpins
var latLon = new Microsoft.Maps.Location(Math.random()*180-90, Math.random()*360-180);
var pin = new Microsoft.Maps.Pushpin(latLon);
pin.Title = name;//usually title of the infobox
pin.Description = "blahblahblah, "+ i; //information you want to display in the infobox
pinLayer.push(pin); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
}
map.entities.push(pinLayer);
map.entities.push(infoboxLayer);
}
function displayInfobox(e) {
pinInfobox.setOptions({title: e.target.Title, description: e.target.Description, visible:true, offset: new Microsoft.Maps.Point(0,25)});
pinInfobox.setLocation(e.target.getLocation());
}
function hideInfobox(e) {
pinInfobox.setOptions({ visible: false });
}
</script>
<style>
#map { position: absolute; top: 20; left: 10; width: 700px; height: 500px; border:#555555 2px solid;}
</style>
</head>
<body onload="GetMap()">
<div id="map">
</div>
</body>
In the end, you will get something like this:
Correction:
pin.Title = "TITLE: "+ i; //usually title of the infobox

Categories