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>
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.
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>
I have the following code to generate a Google Map based on the given latLang , but it does not show any map.
I get the latLang from DB and store it in a hidden input, the using document.getElementById() I get the value and assign it to the map. But it fails? Why?
(34.686298727073016, 50.92648297548294)
Here is the Javascript Code to Generate the map:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=fa"></script>
<div id='map-canvas' style="width: 500px; height: 500px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;">
</div>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(document.getElementById('mapPosition').value);
var mapOptions = {
zoom: 8,
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: 'منطقه مورد نظر در نقشه'
});
var infowindow = new google.maps.InfoWindow({
content: "<B>نقطه مورد نظر خود را در نقشه کلیک کنید</B>"
});
/*
google.maps.event.addListener(map, 'click', function(event) {
console.log(event);
marker.setPosition(event.latLng);
document.getElementById('mapPosition').value = event.latLng;
map.setCenter(event.latLng);
});*/
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<input type="hidden" value="<?php echo $item[0]['latLang']; ?>" name="mapPosition" id="mapPosition" />
The api takes two arguments e.g.
new google.maps.LatLng(-34.397, 150.644)
and it looks like you are passing it one
new google.maps.LatLng(document.getElementById('mapPosition').value);
I would advise looking here for your problem.
Either parse the value
(34.686298727073016, 50.92648297548294)
into two parameters, or have two inputs- one for long and another for lat.
try to give individual lat long values:
myLatLong = new google.maps.LatLng(lat, long)
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)
}));
};