CODEWITHSUNDEEP
javascripthtmlgoogle-mapsgoogle-maps-api-3
Ricardmc
Ricardmc

Reputation: 27

Multiple markers with infowindow are not showing on GoogleMaps

I'm trying to create a multiple markers map. Every marker will have his infoWindow. I followed all the dev GoogleMaps information and infoWindow are still not appearing.

In this code that I'll give to you, I only create 3 markers with my own function "PintaMarker". This function creates a marker and adds its listener with the infowindow information and pushes the marker to my "markers Array" called markers.

When I finish the creation of the markers, I generate a MarkerClusterer to use and see all markers I create.

Can anyone take a look at my code and give me a hand on it?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Markers Map</title>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <!--script src="js/bootstrap.js"></script-->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script> 


</head>
<body>
    <div id="map1" style="width:100%; height: 913px"></div>
</body>
<script>
        var markers = [];
        var map1=null;
        var geocoder;
        var infowindow = new google.maps.InfoWindow();

        function pintaMarker(lat,lng,html){
            var myLatLng = new google.maps.LatLng(lat, lng);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map1,
            });

            google.maps.event.addListener(marker, 'click', function(){
                infowindow.setOptions({ 
                    content: html
                });
                infowindow.open(map1,marker);
                console.log(infowindow);
            });
            markers.push(marker);
        }

        $(document).ready(function() {
            //var center = new google.maps.LatLng(41.644183,1.620483);
            geocoder = new google.maps.Geocoder();
            var center = new google.maps.LatLng(41.38257066,2.15659028);
            var options = {
                zoom: 16,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map1 = new google.maps.Map(document.getElementById("map1"), options);

            pintaMarker(41.385, 2.154, 'hola');
        pintaMarker(41.387, 2.1529, 'hola2');
        pintaMarker(41.38254, 2.1562, 'hola3');

          var markerCluster = new MarkerClusterer(map1, markers);
        });
    </script>
</html>

Thank you!

Upvotes: 0

Views: 123

Answers (1)

Steven Web
Steven Web

Reputation: 1961

The porblem ist that in your function pintaMarkerthe map1 object is null!!

The solution:

Pass the map object as a parameter to your pintaMarker like this:

 pintaMarker(41.385, 2.154, 'hola', map1);

and update you function to:

    function pintaMarker(lat,lng,html, map1){
        var myLatLng = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map1,
        });

        google.maps.event.addListener(marker, 'click', function(){
            infowindow.setOptions({
                content: html
            });
            infowindow.open(map1, marker);
            console.log(infowindow);
        });
        markers.push(marker);
    }

now the map object is available!

Upvotes: 1

Related Questions