CODEWITHSUNDEEP
javascriptgoogle-maps
Thomas Dutoit
Thomas Dutoit

Reputation: 61

Google maps markers Javascript

I've been struggling with google maps API.

What i want is to add new markers after the map is loaded.

I can add markers but the infowindow isn't kicking in.

<html>
<heads>
<style>
html, body, #map {
  height: 100%;
  margin: 0px;
  padding: 0px
}

#infowindow{
  padding: 10px;
}
</style>
<script>

var map;
var myLatLng = {lat: 51.197263, lng: 4.399279};
var myZoom = 8;
var geocoder;
var infowindow = new google.maps.InfoWindow();
function initMap() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            myLatLng = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            myZoom = 15;
            createmap(myLatLng);
            addMeToMap("F0FF00", "Uw locatie", myLatLng);
        }, function (error) {
            if (document.getElementById("GeoLat").value != "" && document.getElementById("GeoLng").value != "") {
                myLatLng = {
                    lat: parseFloat(document.getElementById("GeoLat").value),
                    lng: parseFloat(document.getElementById("GeoLng").value)
                };
                myZoom = 15;
            };
            createmap(myLatLng);
            }
        );
    } else {
        createmap(myLatLng);
    };
};

function createmap(pos) {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: myZoom,
        center: pos
    });
    addToMap("00FF00", "Test", "1", "", "51.243158", "3.520092");
    addToMap("00FF00", "Test", "2", "", "51.344158", "3.620192");
    addToMap("00FF00", "Test", "3", "", "51.145158", "3.720292");
    addToMap("00FF00", "Test", "4", "", "51.546158", "3.420392");
    addToMap("00FF00", "Test", "5", "", "51.447158", "3.320492");
    addToMap("00FF00", "Test", "6", "", "51.748158", "3.220592");
    addToMap("00FF00", "Test", "7", "", "51.649158", "3.120692");
    addToMap("00FF00", "Test", "8", "", "51.950158", "3.020792");
    addToMap("00FF00", "Test", "9", "", "51.271158", "3.110892");
    addToMap("00FF00", "Test", "10", "", "51.282158", "3.220992");
    addToMap("00FF00", "Test", "11", "", "51.213158", "3.331092");
    addToMap("00FF00", "Test", "12", "", "51.244158", "3.441192");
    addToMap("00FF00", "Test", "13", "", "51.235158", "3.551292");
    addToMap("00FF00", "Test", "14", "", "51.336158", "3.661392");
    addToMap("00FF00", "Test", "15", "", "52.243158", "4.520092");
    addToMap("00FF00", "Test", "16", "", "52.344158", "4.620192");
    addToMap("00FF00", "Test", "17", "", "52.145158", "4.720292");
    addToMap("00FF00", "Test", "18", "", "52.546158", "2.420392");
    addToMap("00FF00", "Test", "19", "", "52.447158", "2.320492");
    addToMap("00FF00", "Test", "20", "", "52.748158", "2.220592");
    addToMap("00FF00", "Test", "21", "", "52.649158", "5.120692");
    addToMap("00FF00", "Test", "22", "", "52.950158", "5.020792");
    addToMap("00FF00", "Test", "23", "", "52.271158", "5.110892");
    addToMap("00FF00", "Test", "24", "", "52.282158", "7.220992");
    addToMap("00FF00", "Test", "25", "", "52.213158", "7.331092");
    addToMap("00FF00", "Test", "26", "", "52.244158", "7.441192");
    addToMap("00FF00", "Test", "27", "", "52.235158", "1.551292");
    addToMap("00FF00", "Test", "28", "", "52.336158", "1.661392");
};

function addToMap(Color, Title, Description, InfoPage, Lat, Lng) {
    var pinColor = Color;
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 34));

    var marker = new google.maps.Marker({
        position: {
            lat: parseFloat(Lat),
            lng: parseFloat(Lng)
        },
        map: map,
        icon: pinImage,
        title: Title
    });

    google.maps.event.addListener(marker, 'click', function () {
        //infowindow.close(); // Close previously opened infowindow
        infowindow.setContent("<div style='padding: 10px' id='infowindow'>" + Title + "</div>");
        infowindow.open(map, marker);
    });

};

function addMeToMap(Color, Title, Pos) {
    var pinColor = Color;
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 34));

    var marker = new google.maps.Marker({
        position: Pos,
        map: map,
        icon: pinImage,
        title: Title
    });
};

</script>

</head>

<body>

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

</body>

</html>

This is actually adding the pins but the click function doesn't work.

Little side-note: If I call all of this in the initMap section, it works but that isn't the solution for me because I want to add markers after the map is loaded.

Upvotes: 0

Views: 74

Answers (2)

geocodezip
geocodezip

Reputation: 161324

I get a javascript error with the posted code: Uncaught ReferenceError: google is not defined on this line:

var infowindow = new google.maps.InfoWindow();

Since you are loading the Google Maps Javascript API v3 asynchronously, all references to API objects must be either inside the callback function (initMap) or used after the API has loaded and it has run.

Move the initialization of the infowindow variable inside the initMap function:

var infowindow;
function initMap() {
    infowindow = new google.maps.InfoWindow();
    // ... rest of initMap function

proof of concept fiddle

screenshot of resulting map

code snippet:

var map;
var myLatLng = {
  lat: 51.197263,
  lng: 4.399279
};
var myZoom = 8;
var geocoder;
var infowindow;

function initMap() {
  infowindow = new google.maps.InfoWindow();
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      myLatLng = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      myZoom = 15;
      createmap(myLatLng);
      addMeToMap("F0FF00", "Uw locatie", myLatLng);
    }, function(error) {
      if (document.getElementById("GeoLat").value != "" && document.getElementById("GeoLng").value != "") {
        myLatLng = {
          lat: parseFloat(document.getElementById("GeoLat").value),
          lng: parseFloat(document.getElementById("GeoLng").value)
        };
        myZoom = 15;
      };
      createmap(myLatLng);
    });
  } else {
    createmap(myLatLng);
  };
};

function createmap(pos) {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: myZoom,
    center: pos
  });
  addToMap("00FF00", "Test", "1", "", "51.243158", "3.520092");
  addToMap("00FF00", "Test", "2", "", "51.344158", "3.620192");
  addToMap("00FF00", "Test", "3", "", "51.145158", "3.720292");
  addToMap("00FF00", "Test", "4", "", "51.546158", "3.420392");
  addToMap("00FF00", "Test", "5", "", "51.447158", "3.320492");
  addToMap("00FF00", "Test", "6", "", "51.748158", "3.220592");
  addToMap("00FF00", "Test", "7", "", "51.649158", "3.120692");
  addToMap("00FF00", "Test", "8", "", "51.950158", "3.020792");
  addToMap("00FF00", "Test", "9", "", "51.271158", "3.110892");
  addToMap("00FF00", "Test", "10", "", "51.282158", "3.220992");
  addToMap("00FF00", "Test", "11", "", "51.213158", "3.331092");
  addToMap("00FF00", "Test", "12", "", "51.244158", "3.441192");
  addToMap("00FF00", "Test", "13", "", "51.235158", "3.551292");
  addToMap("00FF00", "Test", "14", "", "51.336158", "3.661392");
  addToMap("00FF00", "Test", "15", "", "52.243158", "4.520092");
  addToMap("00FF00", "Test", "16", "", "52.344158", "4.620192");
  addToMap("00FF00", "Test", "17", "", "52.145158", "4.720292");
  addToMap("00FF00", "Test", "18", "", "52.546158", "2.420392");
  addToMap("00FF00", "Test", "19", "", "52.447158", "2.320492");
  addToMap("00FF00", "Test", "20", "", "52.748158", "2.220592");
  addToMap("00FF00", "Test", "21", "", "52.649158", "5.120692");
  addToMap("00FF00", "Test", "22", "", "52.950158", "5.020792");
  addToMap("00FF00", "Test", "23", "", "52.271158", "5.110892");
  addToMap("00FF00", "Test", "24", "", "52.282158", "7.220992");
  addToMap("00FF00", "Test", "25", "", "52.213158", "7.331092");
  addToMap("00FF00", "Test", "26", "", "52.244158", "7.441192");
  addToMap("00FF00", "Test", "27", "", "52.235158", "1.551292");
  addToMap("00FF00", "Test", "28", "", "52.336158", "1.661392");
  map.fitBounds(bounds);
};

var bounds;

function addToMap(Color, Title, Description, InfoPage, Lat, Lng) {
  var pinColor = Color;
  var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
    new google.maps.Size(21, 34),
    new google.maps.Point(0, 0),
    new google.maps.Point(10, 34));

  var marker = new google.maps.Marker({
    position: {
      lat: parseFloat(Lat),
      lng: parseFloat(Lng)
    },
    map: map,
    icon: pinImage,
    title: Title
  });
  if (!bounds) bounds = new google.maps.LatLngBounds();
  bounds.extend(marker.getPosition());
  google.maps.event.addListener(marker, 'click', function() {
    //infowindow.close(); // Close previously opened infowindow
    infowindow.setContent("<div style='padding: 10px' id='infowindow'>" + Title + "</div>");
    infowindow.open(map, marker);
  });

};

function addMeToMap(Color, Title, Pos) {
  var pinColor = Color;
  var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
    new google.maps.Size(21, 34),
    new google.maps.Point(0, 0),
    new google.maps.Point(10, 34));

  var marker = new google.maps.Marker({
    position: Pos,
    map: map,
    icon: pinImage,
    title: Title
  });
};
html,
body,
#map {
  height: 95%;
  margin: 0px;
  padding: 0px;
}

#infowindow {
  padding: 10px;
}
<input type="button" onclick="addToMap('FF0000','M1','Marker 1','',map.getCenter().lat(),map.getCenter().lng());" value="red marker" /><input type="button" onclick="addToMap('0000FF','M2','Marker 2','',map.getCenter().lat(),map.getCenter().lng());" value="blue marker"
/>
<input id="GeoLat" /><input id="GeoLng" />
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<div id="map"></div>

Upvotes: 1

Madhan Varadhodiyil
Madhan Varadhodiyil

Reputation: 2116

google.maps.InfoWindow() is not loaded on page load, You can either either set after google maps API is set and define it in call back function or use $.ready(). 

<html>
<heads>
<style>
html, body, #map {
height: 100%;
margin: 0px;
padding: 0px
}

#infowindow{
padding: 10px;
}
</style>
<script>

var map;
var myLatLng = {lat: 51.197263, lng: 4.399279};
var myZoom = 8;
var geocoder;
var infowindow = null;  // You'll get ReferenceError: google is not defined as lib is not loaded yet
function initMap() {
    infowindow = new google.maps.InfoWindow(); // set infowindow on call back function
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            myLatLng = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            myZoom = 15;
            createmap(myLatLng);
            addMeToMap("F0FF00", "Uw locatie", myLatLng);
        }, function (error) {
            if (document.getElementById("GeoLat").value != "" && document.getElementById("GeoLng").value != "") {
                myLatLng = {
                    lat: parseFloat(document.getElementById("GeoLat").value),
                    lng: parseFloat(document.getElementById("GeoLng").value)
                };
                myZoom = 15;
            };
            createmap(myLatLng);
            }
        );
    } else {
        createmap(myLatLng);
    };
};

function createmap(pos) {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: myZoom,
        center: pos
    });
    addToMap("00FF00", "Test", "1", "", "51.243158", "3.520092");
    addToMap("00FF00", "Test", "2", "", "51.344158", "3.620192");
    addToMap("00FF00", "Test", "3", "", "51.145158", "3.720292");
    addToMap("00FF00", "Test", "4", "", "51.546158", "3.420392");
    addToMap("00FF00", "Test", "5", "", "51.447158", "3.320492");
    addToMap("00FF00", "Test", "6", "", "51.748158", "3.220592");
    addToMap("00FF00", "Test", "7", "", "51.649158", "3.120692");
    addToMap("00FF00", "Test", "8", "", "51.950158", "3.020792");
    addToMap("00FF00", "Test", "9", "", "51.271158", "3.110892");
    addToMap("00FF00", "Test", "10", "", "51.282158", "3.220992");
    addToMap("00FF00", "Test", "11", "", "51.213158", "3.331092");
    addToMap("00FF00", "Test", "12", "", "51.244158", "3.441192");
    addToMap("00FF00", "Test", "13", "", "51.235158", "3.551292");
    addToMap("00FF00", "Test", "14", "", "51.336158", "3.661392");
    addToMap("00FF00", "Test", "15", "", "52.243158", "4.520092");
    addToMap("00FF00", "Test", "16", "", "52.344158", "4.620192");
    addToMap("00FF00", "Test", "17", "", "52.145158", "4.720292");
    addToMap("00FF00", "Test", "18", "", "52.546158", "2.420392");
    addToMap("00FF00", "Test", "19", "", "52.447158", "2.320492");
    addToMap("00FF00", "Test", "20", "", "52.748158", "2.220592");
    addToMap("00FF00", "Test", "21", "", "52.649158", "5.120692");
    addToMap("00FF00", "Test", "22", "", "52.950158", "5.020792");
    addToMap("00FF00", "Test", "23", "", "52.271158", "5.110892");
    addToMap("00FF00", "Test", "24", "", "52.282158", "7.220992");
    addToMap("00FF00", "Test", "25", "", "52.213158", "7.331092");
    addToMap("00FF00", "Test", "26", "", "52.244158", "7.441192");
    addToMap("00FF00", "Test", "27", "", "52.235158", "1.551292");
    addToMap("00FF00", "Test", "28", "", "52.336158", "1.661392");
};

function addToMap(Color, Title, Description, InfoPage, Lat, Lng) {
    var pinColor = Color;
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 34));

    var marker = new google.maps.Marker({
        position: {
            lat: parseFloat(Lat),
            lng: parseFloat(Lng)
        },
        map: map,
        icon: pinImage,
        title: Title
    });

    marker.addListener('click', function () { // You can add click listener to marker directly.
        //infowindow.close(); // Close previously opened infowindow
        infowindow.setContent("<div style='padding: 10px' id='infowindow'>" + Title + "</div>");
        infowindow.open(map, marker);
    });

};

function addMeToMap(Color, Title, Pos) {
    var pinColor = Color;
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 34));

    var marker = new google.maps.Marker({
        position: Pos,
        map: map,
        icon: pinImage,
        title: Title
    });
};

</script>

</head>

<body>

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

</body>

</html>

Edit : jsfiddle

Upvotes: 0

Related Questions