Hello guys I've got a simple question to ask, when I open my map I have set the lat and long to open some coords, then I place one marker with a infoBubble opening when the map is loaded, but after that the map opens in the maker position. I dont want that .. is it possible force the start location to open my map in the start position instead of the marker position?
thanks
function init() {
var mapCenter = new google.maps.LatLng(-8.799445,-63.922042);
map = new google.maps.Map( document.getElementById('map'), {
zoom: 17,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var myLatLng = new google.maps.LatLng(-8.802732,-63.921939);
var marker = new google.maps.Marker({ map: map,
position: myLatLng,
draggable: true,
icon: icon
});
}
By default the API when a InfoWindow will be opened tries to pan the map so that the infoWindow is fully visible.
Set the disableAutoPan-property of the infoWindow to true to avoid this.
Related
I am attempting to show a google maps marker via satellite view and street view at the same time. However, the marker placed on street view seems to change location (be slightly offset) depending on where along the street you are looking at it. In the examples below, you can see in one angle the marker is successfully on the grass and the satellite view matches the street view. However, if I navigate down the road one step, the marker is now on the driveway, despite the satellite view indicating otherwise. The same marker is used for all examples.
Any thoughts?
Example: https://jsfiddle.net/6Lpgoex2/
const startPosition = new google.maps.LatLng(33.82444502161826, -84.32112795727612);
// Aerial view map with marker
var locationMap = new google.maps.Map(document.getElementById('location'), {
center: startPosition,
zoom: 21,
mapTypeId: 'satellite'
});
locationMap.setTilt(0)
var locationMarker = new google.maps.Marker({
position: startPosition,
map: locationMap
});
// Street view map with marker
var viewMap = new google.maps.Map(document.getElementById('view'), {
center: startPosition,
zoom: 14
});
var viewMarker = new google.maps.Marker({
position: startPosition,
map: viewMap,
});
// Update streetview to look at the marker
var panorama = viewMap.getStreetView();
const panoramaService = new google.maps.StreetViewService();
panorama.setVisible(true);
panoramaService.getPanoramaByLocation(startPosition, 100, function(streetViewPanoramaData, streetViewStatus) {
if (streetViewStatus == "OK") {
let heading = google.maps.geometry.spherical.computeHeading(streetViewPanoramaData.location.latLng, startPosition);
const position = streetViewPanoramaData.location.latLng;
panorama.setPosition(position)
panorama.setPov({
heading: heading,
pitch: 0
});
panorama.setZoom(1); // Fix bug to make marker visible https://issuetracker.google.com/issues/35830290
panorama.setVisible(true);
}
});
Note: An issue has been opened.
I am trying to mark some spots on a google map. I am using google maps places javascript api.
function initialize() {
var mapProp = {
center: new google.maps.LatLng(userlatitude, userlongitude),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//var map = new google.maps.Map(document.getElementById("map_canvas"), mapProp);
map = new google.maps.Map(document.getElementById("midsection"), mapProp);
var mapPosition = new google.maps.LatLng(-20.997110, 123.375544);
markers.push(new google.maps.Marker({
position: {
lat: -20.014006,
lng: 123.421746
},
map: map,
title: 'Mow my lawn',
animation: google.maps.Animation.DROP
}));
(if the Long/Lat are invalid, its because I randomly changed it for the purpose of this post)
I can see the marker drop down and bounce once. But then it disappears. I have tried setting the Zindex, changing the display and position type of the div canvas. But nothing I do seems to make the marker stay.
The problem ended up being hidden in my CSS.
it was just a Canvas: display:none call
How can I change the label for pins in an embedded google maps?
Ive figured out how to change the marker to my icon, but I need to restyle the A, B, C etc similar to how travelodge do for there map http://www.travelodge.co.uk/hotels/book/edinburgh-hotels
UPDATE this is the code that successfully uses a custom marker:
function addMarker(latlng, myTitle) {
markers.push(new google.maps.Marker({
position: latlng,
map: map,
title: myTitle,
icon: "www.linkto/myPin.png"
}));
}
Ive included markerwithlabel.js However this doesn't create any markers at all:
function addMarker(latlng, myTitle) {
markers.push(new MarkerWithLabel({
position: latlng,
map: map,
title: myTitle,
icon: "www.linkto/myPin.png",
labelContent: "$425K",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels",
labelStyle: {opacity: 0.75}
}));
}
This is the code I was tying to adapt:
http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/examples/basic.html
If you managed to change the marker icon, then you did all the work.
A marker does not have a label. What travelodge does is that it has markers for each letter and then sets them according to the search results.
EDIT:
It seems there's a special library to do what you want (go to "Styled Marker"):
http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries#MarkerWithLabel
To see the code click in "Development versions", then "Examples" and then look at the source code of the pages. Here's the Simple example code:
function initialize() {
var myLatLng = new google.maps.LatLng(37.313477473067, -121.880502070713);
var myOptions = {
zoom: 11,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.BUBBLE,{color:"ff0000",text:"I'm a marker!"}),position:new google.maps.LatLng(37.383477473067, -121.880502070713),map:map});
var styleMaker1 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:"00ff00",text:"A"}),position:myLatLng,map:map});
var styleMaker3 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:"0000ff"}),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});
}
You can read more about markers on this link
I'm using this super basic code to add a google maps to my site:
var map;
function initMaps(latIn, longIn, htmltext) {
var LatLng = new google.maps.LatLng(latIn, longIn);
var Options = {
zoom: 13,
center: LatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("mapStatic"), Options);
marker = new google.maps.Marker({
position: LatLng,
map: map
});
marker.setMap(map);
map.enableDragging();
}
google.maps.event.addDomListener(window, "load", initMaps);
The map is displaying fine, but for some reason I can't drag it around, is it possible that some other piece of javascript is doing this?
I look around, but didn't find anything that could cause a problem.
My Google Map only shows up fine the first time. Clicking the line a second time or more, the map does not re-draw properly and so is unusable.
I am using the following code:
var myLatlng = new google.maps.LatLng(53.3820845337596, -1.46965489864111);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel:false
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'we are right here ...'
});
var myLatlng2 = new google.maps.LatLng(53.3820845337596, -1.46965489864111);
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map, marker);
});
google.maps.event.trigger(map, 'resize');
With google.maps.event.trigger(map, 'resize') at the end being my attempt to get the map to behave correctly.
You can see the effect at http://test2omniforce.co.uk/node/8 and clicking on the map image.
It doesn't look like a width and height are set on your div with id 'map_canvas' in map.php. I wonder if this is causing the map to not render correctly?
Maybe try adding some dimensions and see if that works.
Good luck!