javascript - Center map using multiple markers and google maps api -
currently have map drawn 2 markers using js below, when map loads not center correctly when markers on specific locations... sure simple error cannot spot it
[var marker1, marker2; var poly, geodesicpoly; function initmap() { var map = new google.maps.map(document.getelementbyid('map'), { zoom: 4, center: {lat: 34, lng: -40.605} }); map.controls\[google.maps.controlposition.top_center\].push( document.getelementbyid('info')); marker1 = new google.maps.marker({ map: map, draggable: true, position: {lat: <?php echo $lat1; ?>, lng: <?php echo $long1; ?>} }); marker2 = new google.maps.marker({ map: map, draggable: true, position: {lat: <?php echo $lat2; ?>, lng: <?php echo $long2; ?>} }); var bounds = new google.maps.latlngbounds( marker1.getposition(), marker2.getposition()); map.fitbounds(bounds); google.maps.event.addlistener(marker1, 'position_changed', update); google.maps.event.addlistener(marker2, 'position_changed', update); poly = new google.maps.polyline({ strokecolor: '#ff0000', strokeopacity: 1.0, strokeweight: 3, map: map, }); /*geodesicpoly = new google.maps.polyline({ strokecolor: '#cc0099', strokeopacity: 1.0, strokeweight: 3, geodesic: true, map: map });*/ update(); } function update() { var path = \[marker1.getposition(), marker2.getposition()\]; poly.setpath(path); geodesicpoly.setpath(path); var heading = google.maps.geometry.spherical.computeheading(path\[0\], path\[1\]); document.getelementbyid('heading').value = heading; document.getelementbyid('origin').value = path\[0\].tostring(); document.getelementbyid('destination').value = path\[1\].tostring()https://stackoverflow.com/editing-help; }]
the google.maps.latlngbounds constructor takes 2 google.maps.latlng objects in specific order: southwest, northeast corners.
latlngbounds(sw?:latlng|latlngliteral, ne?:latlng|latlngliteral)
constructs rectangle points @ south-west , north-east corners.
so not correct (unless markers happen in correct relation each other):
var bounds = new google.maps.latlngbounds( marker1.getposition(), marker2.getposition()); map.fitbounds(bounds); if want add 2 arbitrary positions google.maps.latlngbounds, create empty bounds, extend 2 positions:
var bounds = new google.maps.latlngbounds(); bounds.extend(marker1.getposition()); bounds.extend(marker2.getposition()) map.fitbounds(bounds); code snippet:
var marker1, marker2; var poly, geodesicpoly; function initmap() { var map = new google.maps.map(document.getelementbyid('map'), { zoom: 4, center: { lat: 34, lng: -40.605 } }); map.controls[google.maps.controlposition.top_center].push( document.getelementbyid('info')); marker1 = new google.maps.marker({ map: map, draggable: true, position: { lat: 40.7127837, lng: -74.0059413 } }); marker2 = new google.maps.marker({ map: map, draggable: true, position: { lat: 40.735657, lng: -74.1723667 } }); var bounds = new google.maps.latlngbounds(); bounds.extend(marker1.getposition()); bounds.extend(marker2.getposition()) map.fitbounds(bounds); google.maps.event.addlistener(marker1, 'position_changed', update); google.maps.event.addlistener(marker2, 'position_changed', update); poly = new google.maps.polyline({ strokecolor: '#ff0000', strokeopacity: 1.0, strokeweight: 3, map: map, }); update(); } function update() { var path = [marker1.getposition(), marker2.getposition()]; poly.setpath(path); var heading = google.maps.geometry.spherical.computeheading(path[0], path[1]); document.getelementbyid('heading').value = heading; document.getelementbyid('origin').value = path[0].tostring(); document.getelementbyid('destination').value = path[1].tostring(); } google.maps.event.adddomlistener(window, "load", initmap);html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> <input id="heading" /> <input id="origin" /> <input id="destination" /> <div id="map"></div>
Comments
Post a Comment