I want to show a Google Map, I have this code which does no work:
<div id="map" style="width: 300px; height: 240px;">Loading map, please wait...</div>
...
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MY_KEY_is_setup_correctly"></script>
<script type="text/javascript">
function initialize(){
var map_container = document.getElementById('map');
var settings = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(-18.893384076844953, -48.25330985812758),
};
var map = google.maps.Map(map_container, settings);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
When I refresh my page I see no map and JavaScript console throws me this message:
GET http://csi.gstatic.com/csi?v=2&s=mapsapi3&action=apiboot2&rt=main.102 [HTTP/1.1 204 No Content 428ms]
Why my code fails?
You need to create a new instance of the Map class.
Instead of:
var map = google.maps.Map(map_container, settings);
Write:
var map = new google.maps.Map(map_container, settings);
You have a typo in your code, you are missing new before the google.maps.Map constructor. Your code should be:
function initialize() {
var map_container = document.getElementById('map');
var settings = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(-18.893384076844953, -48.25330985812758)
};
// add "new" before google.maps.Map constructor
var map = new google.maps.Map(map_container, settings);
}
google.maps.event.addDomListener(window, 'load', initialize);
working fiddle
code snippet:
function initialize() {
var map_container = document.getElementById('map');
var settings = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(-18.893384076844953, -48.25330985812758)
};
var map = new google.maps.Map(map_container, settings);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="width: 300px; height: 240px;">Loading map, please wait...</div>
Related
I have two KML layers that load onto a map once clicked:
<button id="button2" onclick="myFunctiongr(); loadKmlLayer(); initialize()">Submit</button>
<script>
src = "https://github.com/YourCity/hello-world/blob/readme-edits/"+name+".kmz?raw=true"}
srca = " https://www.dropbox.com/s/5g0tytd1ur7my67/v7.kmz?dl=1"
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(51.50275896, -0.11535645),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
loadKmlLayer(src, map);
loadKmlLayera(srca, map);
}
This code works and loads both layers onto the map, however I would like the loadKmlLayer(src, map) to load first but it does not. Strangely if I refresh the page and try again it does! I cannot figure out why and how to make it load on top the first time.
The srca layer is larger than the src layer so I was thinking the size may be influencing it. Any help would be good!
(The 'LoadkmlLayer' & 'LoadkmlLayera' are functions defined elsewhere in my code. )
Use zIndex. The layer with the lowest value of zIndex goes on the bottom, the layer with the largest value goes on the top.
code snippet:
var name = "bcg";
var src = "https://github.com/YourCity/hello-world/blob/readme-edits/" + name + ".kmz?raw=true"
var srca = "https://www.dropbox.com/s/5g0tytd1ur7my67/v7.kmz?dl=1"
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(51.50275896, -0.11535645),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
loadKmlLayer(src, map, 1);
loadKmlLayer(srca, map, 0);
}
google.maps.event.addDomListener(window, "load", initialize);
function loadKmlLayer(src, map, zIndex) {
var ctaLayer = new google.maps.KmlLayer({
url: src,
zIndex: zIndex,
map: map
});
google.maps.event.addListener(ctaLayer, 'status_changed', function() {
document.getElementById('status').innerHTML += "src=" + src + " status=" + ctaLayer.getStatus() + "<br>";
})
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<button id="button2" onclick="myFunctiongr(); loadKmlLayer(); initialize()">Submit</button>
<div id="status"></div>
<div id="map"></div>
I'm using google maps in my website. But I have a problem -- the maps takes the X and Y from the database and the maps show without any sign in the place like this
I want to add a sign or arrow in the maps like this
How do I do this?
The code Is
< script >
function initialize() {
var mapProp = {
center: new google.maps.LatLng('.$rows['
X '].', '.$rows['
Y '].'),
zoom: 10,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, "load", initialize);
< /script>
To add a marker, see the example in the documentation
code snippet:
function initialize() {
var mapProp = {
center: new google.maps.LatLng(34.683902942879214, -1.8800277035522868),
zoom: 11,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#googleMap {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>
As per my question, I want to add an initial marker for the map, but it only shows me the marker when I enter address on load. If I want to show a marker like for longitude 41.008238 and latitude 28.978359, how can I make this possible? And sorry for my bad English.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
function initialize() {
center: new google.maps.LatLng(41.008238, 28.978359),
zoom: 13
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')), {types: ['geocode']});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
var newPos = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());
map.setOptions({
center: newPos,
zoom: 15
});
var marker = new google.maps.Marker({
position: newPos,
map: map,
title:"market title"
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas">Loading map...</div>
<style>
#map {
/* float:right;*/
width: 100%;
height: 400px;
border: 1px solid #DDD;
}
#map-canvas {
width: 100%;
height: 350px;
}
</style>
add the following
var marker = new google.maps.Marker({
position: new google.maps.LatLng(41.008238, 28.978359),
map: map,
title: 'market title'
});
below
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var mapOptions = {
center: { lat: latitude, lng: longitude},
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListenerOnce(map, 'idle', function(){
//lat0 = map.getBounds().getNorthEast().lat();
//lng0 = map.getBounds().getNorthEast().lng();
//lat1 = map.getBounds().getSouthWest().lat();
//lng1 = map.getBounds().getSouthWest().lng();
get_markers();
});
function get_markers(){
marker = new google.maps.Marker({
position: new google.maps.LatLng(latit, longit,
map: map
});
}
I have written code to display a marker on a googlemap. The code is copied almost verbatim, from the Google API docs. Yet the marker is not displaying on the page.
Here is my code: What am I doing wrong?
var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
var infowindow = new google.maps.InfoWindow({
content: '<div>Hello</div>'
});
var marker = new google.maps.Marker({
position: central_location,
map: map,
title: 'This is the title'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
marker.setMap(map);
});
#map {
width: 500px;
height: 380px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
I notice that there are similar questions, the only thing that seems to be different with my question is that I am creating my marker in the jQuery ready() event - NOT the initialize() function.
Is this why the marker is not been displayed?
Note: I don't remember reading anything in the Google API docs that states that markers should be created when the map is being created, so that can't obviously be the case
Move your marker creation to the initialize function.
$(document).ready(function(){}) works when DOM elements are loaded, which doesn't necessarily mean that the map is loaded. So if you try to create the marker in the document ready function, the map might not be created then, once the map is ready map variable has the map object, so you can make the marker on that, and you can add the markers dynamically after the map is loaded.
var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);
function initialize() {
console.log('map loaded');
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
makePin(42.745334, 12.738430);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function(){
console.log('document loaded');
})
function makePin(lat, long){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
map: map,
title: 'This is the title'
});
var infowindow = new google.maps.InfoWindow({
content: '<div>Hello</div>'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
#map {
width: 500px;
height: 380px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<button onclick="makePin(42.749334, 12.739430)">Add Pin</button>
<div id="map"></div>
How can you make marker without loaded map. Map need to initialize first then marker will work
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: central_location,
map: map,
title: 'This is the title'
});
marker.addListener('click', function () {
infowindow.open(map, marker);
});
marker.setMap(map);
}
Here is the solution:
var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: central_location,
map: map,
title: 'This is the title'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
var infowindow = new google.maps.InfoWindow({
content: '<div>Hello</div>'
});
});
#map {
width: 500px;
height: 380px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
I have the following code:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="row">
<div class="col-md-6" id="googleMap" style="height:500px;"></div>
</div>
<script>
function initialize() {
var mapProp = {
center: new google.maps.LatLng(44.6656, -83.5753),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap")
,mapProp);
var marker = new google.maps.Marker({
position: mapProp,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
The map displays fine but I can't add the marker. I get the following error:
setPosition: not a LatLng or LatLngLiteral: in property lat: not a number
I don't see how the latitude and longitude could be invalid because the resulting generated map shows the correct location. But no marker.
The marker's position property should be of the type LatLng:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="row">
<div class="col-md-6" id="googleMap" style="height:500px;"></div>
</div>
<script>
function initialize() {
var cord = new google.maps.LatLng(41.6656, -83.5753);
var mapProp = {
center: cord,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap")
,mapProp);
var marker = new google.maps.Marker({
position: cord,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
http://jsfiddle.net/5am3V/