I have a .sdf database with three main columns: customer_name, lat and lon.
I want to iterate through the rows of the table and use the information for the markers.
The issue is that the map is generating fine, but the markers aren't being placed on the map.
This is what I have so far..
#{
var db = Database.Open("Contracts");
var query = "SELECT customer_name, lat, lon FROM Contracts ORDER BY customer_name";
}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function () {
initalise();
});
function initalise() {
var mapOptions = {
center: new google.maps.LatLng(52.007227, -0.719798),
zoom: 200,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementId("map_canvas"), mapOptions);
</script>
#foreach(var row in db.Query(query)) {
<script type="text/javascript">
var mark = new google.maps.LatLng(lat, lon);
var marker = new google.maps.Marker({
position: mark,
map: map,
title: #row.cusomter_name
});
</script>
}
<div id="map_canvas" style="width: 640px; height: 480px;"></div>
The database columns have the attributes of nvarchar(100), float, float respectively.
Your javascript is invalid, aren't you getting a JS error? The map variable is local to your initalise function (which is missing a closing }). So when you try to reference it later on, it can't access it. You're badly nesting your function with the <script> ... </script> tags.
Try this instead:
<script type="text/javascript">
$(document).ready(function () {
initalise();
});
function initalise() {
var mapOptions = {
center: new google.maps.LatLng(52.007227, -0.719798),
zoom: 200,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementId("map_canvas"), mapOptions);
#foreach(var row in db.Query(query)) {
var mark = new google.maps.LatLng(#row.lat, #row.lon);
var marker = new google.maps.Marker({
position: mark,
map: map,
title: #row.customer_name
});
}
}
</script>
Related
I know this question seems like it has been asked before, but none of them as i saw could answer my problem, the problem is that I'm having an error when getting my latitude & longitude data from database and can't show markers in google map on javascript part, I can get my database(lan,lng) in my view normally, but could not print them as markers on google map, the markers don't show at all, i think it's because i put all the script inside the initMap().now all i want is to show my database data (lan,lng) on google map as markers .any help would be appreciated. excuse my bad English
the Code
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--
#foreach ($position as $location)
<p>{{$location->lat}}</p>
<p>{{$location->long}}</p>
#endforeach
-->
<!--The div element for the map -->
<div id="map"></div>
<script src="https://js.pusher.com/5.0/pusher.min.js"></script>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: uluru});
// The marker, positioned at Uluru
// var marker = new google.maps.Marker({position: uluru, map: map});
// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;
var pusher = new Pusher('5945d552dbd1e6bb3107', {
cluster: 'ap2',
forceTLS: true
});
var channel = pusher.subscribe('location');
channel.bind("App\\Events\\SendLocation", function(data) {
// alert('An event was triggered with message: ' + data);
var uluru = {lat: parseFloat(data.location.lat), lng: parseFloat(data.location.long)};
var uluru= [
#foreach ($position as $location)
[ "{{ $location->lat }}", "{{ $location->long }}" ],
#endforeach
];
var marker = new google.maps.Marker({position: uluru, map: map});
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=my-api-key&callback=initMap"
async defer></script>
</body>
</html>
finally i solved my problem, i did it by using Ajax and it worked well,
also this way shows how to bring the database data(lat,lng) and print them as markers on the Map (without using Ajax). hope it helps the others :)
var uluru = {lat: -25.344, lng: 131.036};
var locations = [
#foreach ($information as $location)
[ {{ $location->latitude }}, {{ $location->longitude }} ],
#endforeach
];
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: uluru});
for (i = 0; i < locations.length; i++) {
var location = new google.maps.LatLng(locations[i][0], locations[i][1]);
var marker = new google.maps.Marker({
position: location,
map: map,
});
};
I know many people faced this type of error because many question & answer related to this type of error
Below is my dynamic footer
<script src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap" async defer></script>
<script async src="assets/js/custom.js"></script>
custom.js look like
jQuery(document).ready(function($) {
// Google Map
function initMap(){
var location = new google.maps.LatLng(40.712784, -74.005941);
var myOptions = {
zoom: 6,
center: location,
scrollwheel:false
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
var marker = new google.maps.Marker({
position: location,
map: map
});
// alert("Google Working");
};
google.maps.event.addDomListener(window, "load", initMap);
});
Map div only for contact-us.html page
<div id="map"></div>
but the map showing & also showing error like below
InvalidValueError: initMap is not a function
& all pages without contactus.html showing below error on the console
TypeError: a is null
...ndChild(c)};_.ug=function(a){for(var b;b=a.firstChild;)_.tg(b),a.removeChild(b)}
I'm searching last two days & applying for this but not any helpful answer.
I need to destroy error.
What's wrong with my code.
Thanks
Edited Based Answer Which Working Now
function initMap(){
var divId = document.getElementById("map");
if (!divId) {
return;
}
var location = {lat: 40.712784, lng: -74.005941};
var map = new google.maps.Map(divId,{
zoom: 6,
center: location,
scrollwheel:false
});
var marker = new google.maps.Marker({
position: location,
map: map
});
}
Load JS
<script src="assets/js/custom.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap" async defer></script>
Your function initMap() is scoped in anonymous function so googlemaps can't see this function.
You should declare function in global scope without jQuery(document).ready(function($) { ...
function initMap(){
var div = document.getElementById("map");
if (!div) {
return;
}
var location = new google.maps.LatLng(40.712784, -74.005941);
var myOptions = {
zoom: 6,
center: location,
scrollwheel:false
};
var map = new google.maps.Map(div,
myOptions);
var marker = new google.maps.Marker({
position: location,
map: map
});
// alert("Google Working");
};
window.onload = function() {
if (google) {
google.maps.event.addDomListener(window, "load", initMap);
}
}
more about scopes: https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/#what-is-local-scope
Loads libs:
<script src="assets/js/custom.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap" async defer></script>
Custom js file link need to go upper then google API link like below
<script src="assets/js/custom.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap" async defer></script>
Edit custom js file see below code which working
function initMap(){
var location = {lat: 40.712784, lng: -74.005941};
var map = new google.maps.Map(document.getElementById("map"),{
zoom: 6,
center: location,
scrollwheel:false
});
var marker = new google.maps.Marker({
position: location,
map: map
});
}
I hope to help you
Thanks
So I'm trying to implement Google maps on a website, and on my localhost it works fine, and I see it perfectly.
However when I upload this to my hosting company, the map doesn't show at all.
When I inspect the element and check the console, I don't see any errors.
Code is below:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(53.092975, -7.895479);
var mapOptions = {
center: myLatlng,
zoom:16,
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: 'LCCEurotex'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I have no idea what could be causing it as my code looks the same as the one from the google documentation.
Any ideas on what could be causing it would be great.
Thanks for any help!
Move this portion of code to the footer page, Probably you has binding the map and div container is not property loaded, additionally, tray adding a heigth to the id map_canvas as default in your css.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDo7nFkoUthlGms4De0miS4EPfupB5x0cY"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(53.092975, -7.895479);
var mapOptions = {
center: myLatlng,
zoom:16,
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: 'LCCEurotex'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
In your CSS
div#map-canvas {
height: 500px !important;
}
Only add http:// to url of google maps api, change this line:
<script type="text/javascript" src="maps.google.com/maps/api/js?sensor=false"></script>
By this:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
I am implementing a system in MVC 5 whereby a user can pick their coordinates from a google map and save them, the coordinates are stored to a database and then a separate page in the application retrieves the coordinates and displays the map with that Marker displayed.
My Problem is that while one map is functioning the other will not show up on a separate page.
Here is my Javascript Code:
$(document).ready(function () {
initialize();
});
function initialize() {
var latlng = new google.maps.LatLng('#ViewBag.Latitude', '#ViewBag.Longitude');
var myLatLng2 = new google.maps.LatLng(53.88484, -9.28484);
var mapOptions = {
center: latlng,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapOptions2 = {
zoom: 5,
center: myLatLng2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var map2 = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions2);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: '#ViewBag.data'
});
var marker2 = new google.maps.Marker({
map: map2,
position: myLatLng2,
draggable: true
});
new google.maps.event.addListener(marker2, 'drag', function () {
var pos = marker2.getPosition();
$("#Lat").val(pos.lat());
$("#Lon").val(pos.lng());
});
}
and in my First View
<div id="map_canvas" style="float:left; width: 600px; height: 250px; margin-top:15px; margin-bottom:20px; margin-left:30px;">
and the Other View
<div id="map_canvas1" style="float:left; width: 600px; height: 250px; margin-top:15px; margin-bottom:20px; margin-left:30px;">
I can make "map2" work by commenting out the line
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
and vice versa but they will not seem to run along side each other,
only the first var map or var map2 that is declared seems to run when both remain uncommented,
Any help would be greatly appreciated,
Thanks.
This is because
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
Is most likely erring out. map_canvas doesn't exist, so the next line is never reached. If you comment it out, then the second view works as expected.
When calling document.getElementById(), make sure the element exists FIRST before creating a map.
BTW: That also means that map_canvas1 does't exist on your first view either, so be careful there as well.
Try this:
var map_canvas = document.getElementById("map_canvas");
if (map_canvas)
var map = new google.maps.Map(map_canvas, mapOptions);
var map_canvas1 = document.getElementById("map_canvas1");
if (map_canvas1)
var map2 = new google.maps.Map(map_canvas1, mapOptions2);
I used the code from a website as shown below to let me show a google map in my page.
You can see it in action here http://www.pcpro.co.uk/blogs/wp-content/uploads/2010/12/google-maps-simple-example.html
My question is how can i change the code to when a user clicks on the map to open a link in a new window?
Thank you
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function () {
// Define the latitude and longitude positions
var latitude = parseFloat("38.1447817");
var longitude = parseFloat("23.848843");
var latlngPos = new google.maps.LatLng(latitude, longitude);
// Set up options for the Google map
var myOptions = {
zoom: 15,
center: latlngPos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Define the map
map = new google.maps.Map(document.getElementById("map"), myOptions);
// Add the marker
var marker = new google.maps.Marker({
position: latlngPos,
map: map,
title: "Auto Marin"
});
});
</script>
<div id="map" style="width:230px;height:140px;"></div>
You could add an event listener.
google.maps.event.addListener(map, "click", function(){
window.open(*LINK*)
});