Reputation:
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.geolocation.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>
Upvotes: 1
Views: 8047
Reputation: 7374
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
Upvotes: 0
Reputation: 2793
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
});
Upvotes: 2