google maps api v3 multiple jumping location marks with info window

Question

google maps api v3 multiple jumping location marks with info window

1.5k Views Asked by Steven Humphrey At 22 January 2012 at 16:28

My goal is create a map with multiple locations with a map that jumps from marker to marker when a html tag was click elsewhere on the page

i made the jumps work but, i can't seem to get the mouseover info boxes to work...i have search but can't find this specific problem

www.humphrey-ray.com/qp/locations-new27a.html

Original Q&A

There are 1 best solutions below

**Ramesh Kotha** · Answer 1 · 2012-01-24T17:29:22.253000

working example..

<!DOCTYPE html>
<html>
    <head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.4key=AIzaSyCjceQVdlfYNqKfDcrAl50VIXrzBXMhDbo&amp;sensor=false">
</script> <script type="text/javascript">
var map;
var marker2;
var marker3;
var marker4;
var marker5;
var infowindow = new google.maps.InfoWindow();
function initialize() {
    var latlng = new google.maps.LatLng(39.94718, -75.14323);
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    marker2 = new google.maps.Marker({
        position: new google.maps.LatLng(39.94718, -75.14323),
        map: map,
        title: "my 2nd title"
    });

    new google.maps.event.addListener( marker2, 'mouseover', function() {
                infowindow.setContent("my 2nd title");
                infowindow.open(map,this);
        });
    marker3 = new google.maps.Marker({
        position: new google.maps.LatLng(39.94924, -75.14268),
        map: map,
        title: "my 2nd title"
    });
    new google.maps.event.addListener( marker3, 'mouseover', function() {
                infowindow.setContent("my 3nd title");
                infowindow.open(map,this);
        });

    marker4 = new google.maps.Marker({
        position: new google.maps.LatLng(39.96146, -75.14325),
        map: map,
        title: "my 2nd title"
    });
    new google.maps.event.addListener( marker4, 'mouseover', function() {
                infowindow.setContent("my 4nd title");
                infowindow.open(map,this);
        });


    marker5 = new google.maps.Marker({
        position: new google.maps.LatLng(39.95098, -75.14558),
        map: map,
        title: "my 5nd title"
    });

        new google.maps.event.addListener( marker5, 'mouseover', function() {
                infowindow.setContent("my 5nd title");
                infowindow.open(map,this);
        });

}
function goToLoc(id){
    if(id== 2)
    map.setCenter(marker2.getPosition());
    if(id == 3)
    map.setCenter(marker3.getPosition());
    if(id == 4)
    map.setCenter(marker4.getPosition());
    if(id == 5)
    map.setCenter(marker5.getPosition());
}

</script> <style type="text/css">
body,td,th { font-family: Arial, Helvetica, sans-serif; }

</style> 
    </head>
    <body onload="initialize()">
        <div id="container">

<!-- /header -->


<!-- /nav -->
            <div class="mapwrapper">
                <div class="mapwrapper" id="map_canvas" style="width:720px; height:400px">
                </div>
                <div class="mapwrapper">

                    <div class="right-top-column">
                        <div class="right-top-column-inner">
                            <br>
                            <img src="img/comin_soon.jpg" width="180" height="186" />
                            </p>
                        </div>
                    </div>
                    <div class="right-top-column-noshaw">
                        <h1>

                            Click Location to show on map
                        </h1>
                        <ul class="side-list">
                            <li>
                                <a href="#" id="marker2" onclick="goToLoc(2)">
                                    Old City</a>
                            </li>
                            <li>
                                <a href="#" id="marker3" onclick="goToLoc(3)">

                                    South Street/Society Hill</a>
                            </li>
                            <li>
                                <a href="#" id="marker4" onclick="goToLoc(4)">
                                    Northern Liberties</a>
                            </li>
                            <li>
                                <a href="#" id="marker5" onclick="goToLoc(5)">

                                    Old City</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>

google maps api v3 multiple jumping location marks with info window

There are 1 best solutions below

Related Questions in API

Related Questions in GOOGLE-MAPS-API-3

Related Questions in MOUSEOVER

Related Questions in OPENINFOWINDOWHTML

Trending Questions

Popular # Hahtags

Popular Questions