troubleshooting Question

Add Clickable Links to Google Map Markers

Avatar of sonic1234
sonic1234Flag for Australia asked on
JavaScript
3 Comments1 Solution3729 ViewsLast Modified:
Hello Experts,

I want when users click on my markers that they go to a URL in a new window.  My code so far - I am missing something here;

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">



    <style type="text/css">
        #map_canvas {

            height: 400px;
            width: 100%;

        }
    </style>
    </title>





    <script type='text/javascript'>
        //<![CDATA[
        window.onload = function() {
                var locations = [
                    ['Bondi Beach', -33.890542, 151.274856, 4, 'http://www.google.com'],
                    ['Coogee Beach', -33.923036, 151.259052, 5, 'http://microsoft.com'],
                    ['Cronulla Beach', -34.028249, 151.157507, 3, 'http://www.apple.com'],
                    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2, 'http://www.facebook.com'],
                    ['Maroubra Beach', -33.950198, 151.259302, 1, 'http://www.twitter.com']
                ];
                var map;
                var markers = [];

                function init() {
                    map = new google.maps.Map(document.getElementById('map_canvas'), {
                        zoom: 10,
                        center: new google.maps.LatLng(-33.92, 151.25),
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    });

                    var num_markers = locations.length;
                    for (var i = 0; i < num_markers; i++) {
                        markers[i] = new google.maps.Marker({
                            position: {
                                lat: locations[i][1],
                                lng: locations[i][2]
                            },
                            map: map,
                            html: locations[i][0],
                            url: locations[i][4],
                            id: i,
                        });

                        google.maps.event.addListener(markers[i], 'click', function() {
                            window.location.href = marker.url;
                        });
                    }
                }

                init();
            } //]]>
    </script>


</head>

<body>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
    <div id="map_canvas"></div>

</body>

</html>
ASKER CERTIFIED SOLUTION
Kim Walker
Senior Developer

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros