I am trying to change the infowindow in Google maps to the smartinfowindow but for some reason the position of the infowindow is wrong. I never had this issue with the standard infowindow, only the smartinfowindow.
I have found that if I remove position: relative using Firefox inspector the map moves to the top left of the window and the smartinfowindows are then in the correct position.
So is there something I'm missing?
I create the markers with the following:
for (var i = 0; i < data.locations.length; i++) {
var dataPhoto = data.locations[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude,dataPhoto.longitude);
latlngbounds.extend( latLng );
var marker = new google.maps.Marker({
position: latLng,
icon: 'http://www.irishcottageholidays.com/images/cottage1.png'
});
listenMarker(map,marker,InfoWindow,dataPhoto.mID)
markers.push(marker);
}
And then to create the smartinfowindow:
function listenMarker (map,marker,InfoWindow,mID){
google.maps.event.addListener(marker, 'click', function() {
load_content(map,this,InfoWindow,mID);
});
function load_content(map,marker,InfoWindow,mID){
var $j = jQuery.noConflict();
$j.ajax({
type : 'GET',
url : '/ajax/map_popup.asp',
data: {
mID : mID
},
success: function(result){
new SmartInfoWindow({position: marker.getPosition(), map: map, content: result});
}
});
}
Originally I created the infowindows using:
InfoWindow.setOptions({
disableAutoPan: true,
maxWidth: 280
});
InfoWindow.setContent(result);
InfoWindow.open(map, marker);
And this worked but now I've changed to the smartinfowindow, it loads the infowindow but not in the right position.
Thanks for all help in advance.
---- EDIT ----
I now have an issue with the smartinfowindow not closing when opening another and have been unable to achieve this so far. Everything I've found so far seem to apply to the standard infowindows and don't work on the smartinfowindow.
Thanks again for all help in advance.
I believe you should change smartinfowindow properties by editing the smartinfowindow.js file.
I've managed to get a solution through Experts Exchange.
Smartinfowindow position solution:
SmartInfoWindow creates a div to contain the content of the infowindow and appends it to the body. It's position is set to absolute relative to the body. It assumes your map is in the top left corner of the document.
The simple solution is to absolute position the SmartInfoWindow relative to the map canvas instead of the body. To do this you must edit the smartinfowindow.js file on line 178.
Instead of:
document.body.appendChild(div);
Replace with:
var mapDiv = document.getElementById("map");
mapDiv.appendChild(div);
With "map" as the id of the div that holds the map.
Remove smartinfowindow when opening a new one:
function listenMarker (map,marker,InfoWindow,mID){
google.maps.event.addListener(marker, 'click', function() {
if ($('#map > div').length > 1) { $('#map >div:last-child').remove(); }
load_content(map,this,InfoWindow,mID);
});
}
Where:
if ($('#map > div').length > 1) { $('#map >div:last-child').remove(); }
was added to my code
It assumes you have jquery on the page already and no other google map add-ons are creating divs inside the map div.
All credit to tommyBoy on Experts Exchange for both solutions.
Related
I'm having a google map where google markers are put up. The placement of markers works well. But if I click a marker, the adress should open up in an infowindow. The adress, longtitude and latitude are loaded from model.js into the variable myLocations.
EDIT: Currently a click on any marker returns the adress of the last object in myLocations. But I would like to get the myLocations.adress of the one who was clicked.
var markerspots;
var spot;
var j;
for (j = 0; j < myLocations.length; j++){
spot = {
lat: parseFloat(myLocations[j].lati),
lng: parseFloat(myLocations[j].long)
};
contentString = myLocations[j].adress;
markerspots = new google.maps.Marker({
position: spot,
map: map,
icon: markerspot,
content: contentString,
id: j
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(markerspots, "click", (function(marker) {
return function(evt) {
infowindow.setContent(contentString);
infowindow.open(map, markerspots);
}
})(markerspots));
}
I have found lots of solutions, but I don't understand any of those. So how can I make the content of the clicked marker show up in an infowindow?
Thanks
Well you are accessing your contentString, which is set to the last one you created in your for loop.
What you really want is the content property of the marker you clicked on, which is stored in this.
So
google.maps.event.addListener(markerspots, 'click', function() {
console.log(this.content);
});
should do the trick.
Example here: https://jsfiddle.net/4tpnh00u/
How do i change my center for google maps with a link and remove other markers? i have this code
https://jsfiddle.net/m9ugbc7h/
So, i need to create a link for example
Ventura
In this case the function must change google maps center to focus the "ventura" marker and hide the other markes and when the user clicks on
Dolphinaris
the zoom will change and will hide every other marker and show only the ones of Dolphinaris
Thanks in advance
Make map visible outside of jQuery(document).ready.
Create var markers = []; array.
When crating markers, add custom property name to it, and push marker into markers array:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(21.0241839, -86.8148164),
map: map,
visible: true,
icon: ventura,
name: 'ventura',
});
markers.push(marker);
On click, invoke resetMap() function:
Ventura
Inside resetMap function, set center and zoom to map, iterate markers, matching them by custom property name - matched one set visible, others set to invisible.
function resetMap(lat, lon, zoom, name) {
var newPos = new google.maps.LatLng(lat, lon);
map.setCenter(newPos);
map.setZoom(zoom);
markers.forEach(function(marker) {
if(marker.get('name') == name)
{
console.log('match');
marker.setVisible(true);
}
else
{
marker.setVisible(false);
}
});
Working fiddle: https://jsfiddle.net/m9ugbc7h/1/
EDIT:
Question: "is there any way to change smoothly the zoom and coordinates?"
Yes, use method:
panTo(latLng:LatLng|LatLngLiteral)
Changes the center of the map to the given LatLng. If the change is
less than both the width and height of the map, the transition will be
smoothly animated.
https://developers.google.com/maps/documentation/javascript/reference?csw=1
EDIT 2:
Implementing panTo is easy:
map.panTo(newPos);
instead of:
map.centerTo(newPos);
but as I have faced a bit 'flickering' effect due to hide/show markers that are close on the map, I have added some delay in functions invocation + markers show/hide:
function resetMap(lat, lon, zoom, name) {
var newPos = new google.maps.LatLng(lat, lon);
$.when( map.setZoom(zoom) ).done(function(){
$.when( map.panTo(newPos)).done(function(){
setMarkerVisibility(name);
});
});
}
And showing matched marker is now executed with 300 ms delay:
function setMarkerVisibility(name){
markers.forEach(function(marker) {
console.log(marker.get('name'));
if(marker.get('name') == name)
{
setTimeout(function(){ marker.setVisible(true); }, 300);
}
else
{
marker.setVisible(false);
}
});
}
It looks a bit smoother like this.
Working fiddle: https://jsfiddle.net/m9ugbc7h/3/
I am trying to get a Google Maps instance setup, where I can have the marker icons change into a larger image on hover. I am loading the larger image within arrays and then trying to pass those values into the callback event function. For some reason I only get a default map marker showing on hover, and not the image.
You can see where I am doing this below by using the "testVar".
https://jsfiddle.net/sj1zv02a/
for (i = 0; i < locations_programs.length; i++) {
var id = 'programs' + i;
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations_programs[i][1], locations_programs[i][2]),
map: map,
id: id,
icon: 'http://www.christielakekids.com/_images/new/blue_circle.png',
url: locations_programs[i][5],
image: locations_programs[i][4],
zIndex: 100
});
var testVar = locations_programs[i][4];
google.maps.event.addListener(marker, 'mouseover', function (event, testVar) {
this.setIcon(testVar);
});
google.maps.event.addListener(marker, 'mouseout', function (event) {
this.setIcon('http://www.christielakekids.com/_images/new/blue_circle.png');
});
I would also like to know how to attach a URL to the larger image so it will redirect there when clicked. I have the "URL" parameter set in the marker code, but that doesn't seem to do anything.
I have found this solution (the sample is for //**** PROGRAMS only but is easly extendible for the other section.
the JSFiddle for test
And the code for a better explanation
In the marker attributes add a altIcon attribute and assign to this the image you need.
In mouseover listener set the icon using this.setIcon(this.altIcon)
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations_programs[i][1], locations_programs[i][2]),
map: map
,id: id
,icon: 'http://www.christielakekids.com/_images/new/blue_circle.png'
,url: locations_programs[i][5]
,image: locations_programs[i][4]
,zIndex:100
,altIcon: locations_programs[i][4]
});
google.maps.event.addListener(marker, 'mouseover', function(event) {
this.setIcon(this.altIcon);
});
I met some difficulties to display images in the array. (the site says file not found) so inside jsfiddle I used icons with different colors.
I have created an application for showing an Information Window popup for markers, The application is working fine and the popup is showing correctly but the only solution is that along with the custom Information Window popup when under mouse-over, default popup with html tag is showing like as shown below.
JSFiddle
Can anyone please tell me some solution for this
My code is as given below
var infowindow = new google.maps.InfoWindow();
function point(name, lat, long) {
var self = this;
self.name = name;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
title: name,
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'mouseover', function () {
infowindow.setContent(marker.title);
infowindow.open(map, marker);
}.bind(this));
google.maps.event.addListener(marker, 'mouseout', function () {
infowindow.close();
}.bind(this));
}
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 5,
center: new google.maps.LatLng(55, 11),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var viewModel = {
points: ko.observableArray([
new point('<div>Test1<br>Test5</div>', 55, 11),
new point('Test2', 56, 12),
new point('Test3', 57, 13)])
};
function addPoint() {
console.log(viewModel.points().length);
for (var i = 0; i < viewModel.points().length; i++)
{
console.log(i);
console.log(viewModel.points().marker.title);
}
viewModel.points.push(new point('a', 58, 14));
}
ko.applyBindings(viewModel);
You could manually remove the element title attribute on mouseover.
Try changing
google.maps.event.addListener(marker, 'mouseover', function () {
To
google.maps.event.addListener(marker, 'mouseover', function (e) {
e.ya.target.removeAttribute('title');
Also for Edge, you need to be change it to:
e.ya.target.parentElement.removeAttribute('title')
JSFiddle Link (Google Maps API not working)
It appears that the title of your marker is set to the html content of your pop up window.
When you create the marker object, give it a title attribute of what you would like to be displayed (i.e. name of your location...)
var marker = new google.maps.Marker({
position: whateverpositionyouset,
title: whatevertitleyouwant,
map: map
})
I have been taking advantage of this thread in working on almost the same problem. I am able to get the Google Maps API to properly display European accented glyphs in the pop-up display when a marker is clicked, but the same encoded text string is not properly rendered on mouseover.
So, after looking at the helpful code example in JSFiddle, and not being able to use that suggested technique for removing the 'title' text, it finally became clear to me what MrUpsidown was suggesting when he thought we might just change the name of the property being displayed as a title. I did not realize that the definition of the reserved property 'title' was "text to be displayed on hover." So, the simplest solution is to use a property such as 'myTitle' in the Marker options list. When there is no title property, hovering becomes a non-event.
I'm trying to setup Google Maps using the Google Maps API v3 JS code. I've got multiple tabs that when clicked open up an AJAXed page of content without reloading the original page. Each tabbed content contains a map. Below is an example of how I've got the map setup. Please note, the list element here is just an example, each tab contains many items that are in different places.
<script type="text/javascript">
var locations = new Array();
</script>
<div id="googlemap"><div>Loading..</div></div>
<ul>
<li>#1 - My Place, Euless, TX
<script type="text/javascript">
locations.push(['#1 - My Place','Euless, TX']);
</script>
</li>
<li>#2 - My Other Place, Dallas, TX
<script type="text/javascript">
locations.push(['#2 - My Other Place','Dallas, TX']);
</script>
</li>
</ul>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#googlemap div').remove();
if(locations.length>0)
{
var map = new google.maps.Map(document.getElementById('googlemap'), {
zoom: 3,
center: new google.maps.LatLng(38.065392,-97.382812),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i=0;i<locations.length;i++) {
var thelocation = locations[i];
jQuery.ajax({
dataType: 'jsonp',
url: 'http://maps.google.com/maps/geo?output=json&oe=utf8&sensor=false&key=BLAHBLAH&q='+thelocation[1],
cache: false,
success: function(data){
if(data.Status.code==200)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(data.Placemark[0].Point.coordinates[1],data.Placemark[0].Point.coordinates[0]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(thelocation[0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
});
}
}
});
</script>
I'm currently having a LOT of trouble with destroying the previous map and loading in the new one. When the tabbed content is loaded the map element appears shifted up and to the left. The Google Maps UI still appears in the correct spots, but the map content itself is moved up / left. When dragging the map it moves slightly until a certain point and at that point the visible area gets clipped back to around that same area of view. Can anyone help me that's dealt with loading new maps via AJAX?
You have to create a trigger to tie the DIV size changes to the resize event for the map.
Developers should trigger this event
on the map when the div changes size:
google.maps.event.trigger(map,
'resize') .