javascript - How to change Google Map location by clicking a button -
i'm trying make button changes location of map, i've seen many answers can't seem make scripts work on map or on website, i'm confuse, don't understand why won't work.
this code:
html:
<div class="info-map"> <ul class="loks"> <li class="active"> <a id="link1" href="#office" data-toggle="tab"> office </a></li> <li> <a id="link2" href="#showroom" data-toggle="tab"> showroom </a></li> </ul></div> <div id="map"></div>
css:
#map { height: 400px; } .info-map { position: absolute; z-index: 1; background: white; top: 30px; left: 8%; }
script:
var map; function initmap() { var office = { info: '<strong>architectural art crete - office</strong><br>5815 dewey st, hollywood, fl 33023, usa', lat: 26.0020213, long: -80.2058833 }; var showroom = { info: '<strong>showroom</strong><br>1025 w belmont ave<br> chicago, il 60657', lat: 41.939670, long: -87.655167 }; var locations = [ [office.info, office.lat, office.long, 0], [showroom.info, showroom.lat, showroom.long, 1], ]; var map = new google.maps.map(document.getelementbyid('map'), { zoom: 15, center: new google.maps.latlng(26.0020213, -80.2058833), maptypeid: google.maps.maptypeid.roadmap }); var infowindow = new google.maps.infowindow({}); var marker, i; (i = 0; < locations.length; i++) { marker = new google.maps.marker({ position: new google.maps.latlng(locations[i][1], locations[i][2]), map: map }); google.maps.event.addlistener(marker, 'click', (function (marker, i) { return function () { infowindow.setcontent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } }
i found googleapi solution helped me little can't seem make work both locations
google.maps.event.adddomlistener(document.getelementbyid('link2'), 'click', function () { map.setcenter(new google.maps.latlng(10.23,123.45)); });
your code has problem. please close info:
data properly. have missed single quote , comma.
change
info: '<strong>architectural art crete - office</strong><br>\ 5815 dewey st, hollywood, fl 33023, usa,
to
info: '<strong>architectural art crete - office</strong><br>5815 dewey st, hollywood, fl 33023, usa',
see updated code.
var map; function initmap() { var office = { info: '<strong>architectural art crete - office</strong><br>5815 dewey st, hollywood, fl 33023, usa', lat: 26.0020213, long: -80.2058833 }; var showroom = { info: '<strong>showroom</strong><br>1025 w belmont ave<br> chicago, il 60657', lat: 41.939670, long: -87.655167 }; var locations = [ [office.info, office.lat, office.long, 0], [showroom.info, showroom.lat, showroom.long, 1], ]; var map = new google.maps.map(document.getelementbyid('map'), { zoom: 15, center: new google.maps.latlng(26.0020213, -80.2058833), maptypeid: google.maps.maptypeid.roadmap }); var infowindow = new google.maps.infowindow({}); var marker, i; (i = 0; < locations.length; i++) { marker = new google.maps.marker({ position: new google.maps.latlng(locations[i][1], locations[i][2]), map: map }); google.maps.event.addlistener(marker, 'click', (function (marker, i) { return function () { infowindow.setcontent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } }
one fix here:
google.maps.event.adddomlistener(document.getelementbyid('link2'), 'click', function () { map.setcenter(new google.maps.latlng(10.23,123.45)); } });
this function not closed }
missing.
check after update new code.
Comments
Post a Comment