CODEWITHSUNDEEP
javascriptgoogle-mapsodooodoo-10
Pelingier
Pelingier

Reputation: 133

Google maps in odoo backend

I would like to show a google map in my Odoo contact page. I already installed a function that gets the Lat and Long but then i would like to show them in a map.

So far i was able to show the google map with the following code. But I have 2 problems 1. the map is only visible after resizing my page manually enter image description here enter image description here

  1. I don't know how to get die values from the odoo fields above.

Hope anyone can help! Thx

 <div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {

var lat= 51;
var long= 2;

var mapProp= {
    center:new google.maps.LatLng(lat,long),
    zoom:10,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
google.maps.event.trigger(map, 'resize');

}</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=MY-KEY&callback=myMap"></script>

Thx for the answer but if I use your code i get the following error: enter image description here

Change the H & W to a fixed value doesn't work either.

Upvotes: 0

Views: 1544

Answers (1)

Rafiqul Islam
Rafiqul Islam

Reputation: 1646

   
 
    <h3>My Google Maps </h3>
    
    <div id="googleMap" style="width:100%;height:400px;"></div>
    <script>
      var lat= 50.50389;
      var long= 4.4699451;
      
      function myMap() {        
        var uluru = {lat: lat, lng: long};
        var map = new google.maps.Map(document.getElementById('googleMap'), {
          zoom: 10,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFFqySePr9frroT5m96cNa2JcJLLCf7f0&callback=myMap">
    </script>

Upvotes: 1

Related Questions