title: How do I merge these two html/javascript files
body: <p>I have this html/javascript file that works fine:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  var geocoder = new google.maps.Geocoder();
  
  function geocodePosition(pos) {
    geocoder.geocode({
      latLng: pos
    }, function(responses) {
      if (responses &amp;&amp; responses.length &gt; 0) {
        updateMarkerAddress(responses[0].formatted_address);
      } else {
        updateMarkerAddress('Cannot determine address at this location.');
      }
    });
  }
  
  function updateMarkerStatus(str) {
    document.getElementById('markerStatus').innerHTML = str;
  }
  
  function updateMarkerPosition(latLng) {
    document.getElementById('info').innerHTML = [
      latLng.lat(),
      latLng.lng()
    ].join(', ');
  }
  
  function updateMarkerAddress(str) {
    document.getElementById('address').innerHTML = str;
  }
  
  function initialize() {
    var latLng = new google.maps.LatLng(40.767367, -111.848007);
    var map = new google.maps.Map(document.getElementById('mapCanvas'), {
      zoom: 8,
      center: latLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
      position: latLng,
      title: 'Point A',
      map: map,
      draggable: true
    });
  
    // Update current position info.
    updateMarkerPosition(latLng);
    geocodePosition(latLng);
  
    // Add dragging event listeners.
    google.maps.event.addListener(marker, 'dragstart', function() {
      updateMarkerAddress('Dragging...');
    });
  
    google.maps.event.addListener(marker, 'drag', function() {
      updateMarkerStatus('Dragging...');
      updateMarkerPosition(marker.getPosition());
    });
  
    google.maps.event.addListener(marker, 'dragend', function() {
      updateMarkerStatus('Drag ended');
      geocodePosition(marker.getPosition());
    });
  }
  
  // Onload handler to fire off the app.
  google.maps.event.addDomListener(window, 'load', initialize);
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;style&gt;
    #mapCanvas {
  
      # width: 1000px;
      width: 102%;
      height: 500px;
      float: left;
      margin-left: -7px;
      margin-right: -10px;
      margin-top: -7px;
      margin-bottom: 10px;
    }
    #infoPanel {
      float: center;
      margin-left: 20px;
    }
    #infoPanel div {
      margin-bottom: 10px;
    }
    &lt;/style&gt;
  
        &lt;font size="3" color="black" face="verdana"&gt;
    &lt;div id="mapCanvas"&gt;&lt;/div&gt;
    &lt;div id="infoPanel"&gt;
      &lt;font size="-10" color="white" face="verdana"&gt;
      &lt;!-- &lt;b&gt;Marker status:&lt;/b&gt; --&gt;
      &lt;div id="markerStatus"&gt;&lt;i&gt;Click and drag the marker.&lt;/i&gt;&lt;/div&gt;
      &lt;font size="3" color="black" face="verdana"&gt;
      &lt;b&gt;Current position:&lt;/b&gt;
      &lt;div id="info"&gt;&lt;/div&gt;
      &lt;b&gt;Closest matching address:&lt;/b&gt;
      &lt;div id="address"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It updates the position of the marker when the user moves it. However, I would also like to make appear on the same map some markers, not movable, that correspond to the position of some elements the user inputs. I am including this html/javacsript code in a larger Python function. I have this other javascript code that does the trick, but it doesn't contain the part with the movable marker. In this case, using PyQt5, the user can add markers passed from Python (with <code>runJavaScript()</code>) the coordinates of new markers to the function <code>addMarker()</code> in the javascript code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /&gt;
  &lt;style type="text/css"&gt;
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 100% }
  &lt;/style&gt;
  &lt;script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  var map;
  function initialize() {
      var latlng = new google.maps.LatLng(40.767367, -111.848007);
      var myOptions = {
                      zoom: 8,
                      center: latlng,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                      };
       map = new google.maps.Map(document.getElementById("map_canvas"),
                                 myOptions);
   }
  
  var goldStar = {
      path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
      fillColor: 'yellow',
      fillOpacity: 0.8,
      scale: 0.1,
      strokeColor: 'gold',
      strokeWeight: 1
    };
  
  function addMarker(lat, lon, city, url) {
      var newmarker = new google.maps.Marker({
          position: new google.maps.LatLng(lat, lon),
          //icon: {path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                 // scale: 5},
          icon: goldStar,
          map: map,
          title: city
      });
  
      newmarker['infowindow'] = new google.maps.InfoWindow({
              content: url
          });
  
      google.maps.event.addListener(newmarker, 'click', function() {
          this['infowindow'].open(map, this);
      });
  }
  
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="initialize();"&gt;
      &lt;div id="map_canvas" style="width:100%; height:100%"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  ''')
  </code></pre>
  
  <p>How can I merge the two files? Basically, how can I have in the same map:</p>
  
  <ol>
  <li>A marker that can be moved around the map by the user</li>
  <li>A bunch of other stable markers that the user inputs through Python (in PyQt5 using <code>runJavaScript()</code>)</li>
  </ol>
  
  <p>I can set the list of stable markers in the html page from the beginning, because it is the user to decide their position.</p>