champion_bake champion_bake - 10 days ago 7
HTML Question

Can't get js function to load in html

I've just started trying to develop a website and I'd like to keep the html and javascript separate if I can. I'm trying to put a marker on a map, have the co-ordinates placed in a text box as part of a form, and have them sent to the database when the user submits the form. The code works when it's all inside the html doc, but when I try to separate it it doesnt work. Well, the map still shows up and I can set a marker on it, but it doesn't capture the co-ordinates.

In the head of the html

<script type="text/javascript" src="mapSubmitSighting.js"></script>
<body onload="initMap()">


Inside the div where I want the js to execute

<div id="map">
<div class="map" onclick="initMap();">
<script defer
src="https://maps.googleapis.com/maps/api/js?key==initMap"></script>
</div>


The js file

!function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 54.621277, lng: -6.692649 }
});
google.maps.event.trigger(map, "resize");
map.addListener('click', function(e) {
placeMarkerAndPanTo(e.latLng, map);

});
}

!function placeMarkerAndPanTo(latLng, map) {
var marker = new google.maps.Marker({
position: latLng,
map: map

});
map.panTo(latLng);
document.getElementById("lat").value = latLng.lat();
document.getElementById("lng").value = latLng.lng();

}


I know there's lots wrong with this but if I could just work out how to get the javascript to work it'd be a start. Thank you!

Answer

Most part of your code actually works. Did a few modification though. Added initial marker position as I noticed that you intended to do this on your sample code. Also, refactored your code so needed routines will be re-usable.

Please check below.

HTML

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 400px;
        width: 50%;
       }
    </style>
    <script src="mapSubmitSighting.js"></script>
  </head>
  <body>    
    <div id="map"></div>    
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD72DV80rL8PBw2BTTWOwHV3NPSQdx24D8&callback=initMap"></script>

    <br/>
    <div>
      Latitude: <input type="text" id="lat"/><br/><br/>
      Longitude: <input type="text" id="lng"/>
    </div>
  </body>
</html>

JS

function initMap() {
  var initialLocation = {lat: 54.621277, lng: -6.692649 };

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: initialLocation
  });

  var marker = setMarker(initialLocation, map);
  setTextCoordinates(initialLocation.lat, initialLocation.lng);

  google.maps.event.trigger(map, "resize");
  map.addListener('click', function(e) {
    placeMarkerAndPanTo(e.latLng, map);
  });
}

function placeMarkerAndPanTo(latLng, map) {
  var marker = setMarker(latLng, map);

  map.panTo(latLng);

  setTextCoordinates(latLng.lat(), latLng.lng());
}

function setMarker(latLng, map){
  var marker = new google.maps.Marker({
    position: latLng,
    map: map
  });

  return marker;
}

function setTextCoordinates(lat, lng){
  document.getElementById("lat").value = lat;
  document.getElementById("lng").value = lng;
}

Output

enter image description here

Hope this helps!