Hi,
i'm not sure if this is what you had in mind, but try this:
//-----additional code
var map = new google.maps.Map(document.getElementById("map"),
settings);
var infowindows=[];
var markers=[];
//-----eof additional code
function initialize() {
var latlng = new google.maps.LatLng(42.3314,-83.0458);
var settings = {
zoom: 8,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style:
google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style:
google.maps.NavigationControlStyle.ZOOM_PAN},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var companylogo1 = new google.maps.MarkerImage('/WebCat/images/
marker.png',
new google.maps.Size(35,35),
new google.maps.Point(0,0),
new google.maps.Point(35,35)
);
var companyPos = new google.maps.LatLng(42.4742634,-83.4255980);
var companyMarker1 = new google.maps.Marker({
position: companyPos,
map: map,
icon: companylogo1,
title:"Farmington Hills, Michigan"
});
var contentString1 = '<div id="maps">'+
'<h1>Farmington Hills</h1>'+
'<p>Contractors Pipe & Supply<br />24895 N. Industrial Dr.<br /
>Farmington Hills, MI 48335</p>'+
'</div>';
var infowindow1 = new google.maps.InfoWindow({
content: contentString1
});
google.maps.event.addListener(companyMarker1, 'click', function() {
infowindow1.open(map,companyMarker1);
});
//-----additional code
infowindows.push(infowindow1);
markers.push(companyMarker1);
//-----eof additional code
var companylogo2 = new google.maps.MarkerImage('/WebCat/images/
marker.png',
new google.maps.Size(35,35),
new google.maps.Point(0,0),
new google.maps.Point(35,35)
);
var companyPos = new google.maps.LatLng(42.5280,-82.9466);
var companyMarker2 = new google.maps.Marker({
position: companyPos,
map: map,
icon: companylogo2,
title:"Fraser, Michigan" });
var contentString2 = '<div id="maps">'+
'<h1>Fraser</h1>'+
'<p>Contractors Pipe & Supply<br />31467 Utica Rd.<br />Fraser, MI
48026</p>'+
'</div>';
var infowindow2 = new google.maps.InfoWindow({
content: contentString2
});
google.maps.event.addListener(companyMarker2, 'click', function() {
infowindow2.open(map,companyMarker2);
});
//-----additional code
infowindows.push(infowindow2);
markers.push(companyMarker2);
//-----eof additional code
var companylogo3 = new google.maps.MarkerImage('/WebCat/images/
marker.png',
new google.maps.Size(35,35),
new google.maps.Point(0,0),
new google.maps.Point(35,35)
);
var companyPos = new google.maps.LatLng(42.2181,-83.2773);
var companyMarker3 = new google.maps.Marker({
position: companyPos,
map: map,
icon: companylogo3,
title:"Taylor, Michigan"
});
var contentString3 = '<div id="maps">'+
'<h1>Taylor</h1>'+
'<p>Contractors Pipe & Supply<br />12060 Delta Dr.<br />Taylor, MI
48180</p>'+
'</div>';
var infowindow3 = new google.maps.InfoWindow({
content: contentString3
});
google.maps.event.addListener(companyMarker3, 'click', function() {
infowindow3.open(map,companyMarker3);
});
//-----additional code
infowindows.push(infowindow3);
markers.push(companyMarker3);
//-----eof additional code
var companylogo4 = new google.maps.MarkerImage('/WebCat/images/
marker.png',
new google.maps.Size(35,35),
new google.maps.Point(0,0),
new google.maps.Point(35,35)
);
var companyPos = new google.maps.LatLng(42.6711,-82.9912);
var companyMarker4 = new google.maps.Marker({
position: companyPos,
map: map,
icon: companylogo4,
title:"Shelby, Michigan"
});
var contentString4 = '<div id="maps">'+
'<h1>Shelby</h1>'+
'<p>Contractors Pipe & Supply<br />51103 Celeste<br />Shelby
Township, MI 48315</p>'+
'</div>';
var infowindow4 = new google.maps.InfoWindow({
content: contentString4
});
google.maps.event.addListener(companyMarker4, 'click', function() {
infowindow4.open(map,companyMarker4);
});
//-----additional code
infowindows.push(infowindow4);
markers.push(companyMarker4);
//-----eof additional code
var companylogo5 = new google.maps.MarkerImage('/WebCat/images/
marker.png',
new google.maps.Size(35,35),
new google.maps.Point(0,0),
new google.maps.Point(35,35)
);
var companyPos = new google.maps.LatLng(42.4597,-83.2602);
var companyMarker5 = new google.maps.Marker({
position: companyPos,
map: map,
icon: companylogo5,
title:"Southfield, Michigan"
});
var contentString5 = '<div id="maps">'+
'<h1>Southfield</h1>'+
'<p>Contractors Pipe & Supply<br />23233 Lahser Rd.<br /
>Southfield, MI 48034</p>'+
'</div>';
var infowindow5 = new google.maps.InfoWindow({
content: contentString5
});
google.maps.event.addListener(companyMarker5, 'click', function() {
infowindow5.open(map,companyMarker5);
});
//-----additional code
infowindows.push(infowindow5);
markers.push(companyMarker5);
//-----eof additional code
}
//-----additional code
function openZoom(i){
infowindows[i].open(map,markers[i]);
}
//-----eof additional code
and in your html:
<div id="maincol4">
<div id="location">
<div id="locationwrap" onclick="javascript:openZoom(0);">
<img src="images/farmingtonhills.jpg" alt="Farmington Hills,
Michigan" />
<div class="address">
<h3>Farmington Hills</h3>
</div>
<div class="details">
<p>24895 N. Industrial Dr.</p>
<p>Farmington Hills, MI 48335</p>
<p>Phone: (248) 888-5840</p>
<p>Fax: (248) 888-5852</p>
</div>
</div>
</div>
</div>
<div id="col5">
<div id="location">
<div id="locationwrap" onclick="javascript:openZoom(1);">
<img src="images/frasermi.jpg" alt="Fraser, Michigan" />
<div class="address">
<h3>Fraser</h3>
</div>
<div class="details">
<p>31467 Utica Rd.</p>
<p>Fraser, MI 48026</p>
<p>Phone: (586) 296-6690</p>
<p>Fax: (586) 296-8002</p>
</div>
</div>
</div>
<div id="location">
<div id="locationwrap" onclick="javascript:openZoom(2);">
<img src="images/taylormi.jpg" alt="Taylor, Michigan" />
<div class="address">
<h3>Taylor</h3>
</div>
<div class="details">
<p>12060 Delta Dr.</p>
<p>Taylor, MI 48180</p>
<p>Phone: (734) 946-1300</p>
<p>Fax: (734) 946-0968</p>
</div>
</div>
</div>
<div id="location">
<div id="locationwrap" onclick="javascript:openZoom(3);">
<img src="images/shelbymi.jpg" alt="Shelby, Michigan" />
<div class="address">
<h3>Shelby</h3>
</div>
<div class="details">
<p>51103 Celeste</p>
<p>Shelby Township, MI 48315</p>
<p>Phone: (586) 532-8100</p>
<p>Fax: (248) 358-0732</p>
</div>
</div>
</div>
<div id="location">
<div id="locationwrap" onclick="javascript:openZoom(4);">
<img src="images/southfieldmi.jpg" alt="Southfield, Michigan" />
<div class="address">
<h3>Southfield</h3>
</div>
<div class="details">
<p>23233 Lahser Rd.</p>
<p>Southfield, MI 48034</p>
<p>Phone: (248) 358-0200</p>
<p>Fax: (248) 358-0732</p>
</div>
</div>
On 30 Gru, 18:56, dentalguy <[email protected]> wrote:
> I'm trying to work with the Google Maps API on the following
> page:http://64.220.229.234:2001/WebCat/webcatpageserver.exe?pages/locations
>
> I have 5 location images represented on the page and 5 markers for the
> respective locations on the map.
>
> What I want to do is allow the user to click on a location image and
> populate the map with only the marker for that location.
>
> I'm new to the Google Maps API and couldn't find any similar questions
> in this group...
>
> Thanks in advance for you help!
>
> -Cory
--
You received this message because you are subscribed to the Google Groups
"Google Maps API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-api?hl=en.
