I have a card where it is repeated multiple times in a page, In the card I have a google map which shows the location of a particular point.
I am getting the google side response as
Error
at new nc (https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:47:499)
at Object._.oc (https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:48:96)
at ah (https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:98:420)
at https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:137:53
at Object.google.maps.Load (https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:21:5)
at https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:136:20
at https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:137:68
Html code is as follows
<div class="body" ng-repeat="hospital in hospitals">
<div class="list card">
<div>
<div id="map{{$index}}" style="height:200px;width:100%;" class="renderMap(hospital)"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=renderMap">
</script>
</div>
</div>
</div>
In controller, it is as follows
$scope.renderMap = renderMap;
function renderMap(hospital){
$scope.details_for_map = hospital;
console.log($scope.details_for_map);
initMap();
}
function initMap() {
var latlng = new google.maps.LatLng( $scope.details_for_map.geometry.location.lat, $scope.details_for_map.geometry.location.lng);
var map = new google.maps.Map(document.getElementById('map'+$scope.details_for_map.index), {
zoom: 4,
center: latlng
});
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Hello World!'
});
}
As I am new to ionic and angular js I am not able to figure out what I am doing incorrectly. Please let me know what I can do about it.
Related
I am working on a project and one of the goals is for the user to put a location's name into a textbox and press a button to search for a location on a Google map.
<h2>How to Use</h2>
<p>To use this program, enter a location then click the button to search for it.</p>
<h2>Search Location</h2>
Location: <input type="text" id="myText" value="">
<!-- This creates a textbox --->
<button onclick="searchFunction()">Search</button>
<!-- This creates a button --->
<p id="demo"></p>
<script>
function searchFunction() {
var location = document.getElementById("myText").value;
}
</script>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h1>Google Map</h1>
<div id="map"></div>
<script>
function initMap() {
var options = {
zoom: 12,
center: {
lat: 39.7684,
lng: -86.1581
}
}
var map = new google.maps.Map(document.getElementById('map'), options);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhrDQVoc_0FJx4Hy4tsFMKtmX78VNTUhw&callback=initMap">
</script>
<script>
if (location == "Children's Museum") {
function initMap() {
var options = {
zoom: 12,
center: {
lat: 39.810230,
lng: -86.158882
}
}
var map = new google.maps.Map(document.getElementById('map'), options);
var locationTestPosition = {
lat: 39.810230,
lng: -86.158882
};
var marker = new google.maps.Marker({
position: locationTestPosition,
map: map
});
}
</script>
}
This is the code that I currently have. The idea is that the user will insert a place's name and then using an if/else statement, the code will place a marker on the map at the proper coordinates. I cannot seem to get it to work though. I am new to HTML and JavaScript, so this is a lot of learning for me.
I'm building a site using Django and when I wanted to put a map with markers(which coordinates I pull from database) it refuses to show the markers, throwing out the error:
Uncaught ReferenceError: google is not defined
On every single occurance of:(3rd block)
var map = google.maps.Map(document.getElementById('map'));
Here's the whole code:
<div id="map" style="height: 60%"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 53.132330, lng: 23.159630},
zoom: 12
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDIOOtr2iADzkBWq3r48fHiZRvnAFcWxHY&callback=initMap"
async defer></script>
{% for place in recent_attraction %}
<script>
var map = google.maps.Map(document.getElementById('map'));
function setMarker() {
var latlng = {lat: {{place.gps_x}}, lng: {{place.gps_y}}}
var marker = new google.maps.Marker({
position: latlng,
map: map
})
}
</script>
{% endfor %}
Your reference error seems to be caused by the order that you have your code executing.
Additionally you could create a function to handle adding your markers. I am at work so I cannot test the following code, but it should get you on the right path.
<div id="map" style="height: 60%"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDIOOtr2iADzkBWq3r48fHiZRvnAFcWxHY&callback=initMap" async defer></script>
<script>
var map;
function setMarker(lat, long) {
var latlng = {lat: lat, lng: long}
var marker = new google.maps.Marker({
position: latlng,
map: map
});
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 53.132330, lng: 23.159630},
zoom: 12
});
}
</script>
{% for place in recent_attraction %}
<script>
setMarker({{place.gps_x}},{{place.gps_y}});
</script>
{% endfor %}
The problem in the title was removed by moving var map = google.maps.Map(document.getElementById('map')); inside the function. That didn't remove the problem completely, as I still didn't get the markers on my map. The solution was to move the code inside a single block and a single function, like this:
<div id="map" style="height: 60%"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 53.132330, lng: 23.159630},
zoom: 12
});
{% for place in recent_attraction %}
var latlng = {lat: {{place.gps_x}}, lng: {{place.gps_y}}}
var marker = new google.maps.Marker({
position: latlng,
map: map
});
{% endfor %}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDIOOtr2iADzkBWq3r48fHiZRvnAFcWxHY&callback=initMap"
async defer></script>
Thanks to user Willem Van Onsem.
What am I missing here? I have been staring at this thing for almost 3 days now, and cannot figure out what I am doing wrong. I have tried countless examples from various parts of the web, and the documentation isnt making much sense - but then again, letters are starting to run together. Any pointers would be helpful!
The below is what I amy trying to get to work. I have two groundoverlay images, with two checkboxes. What I would like to have happen is if the box is checked, the overlay shows. If the box is unchecked, the overlay goes away. Simple right?
<body onload="initialize()">
<div id="controls">
<input name="ckc1" onclick="showcov(rmap1,ckc1);" type="checkbox" checked="true">White Tanks</input>
<input name="ckc2" onclick="showcov(rmap2,ckc2);" type="checkbox" checked="true">Scottsdale</input>
</div>
<div id="map_canvas"></div>
<script language="javascript" type="text/javascript">
var map;
var rmap1,mk1,ckc1;
var rmap2,mk2,ckc2;
function initialize() {
var coord = new google.maps.LatLng( 33.5783309936523,-112.573112487793);
var map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: {lat: 33.5783309936523, lng:-112.573112487793},
zoom: 8
});
//White Tanks
var boundaries1 = new google.maps.LatLngBounds(
new google.maps.LatLng( 32.22935,-114.1923),
new google.maps.LatLng( 34.92731,-110.9539));
rmap1 =new google.maps.GroundOverlay("RM77B714BB9248_1.png", boundaries1);
rmap1.setMap(map);
mk1 =new google.maps.Marker({position:new google.maps.LatLng( 33.57832983,-112.57310897),map:map,title:'462.550 Mhz at 50 Watts',draggable:false,zIndex:1});
//Scottsdale
var boundaries2 = new google.maps.LatLngBounds(
new google.maps.LatLng( 32.36672,-113.4623),
new google.maps.LatLng( 35.06469,-110.2188));
rmap2 =new google.maps.GroundOverlay("RM77B714BB9248_4.png", boundaries2);
rmap2.setMap(map);
mk2 =new google.maps.Marker({position:new google.maps.LatLng( 33.715703,-111.840549),map:map,title:'462.600 Mhz at 20 Watts',draggable:false,zIndex:1});
}
//Checkbox Function
function showcov(m,v){if(v.checked) m.setMap(map); else m.setMap(null);}
</script>
</body>
The one below works just fine - but it's only one layer. I'm not sure what I am missing, but I'm sure is something simple as I have little experience with JS and mapping in this fashion.
<script type="text/javascript">
var map;
var rmap1,mk1;
function initialize() {
var coord = new google.maps.LatLng( 33.7157020568848,-111.840545654297);
var myOptions = {zoom: 7,center: coord, mapTypeId:
google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions );
var boundaries1 = new google.maps.LatLngBounds(new google.maps.LatLng( 32.36672,-113.4623), new google.maps.LatLng( 35.06469,-110.2188));
rmap1 =new google.maps.GroundOverlay("RM77B714BB9248_4.png", boundaries1);
rmap1.setMap(map);
mk1 =new google.maps.Marker({position:new google.maps.LatLng( 33.715703,-111.840549),map:map,draggable:false,zIndex:1});
rmap1.setMap(map);
}
function showcov(m,v){if(v.checked) m.setMap(map); else m.setMap(null);}
</script></head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%;height:80%"></div>
<div style="width:100%;height:10%">
<table width="100%"><tr><th colspan="2">Scottsdale 450 MHz**</th></tr><tr> <td bgcolor="#E0E0E0" colspan="2"><form name="form2">
<input type="checkbox" name="ckc1" checked="true" onclick="showcov(rmap1,ckc1);">Scottsdale 450 MHz**</input>
<input type="checkbox" name="ckm1" checked="true" onclick="showcov(mk1,ckm1);">Scottsdale</input>
</form></td></tr></table></div></body>
You have two issues:
Uncaught TypeError: Cannot read property 'checked' of undefined. you need to pass a reference to the checkbox into the function (this works or remove the declaration of the javascript variable so the automatically created reference to the HTML element can be used, as you did in your "working" example).
var rmap1,mk1; // ckc1;
var rmap2,mk2; // ckc2;
<input id="ckc1" onclick="showcov(rmap1,ckc1);" type="checkbox" checked="true" />White Tanks
<input id="ckc2" onclick="showcov(rmap2,ckc2);" type="checkbox" checked="true" />Scottsdale
Your map variable (at least the version that is initialized) is local to the initialize function, remove the var before it to initialize the global version (which is the scope in which HTML click listeners run), the same as you do in your "working" version of the code.
var map;
function initialize() {
var coord = new google.maps.LatLng( 33.5783309936523,-112.573112487793);
map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: {lat: 33.5783309936523, lng:-112.573112487793},
zoom: 8
});
proof of concept fiddle
code snippet:
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="controls">
<input id="ckc1" onclick="showcov(rmap1,ckc1);" type="checkbox" checked="true" />White Tanks
<input id="ckc2" onclick="showcov(rmap2,ckc2);" type="checkbox" checked="true" />Scottsdale
</div>
<div id="map_canvas"></div>
<script language="javascript" type="text/javascript">
var map;
var rmap1, mk1;
var rmap2, mk2;
function initialize() {
var coord = new google.maps.LatLng(33.5783309936523, -112.573112487793);
map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: {
lat: 33.5783309936523,
lng: -112.573112487793
},
zoom: 8
});
//White Tanks
var boundaries1 = new google.maps.LatLngBounds(
new google.maps.LatLng(32.22935, -114.1923),
new google.maps.LatLng(34.92731, -110.9539));
rmap1 = new google.maps.GroundOverlay("https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", boundaries1);
rmap1.setMap(map);
mk1 = new google.maps.Marker({
position: new google.maps.LatLng(33.57832983, -112.57310897),
map: map,
title: '462.550 Mhz at 50 Watts',
draggable: false,
zIndex: 1
});
//Scottsdale
var boundaries2 = new google.maps.LatLngBounds(
new google.maps.LatLng(32.36672, -113.4623),
new google.maps.LatLng(35.06469, -110.2188));
rmap2 = new google.maps.GroundOverlay("https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", boundaries2);
rmap2.setMap(map);
mk2 = new google.maps.Marker({
position: new google.maps.LatLng(33.715703, -111.840549),
map: map,
title: '462.600 Mhz at 20 Watts',
draggable: false,
zIndex: 1
});
}
//Checkbox Function
function showcov(m, v) {
if (v.checked) m.setMap(map);
else m.setMap(null);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
You need to pass a reference of checkbox to showcov() like this
<input name="ckc1" onclick="showcov(rmap1,this);" type="checkbox" checked="true">White Tanks</input>
<input name="ckc2" onclick="showcov(rmap2,this);" type="checkbox" checked="true">Scottsdale</input>
But there is one problem, setMap(null) not only removes the groundOverlay but also destroys it so you cannot add them again using setMap() that's why when you un-mark and then re-mark again overlay won't appear. To make it work you need to again create a new overlay object and set it on the map using setMap(map)
I think a better way would be not to remove but simple hide it using setOpacity().That way you don't need to re-create overlays
function showcov(m,v){
if(v.checked) {
//m.setMap(map);
m.setOpacity(1);
else {
//m.setMap(null);
m.setOpacity(0);
}
}
On android you may use much easier setVisible(true) and setVisible(false) but unfortunately those functions are not available for the web version
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'm trying to make a website with asp.net mvc 4 & EF6 where I want to pass values from MSSQL table to javascript. So far everything is working fine except if I pass Latitude & Longitude values for google-map-api function, map doesn't show up in my view. I used Html.HiddenFor helper to pass the value from <span>. Here are my codes,
Controller
public ActionResult BranchDetails(int BrId)
{
Branch branchDetails = abdb.Branches.Find(BrId);
return View(branchDetails);
}
View
<script>
function initialize() {
var marker;
var LatTag = document.getElementById("Lat");
var Lat = LatTag.getElementsByTagName("span");
var LngTag = document.getElementById("Lng");
var Lng = LngTag.getElementsByTagName("span");
var mapProp = {
center: new google.maps.LatLng(LatTag, LngTag),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
marker = new google.maps.Marker({
position: new google.maps.LatLng(Lat, Lng),
animation: google.maps.Animation.BOUNCE
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div class="container well" style="min-width: 100%; padding-right: 5px;">
<div id="googleMap"></div>
<span id="Lat">#Html.HiddenFor(model => model.Latitude)</span>
<span id="Lng">#Html.HiddenFor(model => model.Longitude)</span>
<h4><b>#Html.DisplayFor(model => model.Title)</b></h4>
<p><strong>Address:</strong> #Html.DisplayFor(model => model.Address)</p>
<p><strong>Contact No. :</strong> #Html.DisplayFor(model => model.ContactNo)</p>
<p><strong>Contact Person(s):</strong> #Html.DisplayFor(model => model.ContactPerson)</p>
</div>
</body>
Point to be noted that my Longitude & Latitude fields in MSSQL are set in varchar mode. I'm not sure if its causing the problem but just felt needed to inform. How can I solve this problem? Need this help badly. Tnx.
Nevermind, found my own solution. This worked for me, instead of giving span id, I gave Html.HiddenFor helper the id. For some reason javascript was not picking the id of the span I guess. Here are my codes,
<script>
function initialize() {
var marker;
var Lat = parseFloat(document.getElementById("Lat").value);
var Lng = parseFloat(document.getElementById("Lng").value);
var mapProp = {
center: new google.maps.LatLng(Lat, Lng),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
marker = new google.maps.Marker({
position: new google.maps.LatLng(Lat, Lng),
animation: google.maps.Animation.BOUNCE
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="googleMap"></div>
#Html.HiddenFor(model => model.Latitude, new { id = "Lat" })
#Html.HiddenFor(model => model.Longitude, new { id = "Lng" })
</body>