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);
});
}
Related
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);
}
}
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'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
I have this code where I display and set all my markers. How can I add a popup with some information on markers with this code? I add "i" variable on text, but it sets on all markers popup with "test - 723", where 723 is last value of the "i" variable. What is wrong?
for (var i = 0; i < arraylng.length-1; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(arraylng[i], arraylat[i])
});
var infowindow = new google.maps.InfoWindow({
content: " "
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('test: ' + i + '');
infowindow.open(map, this);
});
markers.push(marker);
}
First, change the loop condition to i < arraylng.length. Right now it is not capturing the last element of your array.
JavaScript variables works with function scope so you need to call a function for each marker listener to create the correct variable references. You can use an anonymous function, as seen here, or define a function for creating the click listener:
Multiple infoWindows:
function makeInfoWindowEvent(map, infowindow, marker) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
Most likely you will not want more than one InfoWindow open at the same time, because it is annoying to have to click on the close x. Then you will only want one InfoWindow object, and set the content as the marker is clicked:
Single InfoWindow:
...
var infowindow = new google.maps.InfoWindow();
for (var i = 0; i < arraylng.length-1; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(arraylng[i], arraylat[i]),
map: map
});
makeInfoWindowEvent(map, infowindow, "test" + i, marker);
markers.push(marker);
}
}
function makeInfoWindowEvent(map, infowindow, contentString, marker) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
}
this is the area where you can add your content of popup
var infowindow = new google.maps.InfoWindow({
content: "Add your popup content here"
});
and this is for showing your popup
marker.addListener('click', function() {
infowindow.open(map, marker);
});
Below code shows how its work and use.
features.forEach(function(feature) {
var infowindow = new google.maps.InfoWindow({
content: "Add your popup content here"
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,long),
icon: "image.png",
/*icon: icons[feature.type].icon,*/
title: "Title for marker",
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
});
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: myLatLng,
....
content: point[4]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.content);
infowindow.open(map, this);
});
Code inside loop. This worked for me perfectly.
That's because the variable i is not used in the loop but when the marker is clicked -- and then i is equal to the last index + 1... The addListener is asynchronous, not synchronous.
Remove infowindow.setContent('test: ' + i + ''); and replace content: " " with content: 'test: ' + i. This should fix your problem.