CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
user3943543
user3943543

Reputation: 157

marker location, when clicking external link

I've been running in circles, I'm trying to show the right marker when the user clicks an external link. Read through some solutions already, but I can't get anything working. My thought was to store the markers in an array and access it on click. When I console.log it I get a funny object. Not sure if I'm doing this right. 

var markers = new Array(); //array for markers.

markers.push(marker);//push markers to array when function is called.

marker = markers[this.id]; //use markers.

here is my JavaScript : Fiddle

$(document).ready(function() {
    var map ;
var infoWindow = new google.maps.InfoWindow({
    disableAutoPan : false,
    maxWidth : 450 ,
    zIndex : 1 
});
function loadMap(){
    var markers = new Array();
    var mapOptions = {
        center : new google.maps.LatLng(34.746481, -92.289595) ,
        zoom : 12 ,
        mapTypeControl: false,
        streetViewControl: false,
        zoomControl: true
    };
    //create map.
    var mapId     = document.getElementById('map');
        map       = new google.maps.Map(mapId, mapOptions);
    console.log(markers)
    //map content creation.
    $('.mapVars').each(function(index, el){
        var address = $(el).find('.address').html(),
            state   = $(el).find('.state').html(),
            country = $(el).find('.country').html(),
            lat     = $(el).find('.lat').html(),
            lng     = $(el).find('.lng').html(),
            content = $(el).find('.content').html(),
            name    = $(el).find('.name').html();
        var fullAdress = address + '<br />' + state ;   
        //marker creation.
        var newMarker = createMarker(lat, lng, name, content, fullAdress);
    });
    //add marker to map.
    function createMarker(lat, lng, name, content, fullAdress){
        //create marker options.
        var marker = new google.maps.Marker({
            position : new google.maps.LatLng(lat, lng) ,
            map : map ,
            animation : google.maps.Animation.DROP,
            clickable : true ,
            title : name,
            zIndex : 1 
        });
        var windowContent = buildHtml(content, name, fullAdress);
        //info window open event.
        google.maps.event.addListener(marker, 'click', function(e){
            infoWindow.close();
            infoWindow.setContent(windowContent);
            infoWindow.open(map, marker);
        }); 
        markers.push(marker);
        return marker ;
    }
    //infoWindow content.
    function buildHtml(content, name, fullAdress){
        html = ' '
        html += '<div class=\"info-window\">';
        html += '<div class=\"upper\">';
        html += '<h5>' + name + '</h5>' + fullAdress;
        html += '</div>' ;
        html += '<div class=\"lower\">' ;
        html += content ;
        html += '</div></div>' ;
        return html ;
    }
    $('.map-trigger').on('click', function(event) {
        event.preventDefault();
        marker = markers[this.id];
        var content = $(this).find('.content').html();
            infoWindow.close();
            infoWindow.setContent(content);
            infoWindow.open(map, marker);
    }); 
}
google.maps.event.addDomListener(window, 'load', loadMap());
});

It looks like the lat/lng isn't working right. Any help would be awesome, getting lost on this.

Upvotes: 0

Views: 598

Answers (1)

geocodezip
geocodezip

Reputation: 161324

One option would be to ignore the marker (you have the coordinates of the point in your HTML). Open the infowindow directly at the correct position, setting a pixel offset so it doesn't overlap the marker.

$('.map-trigger').on('click', function(event) {
  event.preventDefault();
  marker = markers[this.id];
  var content = $(this).find('.content').html();
  infoWindow.close();
  infoWindow.setOptions({
    // offset infowindow so doesn't overlap the default marker
    pixelOffset: new google.maps.Size(0, -40)
  });

  infoWindow.setContent(content);
  // position of the marker
  var posn = {
    lat: parseFloat($(this).find('.lat').html()),
    lng: parseFloat($(this).find('.lng').html())
  };
  infoWindow.setPosition(posn);
  infoWindow.open(map);
});

updated fiddle

code snippet:

$(document).ready(function() {
  var map;
  //map style object.
  var mapStyle = [{
    "stylers": [{
      "saturation": -100
    }, {
      "gamma": 1
    }]
  }, {
    "elementType": "labels.text.stroke",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "poi.business",
    "elementType": "labels.text",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "poi.business",
    "elementType": "labels.icon",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "poi.place_of_worship",
    "elementType": "labels.text",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "poi.place_of_worship",
    "elementType": "labels.icon",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [{
      "visibility": "simplified"
    }]
  }, {
    "featureType": "water",
    "stylers": [{
      "visibility": "on"
    }, {
      "saturation": 50
    }, {
      "gamma": 0
    }, {
      "hue": "#50a5d1"
    }]
  }, {
    "featureType": "administrative.neighborhood",
    "elementType": "labels.text.fill",
    "stylers": [{
      "color": "#333333"
    }]
  }, {
    "featureType": "road.local",
    "elementType": "labels.text",
    "stylers": [{
      "weight": 0.5
    }, {
      "color": "#333333"
    }]
  }, {
    "featureType": "transit.station",
    "elementType": "labels.icon",
    "stylers": [{
      "gamma": 1
    }, {
      "saturation": 50
    }]
  }];
  //infoWindow options.
  var infoWindow = new google.maps.InfoWindow({
    disableAutoPan: false,
    maxWidth: 450,
    zIndex: 1
  });

  function loadMap() {
    var markers = new Array();
    var mapOptions = {
      center: new google.maps.LatLng(34.746481, -92.289595),
      styles: mapStyle,
      zoom: 12,
      mapTypeControl: false,
      streetViewControl: false,
      zoomControl: true
    };
    //create map.
    var mapId = document.getElementById('map');
    map = new google.maps.Map(mapId, mapOptions);
    console.log(markers)
      //map content creation.
    $('.mapVars').each(function(index, el) {
      var address = $(el).find('.address').html(),
        state = $(el).find('.state').html(),
        country = $(el).find('.country').html(),
        lat = $(el).find('.lat').html(),
        lng = $(el).find('.lng').html(),
        content = $(el).find('.content').html(),
        name = $(el).find('.name').html();
      var fullAdress = address + '<br />' + state;
      //marker creation.
      var newMarker = createMarker(lat, lng, name, content, fullAdress);
    });
    //add marker to map.
    function createMarker(lat, lng, name, content, fullAdress) {
        //create marker options.
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat, lng),
          map: map,
          animation: google.maps.Animation.DROP,
          clickable: true,
          title: name,
          zIndex: 1
        });
        var windowContent = buildHtml(content, name, fullAdress);
        //info window open event.
        google.maps.event.addListener(marker, 'click', function(e) {
          infoWindow.close();
          infoWindow.setContent(windowContent);
          infoWindow.open(map, marker);
        });
        markers.push(marker);
        return marker;
      }
      //infoWindow content.

    function buildHtml(content, name, fullAdress) {
      html = ' '
      html += '<div class=\"info-window\">';
      html += '<div class=\"upper\">';
      html += '<h5>' + name + '</h5>' + fullAdress;
      html += '</div>';
      html += '<div class=\"lower\">';
      html += content;
      html += '</div></div>';
      return html;
    }
    $('.map-trigger').on('click', function(event) {
      event.preventDefault();
      marker = markers[this.id];
      var content = $(this).find('.content').html();
      infoWindow.close();
      infoWindow.setOptions({
        pixelOffset: new google.maps.Size(0, -40)
      });

      infoWindow.setContent(content);
      var posn = {
        lat: parseFloat($(this).find('.lat').html()),
        lng: parseFloat($(this).find('.lng').html())
      };
      infoWindow.setPosition(posn);
      infoWindow.open(map /*,  marker */ );
    });
  }
  google.maps.event.addDomListener(window, 'load', loadMap());
});
#map {
  height: 600px;
}
.info-window {
  h5 {
    margin-bottom: 5px;
  }
  ul {
    margin-top: 5px;
    padding-left: 10px;
    li {
      margin-bottom: 5px;
    }
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="container">


  <div class="row">
    <div class="col-xs-4">


      <a href="#" class="map-trigger">
        <div class="mapVars row">
          <div class="col-md-12" data-page-id="513" data-page-url="/residence_inn_by_marriott">
            <h2 class="name">Residence Inn by Marriott</h2>
            <span class="address">219 River Market Avenue</span>
            <span class="state"> Little Rock Arkansas 72201</span>
            <span class="country"> United States</span>
            <div class="hidden">

              <div class="lat">34.745714</div>

              <div class="lng">-92.265701</div>

              <div class="content">
                <ul>
                  <li><strong>Phone</strong>: 501-376-7200</li>
                  <li><strong>Rates</strong>: Rates from $169</li>
                </ul>
              </div>
            </div>
            <!-- /.hidden -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.vars -->
      </a>


      <a href="#" class="map-trigger">
        <div class="mapVars row">
          <div class="col-md-12" data-page-id="512" data-page-url="/doubletree_hotel">
            <h2 class="name">Doubletree Hotel</h2>
            <span class="address">424 West Markham Street</span>
            <span class="state"> Little Rock Arkansas 72201</span>
            <span class="country"> United States</span>
            <div class="hidden">

              <div class="lat">34.749383</div>

              <div class="lng">-92.273683</div>

              <div class="content">
                <ul>
                  <li><strong>Phone</strong>: 501-372-4371</li>
                  <li><strong>Rates</strong>: Rates from $139-199</li>
                </ul>
              </div>
            </div>
            <!-- /.hidden -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.vars -->
      </a>


      <a href="#" class="map-trigger">
        <div class="mapVars row">
          <div class="col-md-12" data-page-id="511" data-page-url="/little_rock_marriott">
            <h2 class="name">Little Rock Marriott (Headquarters Hotel)</h2>
            <span class="address">3 Statehouse Plaza</span>
            <span class="state"> Little Rock Arkansas 72201</span>
            <span class="country"> United States</span>
            <div class="hidden">

              <div class="lat">34.748623</div>

              <div class="lng">-92.271504</div>

              <div class="content">
                <ul>
                  <li><strong>Phone</strong>: 877-759-6290</li>
                  <li><strong>Rates</strong>: Rates from $149-189</li>
                </ul>
              </div>
            </div>
            <!-- /.hidden -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.vars -->
      </a>


      <a href="#" class="map-trigger">
        <div class="mapVars row">
          <div class="col-md-12" data-page-id="510" data-page-url="/capital_hotel">
            <h2 class="name">Capital Hotel</h2>
            <span class="address">111 West Markham Street</span>
            <span class="state"> Little Rock Arkansas 72201</span>
            <span class="country"> United States</span>
            <div class="hidden">

              <div class="lat">34.747799</div>

              <div class="lng">-92.271275</div>

              <div class="content">
                <ul>
                  <li><strong>Phone</strong>: 870-637-0037, 501-374-7474</li>
                  <li><strong>Rates</strong>: Rates from $190-205</li>
                </ul>
              </div>
            </div>
            <!-- /.hidden -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.vars -->
      </a>

    </div>
    <div class="col-xs-8">
      <div id="map"></div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions