I am new to google maps API and using the code below.
Somehow the marker is not being displayed on the map.
I am using google maps API v3.
.controller('MapCtrl', ['$scope',
function MapCtrl($scope) {
var ll = new google.maps.LatLng(38.895112, -77.036366);
$scope.mapOptions = {
center: ll,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.onMapIdle = function() {
if ($scope.myMarkers === undefined){
var marker = new google.maps.Marker({
map: $scope.myMap,
position: ll
});
$scope.myMarkers = [marker, ];
}
};
$scope.markerClicked = function(m) {
window.alert("clicked");
};
}
])
HTML code is as below:
<div ng-app='localAdventuresApp'>
<div ng-controller="MapCtrl">
<div id="map_canvas" ui-map="myMap"
style="height:300px;width:400px;border:2px solid #777777;margin:3px; border:1px solid"
ui-options="mapOptions"
ui-event="{'map-idle' : 'onMapIdle()'}"
>
</div>
<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
ui-event="{'map-click': 'markerClicked(marker)'}">
</div>
</div>
</div>
Try the following code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(38.895112,-77.036366);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
In fact, it's for AngularJS + Google MAPS V3 + UI-MAP
If markers are not shown when starting map, it's because map is not still loaded.
I founded one solution for solve this problem :
In HTML you declare ui-event with 'map-tilesloaded' witch is trigger by maps event 'tilesloaded':
<div ui-map="myMap" class="map-canvas"
ui-event="{'map-tilesloaded': 'maploaded()'}"
ui-options="mapOptions">
</div>
<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
ui-event="{'map-click': 'openMarkerInfo(marker)'}">
</div>
Then in your controller you can add markers :
$scope.maploaded = function() {
$scope.myMarkers.push(new google.maps.Marker({
map: $scope.myMap,
position: new google.maps.LatLng(mylat, mylon)
}));
};
Related
I am trying to create a google map. the latitude and the longitude are from the database so I had to put those in a textbox then get its value in the script. I tried doing so but it doesn't work will you help me with this one; here's my JavaScript:
function initMap() {
var lat = document.getElementById('lat');
var lang = document.getElementById('lang');
var uluru = {lat: lat, lng: lang };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
Here's the html:
<input type="text" style="display: none" id="lat" value="7.8383054" />
<input type="text" style="display: none" id="lang" value="123.2966657" />
<div id="map" ">
</div>
JSfiddle
the "numbers" in the text fields are access using the .value property:
the lat/lng in a google.maps.LatLngLiteral must be numbers. (without the parseFloat the API throws these errors:
InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number
InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number
var lat = parseFloat(document.getElementById('lat').value);
var lang = parseFloat(document.getElementById('lang').value);
You need to actually call the initMap method (your fiddle isn't doing this)
updated fiddle
code snippet:
html,
body,
#map {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<input type="text" id="lat" value="7.8383054" />
<input type="text" id="lang" value="123.2966657" />
<div id="map" ">
</div>
<script>
function initMap() {
var lat = parseFloat(document.getElementById('lat').value);
var lang = parseFloat(document.getElementById('lang').value);
var uluru = {lat: lat, lng: lang };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
Try:
var lat = document.getElementById('lat').value;
var lang = document.getElementById('lang').value;
Not really sure where your problem lies aside from not actually using the value of the text inputs or calling the function that returns those values but perhaps something long these lines might help get you started. If you are needing the user to enter different lat/lng coordinates then you would also need an event handler assigned to listen for changes or a button to submit the new coordinates.
<?php
/*
*/
?>
<!doctype html>
<html>
<head>
<title>Google maps</title>
<script src='https://www.google.com/jsapi' charset='utf-8'></script>
<script src='https://maps.google.co.uk/maps/api/js?key=APIKEY' charset='utf-8'></script>
<script type='text/javascript' charset='utf-8'>
function initMap() {
var uluru = {
lat: document.getElementById('lat').value,
lng: document.getElementById('lang').value
};
var options={
zoom: 4,
center: uluru
};
var map = new google.maps.Map( document.getElementById('map'), options );
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
document.addEventListener( 'DOMContentLoaded', initMap, false );
</script>
<style type='text/css' charset='utf-8'></style>
</head>
<body>
<div id='map'></div>
<div>
<input type='text' id='lat' value='7.8383054' />
<input type='text' id='lang' value='123.2966657' />
</div>
</body>
</html>
call initMap() function in body tag. it will load the map, the most important thing do you have api key ? you also need ssl to use google maps. means your url must be https://yourdomain.com
body onload="initMap()"
I'm trying to put three Google Maps markers on a website, but they don't work. I can't figure it out why. I've checked all over again, several times, but I'm a newbie and I can't find the problem.
Here's my JS code
<!-- Google Maps JS -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript">
function initialize() {
//Locations Coordinates
var myLatlngBusto = new google.maps.LatLng(45.6084,8.850165);
var myLatlngMagnago = new google.maps.LatLng(45.5808394,8.850165);
var myLatlngBienate = new google.maps.LatLng(51.520614,-0.121825);
//Options List
var mapOptionsBusto = {
zoom: 15,
center: myLatlngOH,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var mapOptionsMagnago = {
zoom: 15,
center: myLatlngCA,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var mapOptionsBienate = {
zoom: 15,
center: myLatlngUK,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
//Maps Variables
var mapBusto = new google.maps.Map(document.getElementById('map-Busto'), mapOptionsBusto);
var mapMagnago = new google.maps.Map(document.getElementById('map-Magnago'), mapOptionsMagnago);
var mapBienate = new google.maps.Map(document.getElementById('map-Bienate'), mapOptionsBienate);
//Markers List
var markerBusto = new google.maps.Marker({
position: myLatlngBusto,
map: mapBusto,
title: 'Busto Arsizio, via Dante Alighieri, 5'
});
var markerMagnago = new google.maps.Marker({
position: myLatlngMagnago,
map: mapMagnago,
title: 'Magnago, via Goffredo Mameli, 9'
});
var markerBienate = new google.maps.Marker({
position: myLatlngBienate,
map: mapBienate,
title: 'Bienate (fraz. Magnago), Piazzale del Tricolore'
});
}
</script>
And my html code:
<div class="col-md-5">
<p class="dark-section"><i><strong>Busto Arsizio</strong></i>, via Dante Alighieri 5<br/>Palestra scuola media G.A.Bossi</p><br/>
<p class="dark-section"><span>ADULTI:</span><br/>lunedì e giovedì<br/>Inizio ore 20.30, fine ore 22.00</p><br/>
<p class="dark-section"><span>BAMBINI:</span><br/>mercoledì e venerdì<br/>Inizio ore 17.00, fine ore 18.30</p>
</div>
<div class="col-md-7">
<div id="map-Busto"></div>
</div>
<!-- Divider -->
<div class="col-md-12">
<div class="hr5" style="margin-top:20px;margin-bottom:20px;"></div>
</div>
<div class="col-md-5">
<br/>
<p class="dark-section"><i><strong>Magnago</strong></i>, via Goffredo Mameli 9<br/>Palestra scuola elementare Ada Negri</p><br/>
<p class="dark-section"><span>ADULTI:</span><br/>martedì e venerdì<br/>inizio ore 21.00, fine ore 23.00</p><br/>
</div>
<div class="col-md-7">
<div id="map-Magnago"></div>
</div>
<!-- Divider -->
<div class="col-md-12">
<div class="hr5" style="margin-top:20px;margin-bottom:20px;"></div>
</div>
<div class="col-md-5">
<br/>
<p class="dark-section"><i><strong>Bienate (fraz. Magnago)</strong></i>, Piazzale del Tricolore<br/>Palestra scuola elementare Giacomo Leopardi</p><br/>
<p class="dark-section"><span>BAMBINI:</span><br/>lunedì e giovedì<br/>Inizio ore 18.30, fine ore 20.00</p><br/>
</div>
<div class="col-md-7">
<div id="map-Bienate"></div>
</div>
Here you can check the result on the website page: http://westexperiments.altervista.org/index.html
So how do I fix these Google Maps markers?
It looks like you don't trigger initialize().
Add this, at the bottom of your script (line 121 of your online example):
google.maps.event.addDomListener(window, 'load', initialize);
You have a couple of problems:
The function initialize has not been called so the maps wont ever get generated. This can be called on window load by using google.maps.event.addDomListener(window, 'load', initialize);
You are using the variables myLatlngOH, myLatlngCA and myLatlngUK to center the maps - they don't exist and will stop the maps from being generated. I assume these should be myLatlngBusto, myLatlngMagnago and myLatlngBienate instead
function initialize() {
//Locations Coordinates
var myLatlngBusto = new google.maps.LatLng(45.6084, 8.850165);
var myLatlngMagnago = new google.maps.LatLng(45.5808394, 8.850165);
var myLatlngBienate = new google.maps.LatLng(51.520614, -0.121825);
//Options List
var mapOptionsBusto = {
zoom: 15,
center: myLatlngBusto,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var mapOptionsMagnago = {
zoom: 15,
center: myLatlngMagnago,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var mapOptionsBienate = {
zoom: 15,
center: myLatlngBienate,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
//Maps Variables
var mapBusto = new google.maps.Map(document.getElementById('map-Busto'), mapOptionsBusto);
var mapMagnago = new google.maps.Map(document.getElementById('map-Magnago'), mapOptionsMagnago);
var mapBienate = new google.maps.Map(document.getElementById('map-Bienate'), mapOptionsBienate);
//Markers List
var markerBusto = new google.maps.Marker({
position: myLatlngBusto,
map: mapBusto,
title: 'Busto Arsizio, via Dante Alighieri, 5'
});
var markerMagnago = new google.maps.Marker({
position: myLatlngMagnago,
map: mapMagnago,
title: 'Magnago, via Goffredo Mameli, 9'
});
var markerBienate = new google.maps.Marker({
position: myLatlngBienate,
map: mapBienate,
title: 'Bienate (fraz. Magnago), Piazzale del Tricolore'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
div {
height: 200px;
width: 200px;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&.js"></script>
<div id="map-Busto"></div>
<div id="map-Magnago"></div>
<div id="map-Bienate"></div>
I've tried all possible solutions but the map just isn't showing. My webview just shows blank.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="theme.css">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript">
var map; " +
function initialize() {
var latitude = 0;
var longitude = 0;
if (window.android){
latitude = window.android.getLatitude();
longitude = window.android.getLongitude();
}
var myOptions = {
zoom: 20,
center: myLatLng
}
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
function centerAt(latitude, longitude){
myLatlng = new google.maps.LatLng(latitude,longitude);
map.panTo(myLatLng);
}
</script>
<title>Insert title here</title>
</head>
<body>
<div id="map_canvas" style="height: 100px; width=100px;">This is the map canvas</div>
<script type="text/javascript">initialize();</script>
</body>
</html>
I've narrowed down to this line: map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
When this line is executed, it fails.
Any help is appreciated.
Thanks.
Regards,
Dexter
I can't see myLatLng definition other than in centerAt() function. You need to pass Google Maps LatLng object to the center attribute of myOptions:
var myLatlng = new google.maps.LatLng(latitude, longitude);
var myOptions = {
zoom: 20,
center: myLatLng
}
...
And there is also a strange thing which I can't understand:
var map; " +
^ ^
my bad, submitted the wrong code. Anyway, the major issue here is the connection. That took me a long time to realize it since i was just focusing on the codes.
Thanks.
Why does my marker not appear?
I also tried without the line "marker.show", but the marker just seems not to appear.
<html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Custom Control</title>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript" src="ZoomPanControl.js"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(47.3732589, 8.2382168),
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true }
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({ position: google.maps.LatLng(47.3732589, 8.2382168), title: 'x', map:map});
marker.show;
};
</script></head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body></html>
This should do the trick:
var marker = new google.maps.Marker();
marker.setPosition(new google.maps.LatLng(47.3732589, 8.2382168));
marker.setMap(map);
You were close, but you forgot the new keyword when adding your position. It should look like this:
var marker = new google.maps.Marker({ position: new google.maps.LatLng(47.3732589, 8.2382168), title: 'x', map:map});
I am searching for an eval() alternative..
I generate a usal google map, API v3.:
// define options
var mapOptions = {
zoom: 18,
center: new google.maps.LatLng(-33.890542, 151.274856),
mapTypeId: eval(maptype["map"]),
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true
};
// create map
map = new google.maps.Map(document.getElementById('map_test),mapOptions);
This works as it should, but I want to avoid eval().
maptype is defined via php, using JSON:
echo 'maptype = '.json_encode($options).';';
Is there a alternative for eval?
Update:
the full sourcecode:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.7&sensor=false&language=de"></script>
</head>
<body>
<script>
maptype = {"map":"google.maps.MapTypeId.SATELLITE"};</script>
<script>
function Map()
{
var mapOptions = {zoom: 18, center: new google.maps.LatLng(-33.890542, 151.274856), mapTypeId: eval(maptype["map"])};
// create map
map = new google.maps.Map(document.getElementById('map'),mapOptions);
}
</script>
<div id="map" style="width:1200px; height:800px"></div>
<script> jQuery(document).ready(function ($) {Map();});</script>
</body>
</html>
Result: no error, no map, just a grey background.
You should be able to just remove the eval() call around it and it should work, assuming ngggOptions is an object and has a key for map.