I need to in InfoWindow show match.offer.text.
Each marker has a different match.offer.text.
This is my code:
var markerImageURL, lat, lng;
if (myoffer) {
markerImageURL = 'assets/img/markers/marker_my.png';
lat = match.lat;
lng = match.lng;
} else {
markerImageURL = 'assets/img/markers/marker_' + match.strength + '.png';
lat = match.offer.lat;
lng = match.offer.lng;
}
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: window.googleMap,
icon: {
size: new google.maps.Size(54,56),
url: markerImageURL
},
draggable: false,
visible: true
});
var infowindow = new google.maps.InfoWindow({
content: match.offer.text,
maxWidth: 300
});
window.googleMapMarkers.push(marker);
if(!myoffer) {
window.MVC.Events.GoogleMap.prototype.showInfoWindow(marker, infowindow, match);
}
Event triggered after clicking on the marker:
marker.addListener('click', function() {
infowindow.open(window.googleMap, marker);
}
Please, help me.
The content is applied to the marker on Open therefore your code will apply the content in last item in your loop to all markers, in your openWindow function add the content to a single infoWindow object i.e.
Also the Maps API has its own event wrapper for the click event
function initMarkers(){
//create markers
var marker = new google.maps.Marker();
google.maps.event.addListener(marker, 'click', openInfoWindow(marker, i));
}
var infowindow = new google.maps.InfoWindow();
function openInfoWindow(marker,index){
return function(e) {
//Close other info window if one is open
if (infowindow) {
infowindow.close();
}
var content = marker.offer.text;
infowindow.setContent(content);
setTimeout(function() {
infowindow.open(map, marker);
}, 200);
}
}
Related
Hi i building a store locator and i found this code online its workind fine
function generateMarkers(points) {
//var iconBase = "https://media.nisbets.com/static/content/banners/";
for (var i = 0; i < points.length; i++) {
var place = points[i];
var myLatLng = new google.maps.LatLng(place[0], place[1]);
var marker = new google.maps.Marker({
position: myLatLng,
name: place[2],
clickable: true,
map: map,
icon: /*iconBase + */"nisbets_storelocator_marker.png",
url: place[3]
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
setMapBounds(marker.getPosition());
markers.push(marker);
}
}
But instead of a link who redirect to a page i want a popup window with the place info inside the popup.
Please i need your help how to add the infoWindow to my code.
Thanks
Define a new InfoWindow
var infowindow = new google.maps.InfoWindow({
content: contentString
});
Add an event listener to each marker to open the InfoWindow.
marker.addListener('click', function() {
infowindow.open(map, marker);
});
Reference: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
I am Integrating google map.When I hover on marker it shows me location on marker.But my problem is when I hover on marker map moves. I want when I hover on marker position should be fixed.Here is My code:
function CreateMarker(Obj){
var $j=jQuery.noConflict();
var pos;
var allMarkers = [];
pos = new google.maps.LatLng(Obj['latitude'], Obj['longitude']);
var marker = new google.maps.Marker({
position: pos,
map: map,
zoom:14,
icon: gicons["blue"]
});
latlngbounds.extend(pos);
var str = '<div class="google_popup"><span style="color:#00aeef; font-weight:bold; font-size: 14px; ">'+Obj['name']+'</span></b><div>'+Obj['address']+'</div><div>'+Obj['city']+', '+Obj['state']+' '+Obj['zip']+'</div><div> '+Obj['email']+'</div><div>'+Obj['phone']+'</div></div>';
google.maps.event.addListener(marker, "click", function() {
map.panTo(pos);
map.setZoom(14);
info.setContent(str);
info.open(map, marker);
//openTrInfo($("#" + Obj['elemID'])[0], false);
var emid=Obj['elemID'];
merchant_deals(emid);
});
google.maps.event.addListener(marker, "mouseover", function () {
marker.setIcon(gicons["grey"]);
// map.panTo(pos);
info.setContent(str);
info.open(map, marker);
var emid=Obj['elemID'];
});
google.maps.event.addListener(marker, "mouseout", function () {
marker.setIcon(gicons["blue"]);
info.close(map, marker);
});
gmarkers.push(marker);
return marker;
}
When you create your infowindow, set the disableAutoPan property to false. By default this is true, so the map automatically pans when the infowindow opens, when you do info.open(map, marker);
https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions
var info = new google.maps.InfoWindow();
var info = new google.maps.InfoWindow({
disableAutoPan: true
});
I have this working multy markers script. Markers are printed on the map but when I click on any marker I can see same info window.. Something wrong in this loop:
function bindInfoWindow(marker, map, infowindow, content) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map, marker);
});
}
function initialize() {
var map;
var locations = <?php echo json_encode($location); ?>;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
// Multiple Markers
var markers = locations;
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow();
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ){
loc_array = markers[i].split(",");
var position = new google.maps.LatLng(loc_array[1], loc_array[2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
draggable: false,
raiseOnDrag: true,
title: loc_array[0]
});
// Info Window Content
content=loc_array[0] + " - <a class='ac' onclick='move("+ loc_array[4] +");' href='#'>" + <?php echo json_encode($lang['view_profile']);?> + "</a><span class='p'>" + <?php echo json_encode($lang['phone']);?> + ": " + loc_array[6] + " </span><span class='p'>" + <?php echo json_encode($lang['address']);?> + ": " + loc_array[5] + ", " + loc_array[7] + ", " + loc_array[8] + "</span>";
bindInfoWindow(marker, map, infoWindow, content);
//infowindow = new google.maps.InfoWindow();
console.log(content);
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(content);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
bounds.extend(marker.position);
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
map.fitBounds(bounds);
google.maps.event.removeListener(boundsListener);
});
}
When I print individual info in console I can see different info windows, but on the map all come same:
console.log(content);
I call initialize() on body load
Please help where I am wrong, Thanks !
First of all declare infowindow globally in following way:
var infoWindow = new google.maps.InfoWindow();
Then after creating marker and content string just call this function:
bindInfoWindow(marker, map, infoWindow, content);
This is the definition of function bindInfoWindow()
function bindInfoWindow(marker, map, infowindow, content) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map, marker);
});
}
We using multiple marker with infowindow. Everything is working fine.
The issue is when we click marker, the infowindow opens but it doesn't close when click other markers. it stay opened. so can give solutions for this issue.
The code is in http://goo.gl/s0WZx
var berlin = new google.maps.LatLng(52.520816, 13.410186);
var neighborhoods = [
new google.maps.LatLng(52.511467, 13.447179),
new google.maps.LatLng(52.549061, 13.422975),
new google.maps.LatLng(52.497622, 13.396110),
new google.maps.LatLng(52.517683, 13.394393)
];
var markers = [];
var iterator = 0;
var map;
function initialize() {
var mapOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: berlin
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
setTimeout(function() {
addMarker();
}, i * 200);
}
}
function addMarker() {
var marker = new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false
});
markers.push(marker);
var contentString = $("#pop"+iterator).html();
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 300,
maxHeight: 500
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
iterator++;
}
You are creating as much infowindows, as there are markers. In your case,I think one infowindow is enough. So for working with only one infowindow, you could implement this on global scope:
//Using lazy initialization.
//InfoWindow will be created only after the first call
var getInfoWindow = (function(){
var _instance = null;
return function(){
if(_instance == null){
_instance = new google.maps.InfoWindow({
maxWidth: 300,
maxHeight: 500
});
}
return _instance;
};
})();
Also you need to store the contentString for every marker which must be shown on click event. So the final modification of addMarker method will be something like this:
function addMarker() {
var marker = new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false
});
markers.push(marker);
//Storing content html
marker.contentString = $("#pop"+iterator).html();
google.maps.event.addListener(marker, 'click', function() {
//Setting content of InfoWindow
getInfoWindow().setContent( marker.contentString );
//Opening
getInfoWindow().open(map,marker);
});
iterator++;
}
Put the var infowindow outside of the addMarker function. Like this:
var infowindow = new google.maps.InfoWindow();
Then inside your addMarker function use
infowindow.setContent(contentString);
This way the infowindow is only created once. Clicking on the different markers just moves the window and sets the content.
I have problem with closing infowindow when new is open in google maps api v.3.
var infowindow;
function addMarker(id, location) {
contentString = 'some content';
var marker = new google.maps.Marker({
position: location,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 200
});
google.maps.event.addListener(marker, 'click', function() {
if (infowindow) infowindow.close();
infowindow.open(map, marker);
});
markersArray[id] = marker;
}
The problem is that in above code the old infowindow is not close when new one is clicked unless I delete var from the line var infowindow = new google.maps.InfoWindow({
But then all the infowindows have the same content...
Any help?
Thanks.
Use a global variable to contain a pointer to the last opened marker, and when opening a new one, close the previous one. Like this
//var infowindow; // <-- removed; should not be global
var openedInfoWindow = null; // <-- added this here; make sure it's global
function addMarker(id, location) {
contentString = 'some content';
var marker = new google.maps.Marker({
position: location,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 200
});
google.maps.event.addListener(marker, 'click', function() {
if (openedInfoWindow != null) openedInfoWindow.close(); // <-- changed this
infowindow.open(map, marker);
// added next 4 lines
openedInfoWindow = infowindow;
google.maps.event.addListener(infowindow, 'closeclick', function() {
openedInfoWindow = null;
});
});
markersArray[id] = marker;
}