Javascript google maps_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-25 22:36 出处：网络

I have multiple locations of my company\'s regional offices and have to show each开发者_JS百科 location whenever user clicks at a locations like:

I have multiple locations of my company's regional offices and have to show each开发者_JS百科 location whenever user clicks at a locations like:

location1

location2

location3

When user clicks at location 1 it will show location 1 on the map. I also have those locations in my maps. I have never worked with Google maps before, so I just need some idea to get started.

When your user clicks a link, run a piece a javascript that calls setCenter(latlng:LatLng) on the map to center the map to a certain location.

If you really don't know where to begin, then start by reading the Google Maps API documentation. It's easy to read, and it contains lots of working examples.

You can do something like this: (I'm sure it could be optimized with a for loop, its early/late right now.

  <html>
    <head>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">

    function initialize() { //Initalize JS after onload
    var map = new google.maps.Map(document.getElementById('map_canvas'), { 
     mapTypeId: google.maps.MapTypeId.ROADMAP,
    });


    var randomPoint1 = new google.maps.LatLng(44.6479, -63.5744); //First Location

    var marker1 = new google.maps.Marker({ //Set up marker
           position: randomPoint1,
           map: map
        });

    google.maps.event.addDomListener(document.getElementById('locationid1'), 'click', //Set up DOM listener 1
        function(){
            map.setZoom(13);
         map.setCenter(marker1.getPosition());  
        });


    var randomPoint2 = new google.maps.LatLng(45.5081, -73.5550); //Second Location

    var marker2 = new google.maps.Marker({
           position: randomPoint2,
           map: map
        });

    google.maps.event.addDomListener(document.getElementById('locationid2'), 'click',//Set up DOM listener 2
        function(){
            map.setZoom(13);
         map.setCenter(marker2.getPosition());  
        });


    var randomPoint3 = new google.maps.LatLng(43.6481, -79.4042); //Third Location

    var marker3 = new google.maps.Marker({
           position: randomPoint3,
           map: map
        });

    google.maps.event.addDomListener(document.getElementById('locationid3'), 'click', //Set up DOM listener 3
        function(){
            map.setZoom(13);
         map.setCenter(marker3.getPosition());  
        });
        map.setCenter(marker2.getPosition());
        map.setZoom(5);
    }



    </script>

    </head>
    <body onload="initialize()"> <!--Initalize JS after onload--->
        <a href="#" id="locationid1">Halifax</a>
        <a href="#" id="locationid2">Montreal</a>
        <a href="#" id="locationid3">Toronto</a>

        <div id="map_canvas" style="height:100%; width:100%"></div>

    </body>

</html>

And after I write this I realize the post was from last August. Oh well, may help someone at some point.