Trying to attach map from tutorial "https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map#the_basic_html_page", into simple page, but getting error "Object # has no method 'setValues" in browser console. My code is exact the same as in tutorial, only id is different.
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script>
function Initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(49.8103, 23.8584),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = google.maps.Map(mapCanvas, mapOptions);
}
google.maps.event.addDomListener(window, 'load', Initialize);
</script>
<div id="map-canvas"></div>
Can somebody help me to figure out, why this isn't working for me?
Thanks in advance.
You forgot new:
var map = new google.maps.Map(mapCanvas, mapOptions);
It isn't a copy of the code in that tutorial. Your removed the "new" before the google.maps.Map constructor.
var map = google.maps.Map(mapCanvas, mapOptions);
In the tutorial is:
var map = new google.maps.Map(map_canvas, map_options);
Related
I use a google map with javaScript and my code is :
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-12.043333,-77.028333);
var myOptions = {
zoom: 17,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
google.maps.event.addListener(map, "mousedown", function (e) {
//lat and lng is available in e object
var latLng = e.latLng;
console.log(latLng);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>`
The result of e.latLng is an empty object.
I tried to click the event, but the result is empty.
What should I do or change?
Your code is working fine :
Click on map and your coordinates will come in alert
Please check here
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);
// ...
}
I am trying to add a marker to a map in Google maps using JavaScript. The console on from Google Chrome is returning "Uncaught TypeError: undefined is not a function". The error appears right after the map = new google.maps.Map. However if I take out the Marker code the map appears and there are no errors.
The code I am using is
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCs7h9k3_PHQpo8EBDf-GaVhf178Z3xSb4&sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(35.6017, -77.3725)
};
map = new google.maps.Map(document.getElementById('gmap'),
mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.Latlng(36, -77),
map: map,
title: 'Test'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
position: new google.maps.Latlng(36, -77),
to
position: new google.maps.LatLng(36, -77),
My map is missing the pin drop, I tried figuring out the api page but i cant seem to get the pin on my google map. here is my code so far. If anyone has any ideas on how to get that pin on there I would appreciate it.
<!-- GOOGLE MAPS -->
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(33.6676314, -117.6598071),
zoom: 14,
scrollwheel: false ,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>
That code is creating a map centered on lat 33.6676314, lng -117.6598071 and I'm pretty sure the map is showing fine. You haven't yet created any markers, so go on and make one. The code to achieve that, in its most basic form is
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(33.6676314, -117.6598071),
zoom: 14,
scrollwheel: false ,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
var newmarker= new google.maps.Marker({
position: new google.maps.LatLng(33.6676314, -117.6598071),
map: map
});
}
please note that the map property of a marker should point to whatever variable you named your map to. For example:
var AwesomeMap = new google.maps.Map(map_canvas, map_options);
var newmarker= new google.maps.Marker({
position: new google.maps.LatLng(33.6676314, -117.6598071),
map: AwesomeMap
});
Position can be any valid LatLng object or LatLng literal. The following, for example, is valid too
var newmarker= new google.maps.Marker({
position: {lat:33.6676314, lng:-117.6598071},
map: AwesomeMap
});
Check this out
http://www.x2tutorials.com/tutorials/google-maps-v3/using-map-markers.php
If this is not what you are trying to achieve, please elaborate on the problem you are facing
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.