Linking image to marker on google maps
Question
I have a custom marker on my map, and an image above the maps, which I would like to have on click, center the google map on the custom marker, the image is linked to. How would I do that with google api? I am terrible with figuring out what google api code could do this, could someone show me an example?
I am trying to add it to the companyimage variable
<!DOCTYPE html> <html> <head>
<LINK REL=StyleSheet HREF="styles.css" TYPE="text/css" MEDIA=screen>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(39.346246,-76.624446);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+
'<div id="bodyContent">'+
'<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var companyImage = new google.maps.MarkerImage('images/Loyola.png',
new google.maps.Size(100,50),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var companyShadow = new google.maps.MarkerImage('images/logo_shadow.png',
new google.maps.Size(130,50),
new google.maps.Point(0,0),
new google.maps.Point(65, 50));
var companyPos = new google.maps.LatLng(39.346246,-76.624446);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
icon: companyImage,
shadow: companyShadow,
title:"School",
zIndex: 3});
var trainImage = new google.maps.MarkerImage('images/barlandmark.png',
new google.maps.Size(70,70),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var trainShadow = new google.maps.MarkerImage('images/train_shadow.png',
new google.maps.Size(70,50),
new google.maps.Point(0,0),
new google.maps.Point(60, 50)
);
var trainPos = new google.maps.LatLng(39.363136,-76.609841);
var trainMarker = new google.maps.Marker({
position: trainPos,
map: map,
icon: trainImage,
shadow: trainShadow,
title:"Train Station",
zIndex: 2
});
}
3 answers
solution1
0 ACCPTED 2011-07-11 18:33:57
with jquery and google API V-3 you can use
$("#yourImage").click(function(e){
YOURMAP.setCenter(mapLat,mapLng); // add real lng and lat
});
point the var YOURMAP to the map and the lat and lng an it will center on the point and resize if needed.
solution2
0 2011-07-11 18:37:36
http://code.google.com/intl/en/apis/maps/documentation/javascript/reference.html#Map
yourMap.panTo( yourMarker.getPosition() );
solution3
0 2011-07-11 18:40:10
Youd need to do something like this:
<script>
$(document).ready(function(){
$("#img").live('click',function(){
var pos = new google.maps.LatLng(lat,lng);
map.setCenter(pos);
});
});
</script>
Or
<script>
$(document).ready(function(){
$("#img").live('click',function(){
var pos = marker.getPosition();
map.setCenter(pos);
});
});
</script>
And make sure you change the id of your image to match the selector.
<img src='someimage.jpg' id ='img' />
Make sure you replace map with the name of your created map. Replace marker with the name of your created marker. And if using the first example, replace lat/lng with the correct positions.
Google Maps Events for API V3
http://code.google.com/apis/maps/documentation/javascript/events.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.