as you can see at my test.php the marker ist working fine.
but when I zoom the map for an better overview the marker is going to north???
If I zoom a lot, the marker moved to North sea :-(
Is this a known bug? or am I doing something wrong?
<!DOCTYPE html>
<html>
<head>
<title>MyRange Driving Ranges world wide </title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 30px; padding: 0px }
#map_canvas { height: 80% }
</style>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(51.1601369818597, 6.72036588191986);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image = 'images/flag_red_big.png';
var myLatLng = new google.maps.LatLng(51.1601369818597, 6.72036588191986);
var golfMarker = new google.maps.Marker({ position: myLatLng, map: map, icon: image });
}
</script>
</head>
<body onload="initialize()">
<div align="center" id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
The default anchor point for an icon (which is what you get if you don't define it) is at the bottom center of the image.
You need to fully specify the icon using an instance of MarkerImage.
FYI - your icon seems to move because there is a lot of empty space between the bottom of the flag and the bottom of the image (which is where it is currently anchored).
Related
what I want is to:
remove the red google pin
break the blue text into multiple lines just like what the info window look like
I have looked around and some answers are: use \n or in title or content.
I have tried them but both didnt work.
the only thing work for me is label (but somehow it doesnt recognize \n or
I have a jsfiddle for simple code
Javascript
// The following example creates a marker label in Gillete Stadium
var latLng = new google.maps.LatLng(-19.4914,132.5510);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: latLng
});
var marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: latLng,
//title: 'Line 1<br/>Line2\nLine3', //doesnt work
//content: 'Line 1<br/>Line2\nLine3', //doesnt work
label: {
color: 'black',
fontWeight: 'bold',
fontSize: '32px',
text: 'Line 1<br/>Line2\nLine3',
},
});
HTML
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<div id="download-map"></div>
CSS
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 90%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
any help is very much appreciated
I'm not sure I understand - you can open infowindows without any markers, so perhaps this might help?
<html>
<head>
<meta charset='utf-8' />
<title>Google Maps: Infowindow with no marker</title>
<script async defer src="//maps.google.com/maps/api/js?key=<API-KEY>&callback=initMap®ion=en-GB&language=en"></script>
<script>
var map;
function initMap(){
var infoWindow = new google.maps.InfoWindow({
maxWidth:100
});
var centre=new google.maps.LatLng( 55.959553, -3.178480 );
map = new google.maps.Map( document.getElementById('map'), {
zoom: 15,
center: centre,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
} );
infoWindow.setContent( "an infoWindow, centred on Edinburgh for no apparent reason, with no markers anywhere to be seen." );
infoWindow.setPosition( centre );
infoWindow.open( map, null );
}
</script>
<style>
body{ background:white;padding:0;margin:0; }
#map {
width: 100%;
height:100%;
max-height: 100%;
clear:none;
display:block;
background:white;
}
</style>
</head>
<body>
<div id='map'></div>
</body>
</html>
I have created a map which you can see here http://summitaccounting.ca/about-us
I have created the API key twice with the same result
I have pinpointed the property. However, I cannot get rid of the gray grid over the top of the map. Here is the code I am using.
Any help would be appreciated.
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: 52.115, lng: -114.894};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_fWUOsy0ygeKqSbdfiaK7_WKCrXCkDgc&callback=initMap">
</script>
</body>
</html>
In your template.css file, you have this style declaration:
a img,fieldset,img{
border:none;
padding:5px 10px !important;
}
It's that padding that is messing with your google maps. You're going to need to rework some of this, or try to override it with even more !important styles for the google maps. ugh.
I try to change the cursor for the map when the zoom is changed. The change is not visible if you don't move the mouse. If you move it, then the cursor is changed. You can test is here:
http://tinkerbin.com/ENHFSmVR
How to reproduce: zoom in with the mouse wheel while not moving the mouse. The cursor should change but it doesn't. Move the mouse. The cursor is changed.
If you inspect the html you will see there is a div with an inline style that has a cursor property. That cursor property is not changing unless you move the mouse.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=&sensor=false">
</script>
<script type="text/javascript">
var odd = true;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
google.maps.event.addListener(map, "zoom_changed", function(event) {
if (odd) {
map.setOptions({ draggableCursor: 'crosshair',
draggingCursor: 'crosshair'});
odd = !odd;
} else {
map.setOptions({ draggableCursor: 'move',
draggingCursor: 'move'});
odd = !odd;
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
This looks to be by design:
draggableCursor
The name or url of the cursor to display when mousing over a draggable map.
draggingCursor
The name or url of the cursor to display when the map is being dragged.
Both cases appear to require the mouse to be moving (mousing over and being dragged are both verbs, so I'd assume when the mouse is being moved in either condition).
Additionally, it seems to work in Chrome (with a delayed response).
I am just following the tutorial on google's website on how to use their API. I found this code and am trying to get it to work for any other country than the default but it isn't:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=personalKey&sensor=false&language=ar®ion=ES">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
from what it says this should work simply. I am trying to get Spain to display on map rather than current choice.
The link am following: https://developers.google.com/maps/documentation/javascript/basics
Thanks,
Change the values you're passing to google.maps.LatLng() to some close to where you want to display (eg., goggle.maps.LatLng(40.813797402839086, -3.62546328124995) for Madrid, according to LatLng).
You are trying to set the position of the map by setting the region. You still need to change the co-ordinates to those of Spain.
Try: 40.6986° N, 3.2949° W
When I click to the embedded Google Maps API of the following Web Page: http://ada.kiexpro.com/html/list.html (click 地圖 at the top-right corner).
It displays:
This web site needs a different Google
Map API key. A new key can be generted
at http://code.google.com/apis/maps/.
Sorry but I've never used this application before. Do I have to just generate a new code in order to solve the problem? Or there are another problems?
Yes, follow the link. Each distinct domain needs its own API key.
This works normally for me
<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<style>
#map-canvas {
width: 700px;
height: 600px;
position: absolute;
top: 40px;
left: 360px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>