CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
user1433479
user1433479

Reputation: 135

Adding another marker to google maps breaks the map

I have a map that goes to a co-ordinate and then shows all nearby fitness, school, grocery and train establishments.

The problem is that I want to add another marker that just sits on top of the co-ord which I'm focussing on.

I've tried adding one using the code below but whenever I do it just doesn't load the map.

  var marker_home = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    icon: home_icon
  });

My code below:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Place searches</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>
    <script>
    var map;
    var infowindow;

    function initialize() {
      var home = new google.maps.LatLng(52.0930779, 5.0142526);

      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: home,
        zoom: 15
      });

      var request = {
        location: home,
        radius: 800,
        types: ['gym', 'grocery_or_supermarket', 'train_station', 'school']
      };

      infowindow = new google.maps.InfoWindow();
      var service = new google.maps.places.PlacesService(map);
      service.nearbySearch(request, callback);
    }

    function callback(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          createMarker(results[i]);
        }
      }
    }

    var home_icon = 'http://wisteriahill.sakura.ne.jp/GMAP/GMAP_MARKER_E/images/red1.png';
    var grocery_icon = 'http://wisteriahill.sakura.ne.jp/GMAP/GMAP_MARKER_E/images/red1.png';
    var school_icon = 'http://wisteriahill.sakura.ne.jp/GMAP/GMAP_MARKER_E/images/red1.png';
    var gym_icon = 'http://wisteriahill.sakura.ne.jp/GMAP/GMAP_MARKER_E/images/red1.png';
    var treinstation_icon = 'http://wisteriahill.sakura.ne.jp/GMAP/GMAP_MARKER_E/images/red1.png';

    function createMarker(place) {
      var custom_icon;

      if(place.types.indexOf('grocery_or_supermarket') != -1) {
        custom_icon = grocery_icon;
      } else if(place.types.indexOf('gym') != -1) {
        custom_icon = gym_icon;
      } else if(place.types.indexOf('train_station') != -1) {
        custom_icon = treinstation_icon;
      } else if(place.types.indexOf('school') != -1) {
        custom_icon = school_icon;
      }

      var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location,
        title: place.name,
        icon: custom_icon
      });

      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(place.name);
        infowindow.open(map, this);
      });
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Upvotes: 0

Views: 154

Answers (1)

duncan
duncan

Reputation: 31920

If you're trying to create the marker "on the home co-ordinates when the map loads", simply add this to your initialize function:

var marker_home = new google.maps.Marker({
    map: map,
    position: home,
    icon: home_icon
});

Upvotes: 1

Related Questions