Removing Map Pin with Search

Question

I\'m trying to create a search bar that filters out items from a list if they do not match the search query. The additional functionality that I\'m trying to add is that if

Answer 1

You can use a Google map plug-in such as Maplace. it will reduce the complexity. it makes easy to add/remove locations on map, trigger new locations on some event. it has easy to use built-in methods.

Check this Demo on how to add/remove new locations in Google map dynamically.

Here is the code.

HTML

  A

  B

  C

  D

  E

 

  Click links to see effect!

CSS

#gmap{
width: 70%;
height: 350px;
margin: 0 auto;
}

#menu {
 width: 300px;
 margin: 15px auto;
 text-align:center;
}
#menu a.loc_link {
 background: #0f89cf;
 color: #fff;
 margin-right: 10px;
 display: inline-block;
 margin-bottom:10px;
 padding: 5px;
 border-radius: 3px;
 text-decoration: none;
}
#menu span#tool_tip {
  display: inline-block;
  margin-top: 10px;
}

JQuery

$(function(){
var map;
var LocA = [{
    lat: 12.58,
    lon: 77.38,
    title: 'Bangalore',
    html: 'Bangalore, Karnataka, India',
    zoom: 4,
    icon: 'http://maps.google.com/mapfiles/markerA.png',
    animation: google.maps.Animation.DROP
 }];

map = new Maplace({
  locations: LocA,
  map_div: '#gmap',
  generate_controls: false,
  start: 0   
}).Load();


$(".loc_link").click(function(){
  var newLoc = [{
      lat: $(this).data('lat'),
      lon: $(this).data('long'),
      title: $(this).data('title'),
      html: $(this).data('html'),
      zoom: 4,
      icon: 'http://maps.google.com/mapfiles/marker'+$(this).text()+'.png',
    animation:google.maps.Animation.DROP
  }];
 map.AddLocations(newLoc).Load();
 map.ViewOnMap($(this).index()+1);
});
});

You need to add these two js libraries to make it work

http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.13 http://maplacejs.com/src/maplace-0.1.3.min.js

Hope this helps.