Framework7 problems with me

please how can i use external javascript with framework7 pages

Usually in same way as always, how did you do that?

i wrote my external JavaScript for geolocation with map i am using codova plugins and i reference it in my framework7 page and i have getelementby ID that is calling from html, but it is not working when i put the id inside my framework7 pages

Better show code examples

okkk i will show the code example

my javascript code

    <script src=""></script>
      function writeAddressName(latLng) {
        var geocoder = new google.maps.Geocoder();
          "location": latLng
        function(results, status) {
          if (status == google.maps.GeocoderStatus.OK)
            document.getElementById("address").innerHTML = results[0].formatted_address;
            document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br />";

      function geolocationSuccess(position) {
        var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        // Write the formatted address

        var myOptions = {
          zoom : 16,
          center : userLatLng,
          mapTypeId : google.maps.MapTypeId.ROADMAP
        // Draw the map
        var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
        // Place the marker
        new google.maps.Marker({
          map: mapObject,
          position: userLatLng
        // Draw a circle around the user position to have an idea of the current localization accuracy
        var circle = new google.maps.Circle({
          center: userLatLng,
          radius: position.coords.accuracy,
          map: mapObject,
          fillColor: '#0000FF',
          fillOpacity: 0.5,
          strokeColor: '#0000FF',
          strokeOpacity: 1.0

      function geolocationError(positionError) {
        document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br />";

      function geolocateUser() {
        // If the browser supports the Geolocation API
        if (navigator.geolocation)
          var positionOptions = {
            enableHighAccuracy: true,
            timeout: 10 * 1000 // 10 seconds
          navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
          document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";

      window.onload = geolocateUser;
    <style type="text/css">
      #map {
        width: 500px;
        height: 500px;

this is the html id that will call my javascript in framework7 but i put it inside is not showing at all but it is working on ordinary html pages

<div id="map"></div>
    <p><b>Address</b>: <span id="address"></span></p>
    <p id="error"></p>
<div id="map"></div>
    <p><b>Address </b>: <span id="address"></span></p>
    <p id="error"></p>

Still not clear what exactly not work and where do you exactly put it?

I suspect that document.getElementById("address") is not visible but without more information it is very difficult to “address” (<- no joke) the cause.

1 Like

but i think my template is bilt on framework7 v1. i think

please is there any template built on framework7 version 2 not 1 please i need it if i need to buy i will it i dont want the version 1

1 Like