Here's the basic code, I cut it straight out:
var loadposition = new google.maps.LatLng(<?=$feed['location'][0]?>,<?=$feed['location'][1]?>);
var markerSize = new google.maps.Size(20,34);
var houseMarker = new google.maps.MarkerImage("marker2.png",markerSize);
var markerShadowSize = new google.maps.Size(30,34);
var markerShadowPoint = new google.maps.Point(30,0);
var markerShadowAnchor = new google.maps.Point(0,35);
var houseMarkerShadow = new google.maps.MarkerImage("marker2.png",markerShadowSize,markerShadowPoint,markerShadowAnchor);
marker = new google.maps.Marker({
position:loadposition,
title:"<?=$feed['name']?>",
draggable:false,
clickable:true,
icon:houseMarker,
shadow:houseMarkerShadow
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function(e){
var loadposition = new google.maps.LatLng(<?=$feed['location'][0]?>,<?=$feed['location'][1]?>);
var htmlContent = "<?=$feed['name']?><br/><?=$feed['address']?>";
infowindow.setPosition( loadposition );
infowindow.setContent(htmlContent);
infowindow.open(map);
});
For some reason, the shadow does not show. However, If I enable drag and drop and/or set up a marker animation (either bounce or drop) the shadow shows up once it's lifted up.. But as soon as the marker lays down the shadow disappears.
I can not find any other documentation on this nor similar questions / answers.
Thanks
The shadow image needs to be different than the marker image.
For example the marker shadow for google maps is like this;
http://maps.gstatic.com/mapfiles/shadow50.png
From your code;
var houseMarkerShadow = new google.maps.MarkerImage("marker2.png",markerShadowSize,markerShadowPoint,markerShadowAnchor);
Having the same image marker2.png as both the marker and the shadow probably isn't going to work as you expect.
It turns out that the syntax is correct. It's actually a bug with Google Chrome and Safari. Internet explorer and Firefox all render the shadow correctly.
The bug is opened at http://code.google.com/p/gmaps-api-issues/issues/detail?id=3993
Related
I have a google map. When I click a marker I show a bootstrap modal with style="z-index:999999999999999999999999999". No problems here. However when I click the fullscreen button, the the modal is not shown anymore. It only works in normal mode. Any suggestions how to fix this?
To see a sample see: http://jsfiddle.net/segato/e8w4wmh6/
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function () {
$('#myModal').modal('show');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Click the marker. Then click the full screen icon and then click a marker.
The point is that fullscreen mode use fullscreen API so anything outside the fullscreen element (in this case the map DIV) remains backward.
A workaround can be to append the modal element to the map div, for example exploiting the custom controls API.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById("myModal"));
See working fiddle.
N.B. I have disable modal background because in the maps it came out with a wrong z position, coming of top of the modal. I think would not be difficult to fix that if you need the background.
The solution proposed did not worked for me but inspired from this page it's OK : Google maps tool tip not working full screen mode
document.getElementById('map_canvas').firstChild.appendChild(document.getElement
ById("modalLarge"));
I have added custom controller to google map api.
one div in the custom controller should be clickable.
I have added cursor:pointer as the style.
It works well in firefox but not in chrome.
In chrome browser, it displays the hand icon but click action
is not working.
This is the code I added to my html file for add the html to the custom controller.
controlText.innerHTML = '<div id="newid" class="myclass" style="width:380px; margin-left:40px; margin-bottom:20px;">Click here to proceed</div></div>';
I have added to the click event listner as following.
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].clear();
map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].clear();
var inputfieldControlDiv = document.createElement('div');
var inputfieldControl = new TextfieldControl(inputfieldControlDiv, map);
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(inputfieldControlDiv);
css file
.myclass{
cursor:pointer;
}
Tested it in Mozzila, Opera, IE11, Chrome and it works (it always shows the cursors specified in your class)
Here is the fiddle: https://jsfiddle.net/eugensunic/kphe5fbL/10/
I've included the following code of yours: controlText.innerHTML = '<div id="newid" class="myclass" style="width:380px; margin-left:40px; margin-bottom:20px;">Click here to proceed</div></div>'; and the clearing as well altought I believe they are not necessary.
Here is the full code JS that is in the fiddle:
var map;
var london = new google.maps.LatLng(51.508742, -0.120850);
function TextfieldControl(controlDiv, map) {
var controlUI = document.createElement('div');
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.innerHTML = '<div id="newid" class="myclass" onclick="alert()"style="width:380px; margin-left:40px; margin-bottom:20px;">Click here to proceed</div></div>';
controlUI.appendChild(controlText);
}
function initialize() {
var mapDiv = document.getElementById('googleMap');
var myOptions = {
zoom: 12,
center: london,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, myOptions);
var homeControlDiv = document.createElement('div');
var homeControl = new TextfieldControl(homeControlDiv, map);
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].clear();
map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].clear();
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(homeControlDiv);
}
google.maps.event.addDomListener(window, 'load', initialize);
Of-course, the cursor will switch to value "default" at some point because of your margins css set to some pixels.
EDIT
The only other issue that could make the obstruction here is that you have developer tools tab open, this has been solved in this stackoverflow thread:
url: mouse hover on anchor tag does not display pointer cursor. Behavior observed on Chrome, works fine on IE 9?
If you still have problems then you shoul reveal your TestfieldControl function.
I draw a polyline to a google maps, and put markers to every point of it. I want to hide these markers higher zoom levels, therefore I use the Marker Manager. It's works well.
After draw everything, the map zoom to the bound of the polyline with the google.map.fitBound command. But if it zoom to far, where the markers would be hided, they don't. They still visible. If I drag or zoom again, they are hiding.
I use the markermanager in the simple way:
var aMarkers [...array of markers...],
markerMgr = new MarkerManager(map);
google.maps.event.addListener(markerMgr, 'loaded', function() {
markerMgr.addMarkers(aMarkers[0], 15, 0);
markerMgr.addMarkers(aMarkers[1], 12, 0);
markerMgr.addMarkers(aMarkers[2], 10, 0);
markerMgr.refresh();
});
Is anybody met this problem before? Thank is advance!
I had this same problem. When creating your markers, don't set the "map" parameter in the marker options. The MarkerManager will add the markers to your map as you zoom in and out.
For example:
var newMarker = new google.maps.Marker({
//map: map
position: markerPosition,
icon: icon
});
mgr.addMarker( newMarker, 9 );
Why do you have the maximum zoom for the markers set to 0?
MarkerManager.addMarkers(aMarkers[0], minZoom, maxZoom(optional))
Try (that parameter is optional per the documentation):
var aMarkers [...array of markers...],
markerMgr = new MarkerManager(map);
google.maps.event.addListener(markerMgr, 'loaded', function() {
markerMgr.addMarker(aMarkers[0], 15);
markerMgr.addMarker(aMarkers[1], 12);
markerMgr.addMarker(aMarkers[2], 10);
markerMgr.refresh();
});
Working Example
I show on a Google map (V3) markers. So that the icons be loaded faster, all the icons are stored in one sprite.
I notice that the icons are sometimes cropped (at the bottom or / and on the right edge is missing a 1 pixel wide border). Interestingly, you can zoom the map, and then the problem disappears. Is this a Google bug or am I doing something wrong. The problem occurs with Firefox, Chrome and IE.
Has anyone had a similar experience or a solution for the problem?
I made a reduced example of the problem. This example can also be accessed online:
http://www.gps-tracks.com/MarkerIconSpriteProblem.aspx
var markerIcon = new google.maps.MarkerImage(
"pictures/NetzCats/C03-MapSpritesS03.png",
new google.maps.Size(20, 16),
new google.maps.Point(140, 1600),
new google.maps.Point(10, 8)
//new google.maps.Size(20, 16)
);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!',
icon: markerIcon
});
You're using v3.10
http://jsfiddle.net/skdz6/
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"
With version 3.9 everything is OK http://jsfiddle.net/skdz6/1/
src="https://maps.googleapis.com/maps/api/js?v=3.9&sensor=false"
Someone who knows to get it working in v3.10?
since version 3.11 of the google maps API, the Icon object replaces MarkerImage. Icon supports the same parameters as MarkerImage.
The properties of the marker are a bit more clearly defined since version. For me this worked much better.
An example could look like this:
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
for further information check this site: https://developers.google.com/maps/documentation/javascript/markers
You are scaling your icon down to half its size, so it will inevitably lose either one border or the other, and you're exchanging Size and Point, as well as the order of the properties.
Try this instead:
var markerIcon = new google.maps.MarkerImage(
new google.maps.Point(5, 8), // anchor (POINT)
new google.maps.Point(140, 1600),//<====== origin (POINT)
new google.maps.Size(10, 8), //<======scaledSize (SIZE)
new google.maps.Size(20, 16), //<====== Size (SIZE)
"pictures/NetzCats/C03-MapSpritesS03.png" //URL
);
Documentation here.
Here is the code I'm using to show markers and infoWindows. It's working perfectly.
mapOptions = {
zoom: zoom,
center: getMyCompanyCoordinates,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map($(this)[0], mapOptions)
infowindow = new google.maps.InfoWindow()
createMarker = (company)->
marker = new google.maps.Marker({
position: new google.maps.LatLng(company.latitude, company.longitude),
map: map
})
google.maps.event.addListener(marker, 'click', ()->
infowindow.setContent('content')
infowindow.open(map,this)
)
return marker
firstCompanyMarker = createMarker(companiesData[0])
createMarker(companiesData[i]) for i in [1..companiesData.length-1] by 1
google.maps.event.trigger(firstCompanyMarker, 'click')
However, there is one issue. The infoWindow of the default (firstCompanyMarker) marker is not showing as I need. It's crossing the top edge of the map.
I tried to move the center but there was no result.
lat += 100 #or lat -=100. Anyway it does NOT work
long += 100 # it does work but it's moving the center
#of the map to the left or the right and it's not what I need
mapOptions = {
zoom: zoom,
center: new google.maps.LatLng(lat, long),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
Your ideas? How do I make infoWindow to be shown in the center of the map and to not cross the top edge of it?
Add a the following line after "infowindow.setContent('content')"
map.setCenter(marker.lat-100, marker.lng-100);
However, this is not a real solution. From experience I can tell you that you map is very little for the standard infowindow. You have really 2 options to solve this:
1) Increase the size of the map so the default infowindow will show with the marker in the center of the map or
2) Use a custom infowindow and make it a lot smaller than the default one
Hope that helps!
map.setCenter(marker.lat, marker.lng- (popup.getheight/2));
This should work.
Late answer for the sake of anyone stumbling on this. I had the same problem and noticed that if I closed the infoWindow and clicked the marker, the infoWindow would open and pan to the correct position. Instead of triggering a click, waiting for the tilesloaded event before opening the initial infoWindow was the key.
// Trigger click after tiles are loaded so auto-pan positions infoWindow correctly
google.maps.event.addListenerOnce( map, 'tilesloaded', function () {
infoWindow.open( map, marker );
} );