Put an image on Google map
I am creating a web page which shows the Google map using JavaScript. How can I put an image on that map as a icon. Here is what I have:
<script language="javascript">
var lat=1067;
var lon=-110;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(lat, lon), 13);
}
}
function map(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
load();
}
function get_location() {
navigator.geoloc开发者_运维知识库ation.getCurrentPosition(map);
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<input type ="Button" size = "50" onclick = "get_location();">Search</input>
<div id="map" style="width: 1200px; height: 600px"></div>
Icons in Google Maps are part of the "Overlay" section in the documentation. Here is a link to the relevant portion of the documents.
In short:
var image = 'beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856); //or wherever you want the marker placed
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
I use the setIcon function from Google Maps API (v3) like:
// This is our marker image, sets the size and position (from the center of the map)
this.image = new google.maps.MarkerImage("/gfx/map/icon_hotel.png",
// This marker is 22 pixels wide by 28 pixels tall.
new google.maps.Size(22, 28),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,28
new google.maps.Point(11, 28)
);
// This is our marker shadow. Same location as marker, but different dimensions
this.shadow = new google.maps.MarkerImage("/gfx/map/icon_hotel_shadow.png",
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(33, 28),
new google.maps.Point(0,0),
new google.maps.Point(11, 28)
);
There's an example of this by Google at: http://code.google.com/apis/maps/documentation/javascript/examples/icon-complex.html
加载中,请稍侯......
精彩评论