According to the API ref, the map object should have a getProjection
method:
http://code.google.com/apis/maps/documentation/v3/reference.html#Map
While loading the map in this example
should alert the x,y point, but instead
throws the value as undefined. This is the below sample code called in onload.
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
alert("projection:" + map.getProjection());
}
It isn't available until the map is finished initializing. You have to wait on the "projection_changed" event before accessing it.
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListenerOnce(map,"projection_changed", function() {
alert("projection:"+map.getProjection());
});
}
proof of concept fiddle
code snippet:
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListenerOnce(map, "projection_changed", function() {
console.log("projection:" + map.getProjection());
document.getElementById('output').innerHTML = "map.getProjection()=" + JSON.stringify(map.getProjection(), null, ' ');
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map-canvas {
height: 80%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="output"></div>
<div id="map-canvas"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=&v=weekly" async></script>
</body>
</html>
Related
I've a problem with my custom google map. It doesn't show street names .
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(42.753633, 13.952404),
zoom: 10,
mapTypeId: google.maps.MapTypeId.SATELLITE,
scrollwheel: true
}
var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://128.199.209.42/klinkfiles/mlmsurvey.kmz'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
<body onload="initialize()">
<div id="google-map" class="google-map"></div>
If you want the street names on the map tiles, don't request the SATELLITE map type, you want HYBRID.
var mapOptions = {
center: new google.maps.LatLng(42.753633, 13.952404),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID,
scrollwheel: true
}
code snippet:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(42.753633, 13.952404),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID,
scrollwheel: true
}
var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://128.199.209.42/klinkfiles/mlmsurvey.kmz'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#google-map {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="google-map"></div>
I have the following code:
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: new google.maps.LatLng(53.529773,-113.509387),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
How can I replace:
center: new google.maps.LatLng(53.529773,-113.509387)
with my current location, programatically
Your code looks correct, I suspect that your issue is that your device does not have location services enabled, if it does you may not have accept the security prompt when it runs the first time.
This following demo I modified from the google maps API reference
https://developers.google.com/maps/documentation/javascript/
HTML Demo
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
CSS
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
JS
function initMap() {
// Pick a start point, I live in Australia, so just picked the middle of OZ
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
// Mark it on the map, this is the original center
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
// If location services is enabled, the following should center the map on your location.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(location);
});
}
}
Trying to do a simple position marker on a Google map imbed. Everything looks right, but not working.
<link rel="stylesheet" type="text/css" href="default.css"/>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(40.0501322,-82.914233),
zoom: 13,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.0496714,-82.9121331),
map: map
});
</script></head>
The map is loading fine, but no marker is found.
You need to create the marker inside the initialize function (where the map variable exists).
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(40.0501322, -82.914233),
zoom: 13,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.0496714, -82.9121331),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
Yes, you need to initialize the marker object inside the initialize() method of the code. One way is how geocodezip has demoed. Here is one more way if you want to write modular code.
<script type="text/javascript">
// Standard google maps function
function initialize() {
var myLatlng = new google.maps.LatLng(40.0501322, -82.914233);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
TestMarker();
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
function TestMarker() {
GoldenGatePark = new google.maps.LatLng(37.7699298, -122.4469157);
addMarker(GoldenGatePark);
}
</script>
Here you have added a marker in the TestMarker function and the TestMarker function is called in the initialize() method. You can just change the values of LatLng in the TestMarker function code.
I need to know about to show google maps in Meteor.I did one sample as shown below.
Html code :
<head>
<title>Maps</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
</head>
<body>
{{> maps }}
</body>
<template name="maps">
<div id="map-canvas"></div>
</template>
Js Code :
if (Meteor.isClient)
{
Template.maps.rendered = function() {
console.log("*** Map Start ********")
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
console.log("*** Map end ********")
//return map;
}
}//End is Meteor
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
The problem is not showing map when i am run my code.I didn't any idea about this.So please suggest me what to do for this?.
Lets put the map on a initialize function like this.
initMap = function(){
console.log("*** Map Start ********")
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
console.log("*** Map end ********")
}
//return map;
Now on the rendered function.
Template.maps.rendered = function(){
Meteor.setTimeout(function(){
initMapa();
},2500)
}
Also make sure you have the .css file like this.
#map-canvas {
width: 100%;
height: 300px;
}
And it should works, test it and tell me if works
I am trying to get a marker to show on the google map for a website I am doing. Without the marker code the map loads fine and shows the correct location (with no marker), when I add the marker code the map no longer loads. Clearly I am missing something simple but I am not too familiar with Jquery.
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWJYTBt3bKUIsQKKsQPSnR1IHNdkAmBQs&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(53.154662, -1.208357),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
var marker = new google.maps.Marker({
position:(53.154662, -1.208357),
map: map-canvas,
title:"Hello World!"
});
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Thanks for any assistance.
The map-property is expected to be a google.maps.Map-instance and the position-property has to be a google.maps.LatLng:
Furthermore you must create the marker when the map already has been created and in a scope where the maps-instance is accessible, e.g. at the end of initialize().
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(53.154662, -1.208357),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var marker = new google.maps.Marker({
position:new google.maps.LatLng(53.154662, -1.208357),
map: map,
title:"Hello World!"
});
}