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
Related
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>
So, I'm a little confused. I tried calling a google map with the api and tutorial provided here:
https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
But I seem to be unable to get it to work correctly, and my map div always ends up being a grey box.
Here's the html and js that I used. Please let me know if there is some sort of glaring error, or if I should be using another api...
<div id="map_canvas"></div>
...
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById("map_canvas");
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas);
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
my css is set to have the height and width be 300px and 500px respectively... if that matters to you personally.
I think your code doesn't use the options. I'm not sure that's THE problem, but that's A problem:
try:
var map = new google.maps.Map(map_canvas, mapOptions);
If you are looking for your map to appear, start with this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map_canvas" style="width:300;height:500">
<script>
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapOpts = { mapTypeId: google.maps.MapTypeId.TERRAIN, zoom: 2, center: new google.maps.LatLng(20, 0) };
var map_canvas = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
</script>
</div>
</body>
</html>
I think the main problem is the mapOptions is not included when the map is initialized.
it's supposed to be like this:
var map = new google.maps.Map(map_canvas, mapOptions);
~ try to read again the tutorial provided, it's defined that the 'center', 'zoom level', and 'map type' are required options.
Options for the map, such as the center, zoom level, and the map type.
There are many more options that can be set, but these three are required.
I am work in ZK and now I am need use the Google API maps. I have used this API in other framework sometimes.
I don't show the maps.
Firstly I thought the problem may be the css, but it isn't.
I added a initialize (maps) function to a event onLoad of windows but I had still the same problem. I debug the code in the browser with the js console and I seen that the window event load isn't available so I called the function initialize from the event load from the div (which contents the maps), again the js console showed the same message.
I use a directive
<div id="map_canvas" style="width: 320px; height: 480px;" xmlns:w="http://www.zkoss.org/2005/zk/client" w:onClick="initialize()"></div>
But the div wasn't shown.
Finally I used a pure html element, using the html tag of ZK:
<html><![CDATA[
<div id="map_canvas" onload="initialize()" style="width: 320px; height: 480px;"/>
]]></html>
but the result in the js console is again
<div class="noscript"><p>Sorry, JavaScript must be enabled.<br/>Change your browser options, then try again.</p></div>
I'd like know way the function which shows the maps don't do it. I think the problem is the js but I am not sure, do anybody tell me if the problem is the js called please?
Thanks.
Edit:
I have used this way to do it (Thank you very much to Sean Connolly: How get the zk element id from js)
<zk>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false">
</script>
<script type="text/javascript">
var map;
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(zk.Widget.$(jq('$map_canvas2')).$n(), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas2" style="width: 1320px; height: 1480px;" />
I think you want something like this:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode({'address': address},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
alert(results[0].geometry.location.latlng[0]);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
initialize();
</script>
<div id="map_canvas" style="width: 320px; height: 480px;" onClick="initialize()"></div>
Good afternoon,
I am developping a javaFX application and now I want to include on it a map using google maps
I have successfully dispaly the map on javaFX using this code on a html file
<!DOCTYPE html>
<html>
<head>
<title>Java-Buddy: Google Maps</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>#mapcanvas { height: 360px; width: 100%}</style>
</head>
<body>
<h1>Java-Buddy: Google Maps</h1>
<div id="mapcanvas">
<script type="text/javascript">
var latlng = new google.maps.LatLng(35.857908, 10.598997);
var Options = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), Options);
//var carMarkerImage = new google.maps.MarkerImage('resources/images/car.png');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.857908, 10.598997),
map: map,
draggable: false,
//icon: carMarkerImage,
title: "",
autoPan: true
});
</script>
</div>
</body>
</html>
I want to set the postition of the map using the controller class
I can do it with this event code
public void handle(ActionEvent actionEvent) {
webEngine.executeScript("document.myFunction(longitude, latitude)");}
I am new on javascript, and I want to know how to write the javascript function that allow me to set or to change the current position on the map
Thank you
function myFunction(longitude, latitude){
map.setCenter(new google.maps.LatLng(latitude, longitude));
}
Hey guys hoping for a little help here.
First I created a working map here: http://leongaban.com/_stack/googlemaps/firstmap.html
Pointer is shown on the spot, however I needed to remove the Map | Satellite | Terrain buttons.
Digging a bit deeper I found an example here disablingDefaults. However I could not get the map to work using my google.map.js file and my API key. So I just used the script from Google's example page.
Now my 2nd map I have the Map view options removed, but cannot get an overlay to show up :(
http://leongaban.com/_stack/googlemaps/
Please Help!
Goals:
Use my Google maps API key
Remove the Map view option buttons
Put overlay pointer on the location.
Code for my first map with my google API 2 key:
<head>
<title>Test Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyAXsNu2EwRNqKJn9OmC19WPkEJFM0r6ALk&sensor=true"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
// var myOptions = {
// zoom: 16,
// center: new google.maps.LatLng(40.750159, -73.976473),
// disableDefaultUI: true,
// mapTypeId: google.maps.MapTypeId.ROADMAP
// }
// var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// var point = new GLatLng(40.750159, -73.976473);
// map.addOverlay(new GMarker(point));
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(40.750159, -73.976473), 13);
map.setUIToDefault();
var myGeographicCoordinates = new GLatLng(40.750159, -73.976473)
map.addOverlay(new GMarker(myGeographicCoordinates));
// map.addOverlay(new GMarker(40.750159, -73.976473));
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 450px; height: 370px"></div>
</body>
UPDATED
WORKING CODE! THANKS STACKERS!!!
<head>
<title>Test Google Maps</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(40.750159, -73.976473),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myGeographicCoordinates = new google.maps.LatLng(40.750159, -73.976473);
var marker = new google.maps.Marker({
map: map,
position: myGeographicCoordinates,
title: "My First Test Marker",
visible: true
});
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 450px; height: 370px"></div>
</body>
There's a problem with how you define your latLng objects.
new GLatLng(40.750159, -73.976473);
That was used with Google Maps Api v2. Now you're using the latest api(v3), and in new api, this is how you should do it:
new google.maps.LatLng(40.750159, -73.976473);
EDIT: After your edit, i see there are some problems with the marker. In API v3 this is how you make a new marker:
var marker = new google.maps.Marker({
map: map,
position: latLng
});
Following code sets a map, disables default UI, sets a marker and put it on the map;
function initialize() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(40.750159, -73.976473),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myGeographicCoordinates = new GLatLng(40.750159, -73.976473);
var marker = new google.maps.Marker({
map: map,
position: myGeographicCoordinates
});
}
Now that you have moved to the v3 API, you want to change your marker creation code from:
map.addOverlay(new GMarker(myGeographicCoordinates));
to:
var marker = new google.maps.Marker({
map: map,
position: myGeographicCoordinates,
title: "My First Test Marker",
visible: true
});
If you want, you may also define a custom marker icon in the MarkerOptions that are passed to the marker constructor function and set the value equal to the path and name of an image file:
var marker = new google.maps.Marker({
map: map,
icon: "images/my-nice-marker.png",
position: myGeographicCoordinates,
title: "My First Test Marker",
visible: true
});