Leslie Leslie - 25 days ago 5
jQuery Question

Google Map (v3) - Click on a link to zoom to marker and activate infobox

is there any ways to click on a link (Village 1 - using data-value?) to zoom in to the marker on the map and the infobox will be show?

I've been trying for just cant make this work. Really appreciate any help rendered. Thanks!

Current work can be seen here

HTML

<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<a href="#" data-value="">Village 1</a>
<a href="#" data-value="">Village 2</a>
<a href="#" data-value="">Village 3</a>
<a href="#" data-value="">Village 4</a>
<a href="#" data-value="">Village 5</a>

<ul class="com-map-leg">
<span class="cap">Legend (Hover to see description) </span>
<li data-toggle="tooltip" data-placement="top" title="Building the capacity of key stakeholders is essential in order to establish community ownership and informed decision making. Key skills such as community mobilization, negotiation, facilitation, and project management have been provided to village development committees and community based volunteers. Since 2015, 618 training man-hours have been recorded."><span class="rd-cir col-5"></span> Community Capacity Development</li>
<li data-toggle="tooltip" data-placement="top" title="Effectively responding to natural disasters requires effective communication and a viable team ethic. MPRL E&P has responded to 2 large flooding disasters that affected the communities Mann field. A series of assessments were initiated to better understand the needs and concerns of the communities ensuring the right type of relief was provided and effective rehabilitation followed. A total of USD 681,772.06 has been spent on 2 disaster responses and 171 employees volunteered a total of 2245 hours to assist with the relief and recovery. "><span class="rd-cir col-3"></span> Disaster Relief &amp; Management</li>
<li data-toggle="tooltip" data-placement="top" title="Every child deserves the right to an education. Understanding the constraints of public schools in rural areas MPRL E&P has invested in school materials and equipment to aid the effectiveness and quality of education provided in Mann field. A total of 342 students aged 5-16 gained access to classroom furniture. A further total of 10 members of the communities received short-term work providing them with 130,000 MMK each."><span class="rd-cir col-6"></span> Education</li>
<li data-toggle="tooltip" data-placement="top" title="Improving access to clean water is a human right. It can improve the health, economy, and social well being of a community. MPRL E&P invested in 11 communities within Mann field by building water wells and water tanks to ensure a constant access to water supplies. Village development committees were taught to manage the projects including community expectations. MPRL E&P worked alongside the committees and provided technical expertise to ensure safety standards and requirements were met as well as conducted knowledge transfer to ensure basic skills such as management was provided. At least 69% of the communities were satisfied with the project."><span class="rd-cir col-2"></span> Health, Water &amp; Sanitation</li>
<li data-toggle="tooltip" data-placement="top" title="Supporting corporate philanthropy promotes a sense of company pride and loyalty. Encouraging employees to be active in the community is a value conveyed throughout the organization. A variety of projects have been established across Mann field to promote a sense of giving. Since 2001 a total of USD 106,068 has been spent on charity based activities."><span class="rd-cir col-4"></span> Philanthropy</li>


</ul>



</div>
<div class="col-sm-9">
<div id="community-map"></div>
</div>

</div>
</div>


Javascript

var map;
var ib;

function initMap() {
map = new google.maps.Map(document.getElementById('community-map'), {
zoom: 13,
center: {
lat: 20.235333,
lng: 94.854444
},
scrollwheel: false,
mapTypeId: 'roadmap',
styles: [{
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#e9e9e9"
}, {
"lightness": 17
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"color": "#f5f5f5"
}, {
"lightness": 20
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 17
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 29
}, {
"weight": 0.2
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 18
}]
}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 16
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#f5f5f5"
}, {
"lightness": 21
}]
}, {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"color": "#dedede"
}, {
"lightness": 21
}]
}, {
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "on"
}, {
"color": "#ffffff"
}, {
"lightness": 16
}]
}, {
"elementType": "labels.text.fill",
"stylers": [{
"saturation": 36
}, {
"color": "#333333"
}, {
"lightness": 40
}]
}, {
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "geometry",
"stylers": [{
"color": "#f2f2f2"
}, {
"lightness": 19
}]
}, {
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [{
"color": "#fefefe"
}, {
"lightness": 20
}]
}, {
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#fefefe"
}, {
"lightness": 17
}, {
"weight": 1.2
}]
}]

});

// var myLatLng = {lat: -25.363, lng: 131.044};
var AyeMya = {lat: 20.235333, lng: 94.854444}; //village1
var AukKyaung = {lat: 20.224686, lng: 94.864300}; //village2
var ChinTaung = {lat: 20.250997, lng: 94.848039}; //village3
var EainYwar = {lat: 20.198219, lng: 94.844403}; //village4
var KyarKan = {lat: 20.214497, lng: 94.867211}; //village5
var LayEainTan = {lat: 20.230625, lng: 94.861400}; //village6
var LetPanTapin = {lat: 20.216883, lng: 94.866522}; //village7
var LetPaTaw = {lat: 20.232742, lng: 94.859961}; //village8
var MaeBaytKone = {lat: 20.238883, lng: 94.853800}; //village9
var MakyeeChaung = {lat: 20.192483, lng: 94.870936}; //village10
var ManKyoe = {lat: 20.250936, lng: 94.856403}; //village11
var NanU = {lat: 20.228156, lng: 94.863450}; //village12
var PaukKone = {lat: 20.212183, lng: 94.868389}; //village13
var YwarThar = {lat: 20.198972, lng: 94.874247}; //village14

var villageAyeMya = new google.maps.Marker({
position: AyeMya,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7,
fillColor: "#696969",
fillOpacity: 0.8,
strokeWeight: 0
}
});

villageAyeMya.setMap(map);
polygonClickHandler(villageAyeMya, '<div id="iw_container" class="gw_style_iw" >' +
'<div class="iw_title">Auk Kyaung</span></div>' +
'<div class="iw_content">' +
'<ul>' +
'<li><i class="rd-cir col-2"></i>Water pipe extension to village</li>' +
'</ul>' +
'</div>' +
'</div>');

var villageAukKyaung = new google.maps.Marker({
position: AukKyaung,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7,
fillColor: "#696969",
fillOpacity: 0.8,
strokeWeight: 0
}
});
villageAukKyaung.setMap(map);
polygonClickHandler(villageAukKyaung, '<div id="iw_container" class="gw_style_iw" >' +
'<div class="iw_title">Auk Kyaung</span></div>' +
'<div class="iw_content">' +
'<ul>' +
'<li><i class="rd-cir col-5"></i>Provided Training for VDC members</li>' +
'<li><i class="rd-cir col-3"></i>Distribution For Flood Relief (2015)</li>' +
'<li><i class="rd-cir col-6"></i>Provided School furniture</li>' +
'<li><i class="rd-cir col-2"></i>Water pipe extention to village and provide a water tank to school</li>' +
'<li><i class="rd-cir col-4"></i>Dakundaing for Auk Kyaung Pagoda</li>' +
'</ul>' +
'</div>' +
'</div>');



ib = new InfoBox();
}

function polygonClickHandler(polygon, contentString) {
var boxText = document.createElement("div");
boxText.className = 'com-map';
boxText.innerHTML = contentString;
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-100, -200),
zIndex: null,
boxStyle: {
// opacity: 1.0,
// width: "200px"
},
// closeBoxMargin: "10px 0px 2px -200px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
// var ib = new InfoBox(myOptions);
polygon.addListener('mouseover', function(evt) {
ib.setOptions(myOptions);
ib.setPosition(evt.latLng);
ib.open(map);
});
}


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

Answer

One option to activate the mouseover event handler from the HTML:

  1. make the "village" variables global
  2. "trigger" a mousover event on the marker when the link in the HTML is clicked, providing the event object for that villiage.
<a href="#" data-value="" onclick="google.maps.event.trigger(villageAyeMya,'mouseover', {latLng: new google.maps.LatLng(20.235333, 94.854444)});">Village 1</a>

proof of concept fiddle

code snippet:

var map;
var ib;
var villageAukKyaung;
var villageAyeMya;

function initMap() {
  map = new google.maps.Map(document.getElementById('community-map'), {
    zoom: 13,
    center: {
      lat: 20.235333,
      lng: 94.854444
    },
    scrollwheel: false,
    mapTypeId: 'roadmap',
  });

  // var myLatLng = {lat: -25.363, lng: 131.044};
  var AyeMya = {
    lat: 20.235333,
    lng: 94.854444
  }; //village1
  var AukKyaung = {
    lat: 20.224686,
    lng: 94.864300
  }; //village2

  villageAyeMya = new google.maps.Marker({
    position: AyeMya,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 7,
      fillColor: "#696969",
      fillOpacity: 0.8,
      strokeWeight: 0
    }
  });

  villageAyeMya.setMap(map);
  polygonClickHandler(villageAyeMya, '<div id="iw_container" class="gw_style_iw" >' +
    '<div class="iw_title">Aye Mya</span></div>' +
    '<div class="iw_content">' +
    '<ul>' +
    '<li><i class="rd-cir col-2"></i>Water pipe extension to village</li>' +
    '</ul>' +
    '</div>' +
    '</div>');

  villageAukKyaung = new google.maps.Marker({
    position: AukKyaung,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 7,
      fillColor: "#696969",
      fillOpacity: 0.8,
      strokeWeight: 0
    }
  });
  villageAukKyaung.setMap(map);
  polygonClickHandler(villageAukKyaung, '<div id="iw_container" class="gw_style_iw" >' +
    '<div class="iw_title">Auk Kyaung</span></div>' +
    '<div class="iw_content">' +
    '<ul>' +
    '<li><i class="rd-cir col-5"></i>Provided Training for VDC members</li>' +
    '<li><i class="rd-cir col-3"></i>Distribution For Flood Relief (2015)</li>' +
    '<li><i class="rd-cir col-6"></i>Provided School furniture</li>' +
    '<li><i class="rd-cir col-2"></i>Water pipe extention to village and provide a water tank to school</li>' +
    '<li><i class="rd-cir col-4"></i>Dakundaing for Auk Kyaung Pagoda</li>' +
    '</ul>' +
    '</div>' +
    '</div>');
  ib = new InfoBox();
}

function polygonClickHandler(polygon, contentString) {
  var boxText = document.createElement("div");
  boxText.className = 'com-map';
  boxText.innerHTML = contentString;
  var myOptions = {
    content: boxText,
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-100, -200),
    zIndex: null,
    boxStyle: {},
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
  };
  polygon.addListener('mouseover', function(evt) {
    ib.setOptions(myOptions);
    ib.setPosition(evt.latLng);
    ib.open(map);
  });
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#community-map,
.col-sm-9,
.container-fluid,
.row {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
.com-map {
  text-align: center;
  max-width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: rgba(218, 218, 218, 0.8);
  padding: 20px 10px;
  color: @pri-grey;

font-size: 12px;
  .iw_title {
    margin-top: 0px;
  }
  a {
    color: #fff;
    margin-top: 10px;
    display: block;
  }
  a:hover {
    color: @pri-grey;

  }
  ul {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
    li {
      margin-bottom: 5px;
    }
  }
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      <a href="#" data-value="" onclick="google.maps.event.trigger(villageAyeMya,'mouseover', {latLng: new google.maps.LatLng(20.235333, 94.854444)});">Village 1</a>
      <a href="#" data-value="" onclick="google.maps.event.trigger(villageAukKyaung,'mouseover', {latLng: new google.maps.LatLng(20.224686,94.864300)});">Village 2</a>

      <ul class="com-map-leg">
        <span class="cap">Legend (Hover to see description)</span>
        <li data-toggle="tooltip" data-placement="top" title="Building the capacity of key stakeholders is essential in order to establish community ownership and informed decision making. Key skills such as community mobilization, negotiation, facilitation, and project management have been provided to village development committees and community based volunteers. Since 2015, 618 training man-hours have been recorded."><span class="rd-cir col-5"></span> Community Capacity Development</li>
        <li data-toggle="tooltip" data-placement="top" title="Effectively responding to natural disasters requires effective communication and a viable team ethic. MPRL E&P has responded to 2 large flooding disasters that affected the communities Mann field. A series of assessments were initiated to better understand the needs and concerns of the communities ensuring the right type of relief was provided and effective rehabilitation followed. A total of USD 681,772.06 has been spent on 2 disaster responses and 171 employees volunteered a total of 2245 hours to assist with the relief and recovery. "><span class="rd-cir col-3"></span> Disaster Relief &amp; Management</li>
        <li data-toggle="tooltip" data-placement="top" title="Every child deserves the right to an education. Understanding the constraints of public schools in rural areas MPRL E&P has invested in school materials and equipment to aid the effectiveness and quality of education provided in Mann field. A total of 342 students aged 5-16 gained access to classroom furniture. A further total of 10 members of the communities received short-term work providing them with 130,000 MMK each."><span class="rd-cir col-6"></span> Education</li>
        <li data-toggle="tooltip" data-placement="top" title="Improving access to clean water is a human right. It can improve the health, economy, and social well being of a community. MPRL E&P invested in 11 communities within Mann field by building water wells and water tanks to ensure a constant access to water supplies. Village development committees were taught to manage the projects including community expectations.  MPRL E&P worked alongside the committees and provided technical expertise to ensure safety standards and requirements were met as well as conducted knowledge transfer to ensure basic skills such as management was provided. At least 69% of the communities were satisfied with the project."><span class="rd-cir col-2"></span> Health, Water &amp; Sanitation</li>
        <li data-toggle="tooltip" data-placement="top" title="Supporting corporate philanthropy promotes a sense of company pride and loyalty. Encouraging employees to be active in the community is a value conveyed throughout the organization. A variety of projects have been established across Mann field to promote a sense of giving.  Since 2001 a total of USD 106,068 has been spent on charity based activities."><span class="rd-cir col-4"></span> Philanthropy</li>
      </ul>
    </div>
    <div class="col-sm-9">
      <div id="community-map"></div>
    </div>
  </div>
</div>

Comments