I'm not a developer and I find myself stuck in the panTo() function. All I want is to execute this function with an if-else statement without having to reload the Google Map or using jQuery.
<body>
<div id="map"></div>
<div>
<ul>
<li><a href="#" id="abc" onclick="main(1)">A</a></li>
<li><a href="#" id="def" onclick="main(2)">B</a></li>
<li><a href="#" id="ghi" onclick="main(3)">C</a></li>
<li><a href="#" id="jkl" onclick="main(4)">D</a></li>
</ul>
</body>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFX2v5z34vYKl0We4nHV4KFV1j6uVsltg&callback=main"></script>
Here's the function:
function main(number) {
var map;
var map= {
center:new google.maps.LatLng(33.72939,73.09315),
zoom:10,
};
if (number==1) {
map.setCenter(51.508742,-0.120850);
}else if (number==2) {
map.setCenter(33.72939,73.09315);
}else if (number==3) {
map.setCenter(33.939445,73.34587);
}else{
alert("Sorry! No Place found with name ")
}
var map1= new google.maps.Map(document.getElementById("map"),map);
}