I've created some code to create a google map and it pulls in some marker data. How would I structure this code to only have a single Infowindow open at once? The more direct answer the better.
function initializeLocations(locations) {
$.each(locations, function (i, location) {
var marker = new google.maps.Marker({
position: location.geo,
map: map,
title: location.name
});
var contentName = '<br><b>' + location.name + '</b><br>';
var contentLink = 'More Info';
var contentAddress = location.address;
var content = contentName + contentAddress + contentLink
var infoWindow = new google.maps.InfoWindow({
content: content
});
marker.addListener('click', function() {
infoWindow.open(map, this);
});
});
}
I found the solution. Heres what i did.
function initializeLocations(locations) {
var infoWindow = new google.maps.InfoWindow({});
$.each(locations, function (i, location) {
var marker = new google.maps.Marker({
position: location.geo,
map: map,
title: location.name
});
var contentName = '<br><b>' + location.name + '</b><br>';
var contentLink = 'More Info';
var contentAddress = location.address;
var content = contentName + contentAddress + contentLink
google.maps.event.addListener(marker, 'click', (function(marker) {
return function(){
infoWindow.setContent(content);
infoWindow.open(map, marker);
}
})(marker));
});
}
Related
I have multiple markers on the map that I have imported from JSON. Inside the marker infowindow I have a button and when clicking on that, I want to change the marker image. Please check my code below. Marker list and Infowindow is working fine. I just want to do some actions on the button that is inside infowindow.
var workerlist;
var jobprice;
var price;
var map;
var list;
var position;
var image;
var image1;
var marker;
function myMap() {
var mapProp= {
center:new google.maps.LatLng(30.7333,76.7794),
zoom:10,
disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById("map"),mapProp);
image = 'images/blue_marker1.png';
image1 = 'images/pink_marker1.png';
console.log(workerlist);
for (var i = 0; i < workerlist.length; i++) {
list = workerlist[i];
price = jobprice;
position = new google.maps.LatLng(list.latitude,list.longitude);
addMarker(map,list,price,position,marker);
}
}
function addMarker(map,list,price,position,marker){
marker = new google.maps.Marker({
position: position,
title: list.name,
map: map,
icon: image
});
var contentString = '<div class="mapBox">'+
'<div class="content"> <h3>'+ list.name +
'</h3>'+
'<h6>(2.1 miles from the job venue)</h6>' +
'<div class="rating"></div>'+
'<p>Total cost to hire:</p>'+
'<p>Rate: $' + price.Price + ' per hour</p>'+
'<p>Total Cost: $'+ price.total_amount +'</p>'+
'</div><button id="shortList" class="btn btn-shortlist" onclick="shortList()">Shortlist for the JOb</button>'+
'</div>';
marker.addListener('click', function() {
if (typeof infowindow != 'undefined') infowindow.close();
infowindow = new google.maps.InfoWindow({
content: contentString,
})
infowindow.open(map,marker)
$("#shortList").click(function(){
image = 'images/pink_marker1.png';
});
});
}
function shortList(){
// alert('clicked');
// infowindow.close();
//marker.setIcon(image1);
}
Before you can access the <button id="shortList"> in the DOM with JQuery, it needs to be added to the DOM. That happens asynchronously when the InfoWindow content is rendered, the domready event on the InfoWindow fires when it is available.
google.maps.event.addListener(infowindow, 'domready', function() {
$("#shortList").click(function() {
// code here to change the icon
});
});
related question: How to detect button click in googlemaps infowindow
If you want the icon of the marker to change, you need to call .setIcon on the marker:
marker.addListener('click', function() {
if (typeof infowindow != 'undefined') infowindow.close();
infowindow = new google.maps.InfoWindow({
content: contentString,
})
infowindow.open(map, marker)
var that = this; // save reference to marker to change its icon
google.maps.event.addListener(infowindow, 'domready', function() {
$("#shortList").click(function() {
image = 'http://maps.google.com/mapfiles/ms/micons/orange.png';
that.setIcon(image);
});
});
});
proof of concept fiddle
code snippet:
var workerlist;
var jobprice = {
Price: "$10",
total_amount: "$100"
};
var price;
var map;
var list;
var position;
var image;
var image1;
var marker;
workerlist = [{
name: "Chandigarth",
latitude: 30.7333,
longitude: 76.7794
},
{
name: "Chandigarth2",
latitude: 30.7,
longitude: 76.7
}
]
function myMap() {
var mapProp = {
center: new google.maps.LatLng(30.7333, 76.7794),
zoom: 10,
disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
image = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
image1 = 'http://maps.google.com/mapfiles/ms/micons/orange.png';
console.log(workerlist);
for (var i = 0; i < workerlist.length; i++) {
list = workerlist[i];
price = jobprice;
position = new google.maps.LatLng(list.latitude, list.longitude);
addMarker(map, list, price, position, marker);
}
}
function addMarker(map, list, price, position, marker) {
marker = new google.maps.Marker({
position: position,
title: list.name,
map: map,
icon: image
});
var contentString = '<div class="mapBox">' +
'<div class="content"> <h3>' + list.name +
'</h3>' +
'<h6>(2.1 miles from the job venue)</h6>' +
'<div class="rating"></div>' +
'<p>Total cost to hire:</p>' +
'<p>Rate: $' + price.Price + ' per hour</p>' +
'<p>Total Cost: $' + price.total_amount + '</p>' +
'</div><button id="shortList" class="btn btn-shortlist" onclick="shortList()">Shortlist for the JOb</button>' +
'</div>';
marker.addListener('click', function() {
if (typeof infowindow != 'undefined') infowindow.close();
infowindow = new google.maps.InfoWindow({
content: contentString,
})
infowindow.open(map, marker)
var that = this;
google.maps.event.addListener(infowindow, 'domready', function() {
$("#shortList").click(function() {
image = 'http://maps.google.com/mapfiles/ms/micons/orange.png';
that.setIcon(image);
});
});
});
}
function shortList() {
// alert('clicked');
// infowindow.close();
//marker.setIcon(image1);
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Info Windows</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=myMap&libraries=&v=weekly" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
</body>
</html>
I want to add multiple markers and infowindows that activated with a click.
I am having trouble to present the relevant infowindow of the marker, after a click the same infowindow open for all markers.
The information comes from a for loop
this is the code
function GetMarkerSuccess(results) {
results = $.parseJSON(results.d);
markers = [];
infowindows = [];
for (var i = 0; i < results.length; i++) {
var myLatLng = { lat: results[i].Latitude, lng: results[i].Longitude };
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon:'images/car.png'
});
var infowindow = new google.maps.InfoWindow({
content: "<div style='text-align:right'><h3>" + results[i].Date.substring(0, 10) + "</h3><p> התחלה: " + results[i].Starttime + " סיום: " + results[i].Endtime + "</p><p> ₪ מחיר:" + results[i].Price + "</p></div>"
});
markers.push(marker);
infowindows.push(infowindow);
listenMarker(marker);
function listenMarker(marker) {
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
}
}
function GetMarkerSuccess(results) {
results = $.parseJSON(results.d);
markers = [];
infowindows = [];
for (var i = 0; i < results.length; i++) {
var myLatLng = { lat: results[i].Latitude, lng: results[i].Longitude };
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon:'images/car.png'
});
var infowindow = new google.maps.InfoWindow({
content: "<div style='text-align:right'><h3>" + results[i].Date.substring(0, 10) + "</h3><p> התחלה: " + results[i].Starttime + " סיום: " + results[i].Endtime + "</p><p> ₪ מחיר:" + results[i].Price + "</p></div>"
});
markers.push(marker);
infowindows.push(infowindow);
listenMarker(marker);
function listenMarker(marker) {
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
}
}
I've got code to allow users to pin a marker on a map. What I am missing is how to save the markers so that when the map reloads, the markers are still there.
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var map;
var myCenter=new google.maps.LatLng(38.9047,-77.0164);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:7,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
You could utilize google.maps.Data API for that purpose, the example below demonstrates how to save and load markers info via localStorage.
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
});
infowindow.open(map, marker);
//place marker info
map.data.add(new google.maps.Data.Feature({properties:{},geometry:new google.maps.Data.Point(location)}));
}
function saveMarker() {
map.data.toGeoJson(function (json) {
localStorage.setItem('geoData', JSON.stringify(json));
});
}
function clearMarkers() {
map.data.forEach(function (f) {
map.data.remove(f);
});
}
function loadMarkers(map) {
var data = JSON.parse(localStorage.getItem('geoData'));
map.data.addGeoJson(data);
}
Demo
Hello I'm retrieving data from SqlServerCe so I created foreach loop to create markers - that works it creates multiple markers but now I wanted to add to each of these marker an infowindow. But now whenever I click on marker the infowindow pops-up on the lastly created marker.
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
, mapProp);
$(function () {
#foreach (var row in data)
{
<text>
var marker = new google.maps.Marker({ position: new google.maps.LatLng(#row.GeoLat, #row.GeoLong),
map: map });
marker.info = new google.maps.InfoWindow({
content: "test"
});
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
});
</text>
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
May someone help me with adding infowindow to each created markers?
Thank you for your responding and your time.
This is how I load from SqlServerCe
var db = Database.Open("StarterSite");
var data = db.Query("SELECT DescriptionService,GeoLong,GeoLat FROM services");
var array = new []{data} ;
You can use the following, written in javascript
var infoWindowContent = [];
for(var index=0; index< places.length; index++){
infoWindowContent[index] = getInfoWindowDetails(places[index]);
var location = new google.maps.LatLng(places[index].latitude,places[index].longitude);
bounds.extend(location);
marker = new google.maps.Marker({
position : location,
map : map,
title : places[index].title
});
google.maps.event.addListener(marker, 'click', (function(marker,index){
return function(){
infoWindow.setContent(infoWindowContent[index]);
infoWindow.open(map, marker);
map.setCenter(marker.getPosition());
map.setZoom(15);
}
})(marker,index));
}
function getInfoWindowDetails(location){
var contentString = '<div id="content" style="width:270px;height:100px">' +
'<h3 id="firstHeading" class="firstHeading">' + location.title + '</h3>'+
'<div id="bodyContent">'+
'<div style="float:left;width:100%">'+ location.address + '</div>'+
'</div>'+
'</div>';
return contentString;
}
I added an array infoWindowContent then added the information to the array. You can use the same logic
Hello I cannot figure out why I get this error.
I've got a list with inputs which values contain lat/long/name/address.
Printing the markers on the map works fine, using the infowin workED fine, till I realized that it only openend the same info in all windows. Soo, obviously I needed to attach this (the marker i just clicked) to the eventListner.
But, when doing this I get an error saying view.createMarkerHTML is not a function.
Question: What do I do to attach the right info to be open, on the right marker?
view = {
map: {
init: function init (){
view.map.initMap();
},
initMap: function initMap() {
if(navigator.geolocation) {
function hasPosition(position) {
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
myOptions = {
zoom: 12,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
mapDiv = document.getElementById("map"),
map = new google.maps.Map(mapDiv, myOptions);
view.map.handleMarkers(map);
}
navigator.geolocation.getCurrentPosition(hasPosition);
}
},
handleMarkers: function handleMarkers(map) {
var list = $('#pois input'),
l = list.length,
i = 0, lat = '', long = '', marker = {}, theName = '', address = '', info = {};
for (i = 0; i < l; i += 1) {
info = $(list[i]).val().split('|');
lat = parseFloat(info[0], 10);
long = parseFloat(info[1], 10);
theName = info[2];
address = info[3];
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
map: map,
icon: icon
});
google.maps.event.addListener(marker, 'click', function() {
currentMarker = this;view.map.createMarkerHTML(map, theName, address);
});
}
} ,
createMarkerHTML: function createMarkerHTML(map, theName, address) {
var contentString =
'<div id="gMapInfoWin">' +
'<h1>' + theName + '</h1>' +
'<ul>' +
'<li>' + address + '</li>' +
'</ul>' +
'</div>'
;
currentMarker.infowindow = new google.maps.InfoWindow({
content: contentString
});
currentMarker.infowindow.open(map, currentMarker);
}
}
};
Shouldn't you use a closure to keep the values of your variables set in the loop ?
(function(theName, address) {
google.maps.event.addListener(marker, 'click', function() {
currentMarker = this;view.map.createMarkerHTML(map, theName, address);
});
}(theName, address));
You could even add your marker in parameter instead of using currentMarker
I'll wager that it's a scoping issue. Not having access to your libs I can't be sure that this will work, but try replacing:
google.maps.event.addListener(marker, 'click', function() {
currentMarker = this;view.map.createMarkerHTML(map, theName, address);
});
with this:
google.maps.event.addListener(marker,
'click',
createClickListener( this,
map,
theName,
address ) );
and then add this function somewhere else in the program:
function createClickListener( cm, map, theName, address )
{
return function() {
currentMarker = cm;
view.map.createMarkerHTML(map, theName, address);
}
}
for (i = 0; i < l; i += 1) {
info = $(list[i]).val().split('|');
lat = parseFloat(info[0], 10);
long = parseFloat(info[1], 10);
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
map: map,
icon: icon
});
marker.theName = info[2];
marker.address = info[3];
google.maps.event.addListener(marker, 'click', function() {
currentMarker = this;
m_name = this.theName;
m_address = this.address
view.map.createMarkerHTML(map, m_name, m_address);
});
}
marker.theName = info[2];
marker.address = info[3];
currentMarker = this;
m_name = this.theName;
m_address = this.address
... is the soulution!