Google Maps example

Questions
1

I like to add google maps in my project. Can somebody write a simple component example on how to add a google maps field in your app?

2

You need to use this cordova plugin for native google maps, lest if you include the scripts, and the user’s internet connection is down, the app will hand and produce stupid errors like the cordova Application Asset Not Found Errors which definitely is very bad! The best alternative I have used myself and works seamlessly is Leaflet… it has small scripts you can download and include in your app. Very easy to get started… It will only require internet when you want to load them as it loads tilelayers from mapbox… Google search about that, Framework7 has nothing to do with which maps you must use… It gives you freedom to do what you want, however you want…,

Sample:

<template>
 <div class="page">
  <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="title">Map</div>
    </div>
  </div>
  <div class="page-content">
    <div id="map"></div>
  </div>
</div> 
</template>
<script>
  return {
      data: function () {
       return {
        data: somedata,
      }
    },
    
    on: {
      pageInit: function(e, page) {

        var self = this;
        var app = self.$app

        var map = L.map('map').fitWorld(); 
        L.tileLayer('https://api.mapbox.com/styles/v1/maxxo/cjnq7a3nl0h842rt71w6s65s1/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
            maxZoom: 18,
            accessToken: 'some-token',
        }).addTo(map);

        map.locate({setView: true, maxZoom: 13});

        function onLocationFound(e) {
            var radius = e.accuracy / 2;
                   L.circle(e.latlng, radius).addTo(map); //My Circle
                  //more logic
        }

      map.on('locationfound', onLocationFound);
      map.on('locationerror', onLocationError);

      function onLocationError(e) {
          //something..
      }
      },
    }
  }
</script>

Simple, include your leaflet.js and leaflet.css (recomended: download) and your good. Open a Mapbox account please. Google a bit…

3

Hello @Max . I am using thsi example as it it but the maps are not displaying. I am not getting any errors on my debugging console too.

Whats missing?

4

I could not find this problem in issues: https://github.com/mapsplugin/cordova-plugin-googlemaps/issues Please, give a link.

Try to use web Google Maps.

5

I think use 127.0.0.1 not localhost