Add Clickable Links to Google Map Markers

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>

Open in new window

sonic1234Asked:
Who is Participating?
 
Kim WalkerWeb Programmer/TechnicianCommented:
My mistake, I stopped at the first error I saw and didn't look at the rest of the code.

The first issue is the syntax for the code I posted earlier. If everything else was correct, it would be:
window.open(marker.url);

Open in new window

However, the variable marker has never been defined. So it can't find a url property  to open. The correct code should be
window.open(this.url);

Open in new window

There is another error in your code. The script url for loading the google maps api includes a callback function named initMap which doesn't exist. There isn't any need for a callback anyway since the map is executed with a window.load event trigger. So the callback function can be eliminated.
<script src="https://maps.googleapis.com/maps/api/js"></script>

Open in new window

1
 
Kim WalkerWeb Programmer/TechnicianCommented:
window.location.href changes the url of the current window. window.open should open the url in a new window. (See line 59 of your code.)
window.open = marker.url;

Open in new window

0
 
sonic1234Author Commented:
Thank you, there must be some other error with my code because that change still does not result in the marker clicks working

<!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.open = 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>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.