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
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:
Change the H & W to a fixed value doesn't work either.
<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>
Related
I'm fairly new to coding, and am experimenting on creating my own personal project. I was able to get a simple map up and running.
How would I create just for example all of the breweries in your area. Would I need to access an API and then create a marker for each one? OR just create a search bar within the map and Google "breweries"?
<div id="container">
<div id="googleMap" style="width:100%;height:400px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?
key="KEYHERE"&callback=myMap">
</script>
</div>
function myMap() {
var myCenter = new google.maps.LatLng(39.742043,-104.991531)
var mapCanvas = document.getElementById('googleMap');
var mapOptions = {center: myCenter, zoom: 9};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({content: "Denver" });
infowindow.open(map,marker);
}
If you have websites with examples or examples yourselves to help me out to learn I'd greatly appreciate it. I just don't know how it works. Thanks
i will share link which gives guidelines using this you create API key and just copy in the following script,
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
var uluru = {lat: -104.991531, lng: 39.742043};
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: uluru});
// The marker, positioned at your location
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Follow the following link,
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
I'm building a websites, that occupies the Google Maps JS API, but for some reason, the map stays white, but there's no error in the Google Chrome Console.
HTML code:
<div id="map-container-5" class="z-depth-1" style="height: 200px"></div>
<script src="https://maps.google.com/maps/api/js?key"></script>
JS code:
function myMap() {
var mapProp= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map=new google.maps.Map(document.getElementById("map-container- 5"),mapProp);
}
I'm not really getting the point, why this is not working, as there's no error.
My kind of template was: https://www.w3schools.com/graphics/tryit.asp?filename=trymap_intro
If you want to simply show a map with your coordinates using the googleapi then do as follows. This will show the map with your lat and lng.
CSS:
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
The HTML
<div id="map"></div> /* Place on your page
And this BEFORE the /body tag with YOUR key
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap">
</script>
And the JS script which again is places about the /body
<script>
function initMap() {
// The location of Uluru
var uluru = {lat: 51.5087420, lng: -0.120850};
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 10, center: uluru});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
Your code is correct. You just need to call the myMap() function once it is defined.
Try running the snippet below. (Same as your code with an additional line for calling myMap() function.)
function myMap() {
var mapProp = {
center: new google.maps.LatLng(51.508742, -0.120850),
zoom: 5,
};
var map = new google.maps.Map(document.getElementById("map-container-5"), mapProp);
}
myMap();
<div id="map-container-5" class="z-depth-1" style="height: 200px"></div>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyC7q_f_aMi9o-hoSl3PYSVHRlN99AU3nBg"></script>
The API key you used is W3Schools one! API keys are used for Google to ask for money when your map gets lots of views.
You can get your own API key at https://cloud.google.com/maps-platform/ but you also need to register your credit card (or a fake one).
Note that you don't need an API key if your project is local (not served via HTTP).
(Also you didn't call myMap, so be sure to add myMap() to the end of your code.)
first you have to get your own key for google maps api. then you need to correct the tag like this.Also you have to call your "myMap" function.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=myMap" async defer></script>
you then want to replace "YOUR_API_KEY" in the code with your key.
and "myMap" with your function name which in this case is the same (myMap)
In your style try using a valid height and width, and be sure the div is visible at startup
<div id="map-container-5" class="z-depth-1" style="height: 200px; width:200px;"></div>
And try remove the last comma in mapProp
var mapProp= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5
};
Is not cleat how invoke the function myMap().. so try also using the code directly in
<script>
var mapProp= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5
};
var map=new google.maps.Map(document.getElementById("map-container- 5"), mapProp);
</script>
and check in your javascript console .. for error
I am trying to implement Google maps with a specified location on an website. Trying it for the first time, got the code from google dev and it doesn't work how it should, let me explain:
It works sometimes( when I load the page sometimes, or click in and out of other links, but not constantly) and no error on the log. I haven't noticed a pattern so that's why I am posting here. Really appreciate you reading this and giving your input!
First the HTML:
<h2>My Google Maps Demo</h2>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwCEHnAjByWbixBh7zEm0VT712Cmlc(not the real key)callback=initMap">
</script>
<script src="javascript/scripts.js"></script>
Second the JS:
function initMap() {
var uluru = {lat: 46.77889, lng: 23.58624};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
I'm trying to integrate Google Maps Javascript API in my wordpress website.
I created an API key, and I added a pure html code block in my page.
Before it worked perfectly, but now it only show a grey piece. When I zoom out and drag the map around, the following picture is visible:
This is my code in the html block:
<div id="googlemaps"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('googlemaps'), {
center: {lat: 51.341667, lng: 4.21444},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap"
async defer></script>
And YES, I replaced YOUR-API-KEY with my API key in my code (this is just so others won't use the generated code).
I don't know what is wrong with the map. I do not have errors in my webconsole.
Thanks in advance!
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('googlemaps'), {
center: {lat: 51.341667, lng: 4.21444},
zoom: 8,
backgroundColor: '#fffff',
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap"
async defer></script
<div id="googlemaps"></div>
Use backgroundColor property
Call google.maps.event.trigger(map, 'resize') inside initMap() as you have resized the map div.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('googlemaps'), {
center: {lat: 51.341667, lng: 4.21444},
zoom: 8
});
google.maps.event.trigger(map, 'resize')
}
This question has been asked a couple of times, but no response has worked for me. I tried to add width and height to container div
<div style="height:900px;width:1024px;">
Mapa
<div id="map" class="map"></div>
</div>
Tried either to add the domListener Event to google maps object or just using jquery document.ready function
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() { initialize(); });
I created this Jsfiddle to show my point, I know that I am missing the API key but this doesn't seems to be the problem.
I don't know what I am missing here. Any ideas?
I know that I am missing the api key
Snippet with code Below
function initialize(){
$(".map").each(function(){
var centerLat = 52.5230809;
var centerLong = 13.3999976;
console.log(centerLat);
console.log(centerLong);
var centerLatLong = new google.maps.LatLng(centerLat, centerLong);
var mapOptions = {
center: { lat: parseFloat(centerLat), lng: parseFloat(centerLong)},
zoom: 8,
scrollwheel: false,
draggable:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
console.log(map);
var marker = new google.maps.Marker({
position: centerLatLong,
map: map
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() { initialize(); });
<div style="height:900px;width:1024px;">
Mapa
<div id="map" class="map"></div>
</div>
You should add css to map div.
<div style="height:900px;width:1024px;">
Mapa
<div style="height:900px;width:1024px;" id="map" class="map"></div>
</div>
As #egvrcn 's answer. But why are you using .each() ? You want to use multiple maps ?
Yes ?
function initialize() {
$(".map").each(function () {
var $this = $(this);
// ...
var map = new google.maps.Map($this[0], mapOptions);
// ...
});
}
No ?, so do just...
function initialize() {
// ...
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// ...
}