I have a function that gives the user directions from their location to a fixed location on a map. It is being loaded in as external content to populate a main div, the map shows fine on both IE and Firefox but when I view it in Chrome it does not show. The Chrome dev console shows that the content is being loaded into the div and it is not putting out any errors.
External map.html
<script type="text/javascript" src="JS/location.js"></script>
<div id="mapContainer"></div>
<div id="writtenDir"></div>
JS to load content:
$('#Contact').click(function () {
$('#centerPane').load('External/map.html');
$.getScript("JS/location.js");
});
Location.js
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoInfo, noGeoInfo);
} else {
noGeoInfo();
}
function geoInfo(position) {
navigator.geolocation.getCurrentPosition(function (position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var coords = new google.maps.LatLng(latitude, longitude);
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 15,
center: coords,
mapTypeControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById(''));
var request = {
origin: coords,
destination: '54.861283, -6.326805',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
});
}
function noGeoInfo() {
var location = new google.maps.LatLng(54.861283, -6.326805);
var mapOptions = {
center: location,
zoom: 15, //Sets zoom level (0-21)
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions);
marker = new google.maps.Marker({
position: location,
map: map
});
}
Div to be loaded into:
<div id="centerPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
Why is the map not showing in Google Chrome?
(live link, press "Contact Us" - http://scmweb.infj.ulst.ac.uk/~B00518833/DNA/View/index.php)
The problem resides inside the Nav.js file at line 59:
google.maps.event.trigger(map, 'resize');
The map is undefined when this line is executed.
Ensure that your js files are loaded in the right order and that the map is always defined before triggering the resize event.
I hope this helps.
Related
Iam doing an MVC Bootstrap Google Map V3 application.
When user enter a Full Address it is shown in a Google Map. If the div when it is shown is in a Partial View. It looks fine.
But, when that Partial View is in a Bootstrap Modal View. It does not show anything.
This is the case when it Works..
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MyKey&sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var address = "Full Address ";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 14,
center: latlng,
// mapTypeControl: true,
// mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
// navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("dvMap"), myOptions);
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow(
{ content: '<b>'+address+'</b>',
size: new google.maps.Size(150,50)
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
</script>
<div style="width: 600px; height:400px">
#Html.Partial("~/Views/Shared/_ShowMap.cshtml")
</div>
this is the call to my Partial View
My partial View in this case is simple
The case that does not work is like this.
I add this line at bootom of JavaScript function...
$("#myModalMapa").modal();
HTML Div is like this.
And my partial view looks like this.
As I sow in differents questions, I made same changes to my scripts
$(document).ready(function () {
$('#myModalMapa').on('shown.bs.modal', function () {
var currentCenter = map.getCenter(); // Get current center before resizing
google.maps.event.trigger(map, "resize");
map.setCenter(currentCenter); // Re-set previous center
});
});
I have this Javascript code on Google maps with geolocation and direction and I am using it in cordova , it gives me problems because it lacks the event Deviceready.
I tried to put it , but it was not working.
You are able to add it in the right way ?
Code:
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
// default location. When geolocation tracks the client, this variable is set to that location
function initialize() {
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
directionsDisplay = new google.maps.DirectionsRenderer();
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//here there is marker
directionsDisplay.setMap(map);
map.setCenter(mylocation);
}
function updateRoute() {
calcRoute(mylocation);
}
function calcRoute(start) {
var start = mylocation;
var end = document.getElementById('end').value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.WALKING,
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
mylocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
//document.getElementById('start').value = ;
if (map) {
calcRoute(position.coords.latitude +','+ position.coords.longitude);
map.setCenter(mylocation);
//*Posizione Utente*//
var image = 'user.png'
var marker1 = new google.maps.Marker({
position: mylocation,
map: map,
title: 'ciao!',
icon: image
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map,marker1);
});
var infowindow1 = new google.maps.InfoWindow({
content: '<img src="user.png">Sono Qui.....'
});
}
})
}
google.maps.event.addDomListener(window, 'load', initialize);
I currently have a simple Google Map, using API v3, with a custom marker (PNG file) displayed on a web page:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(51.49757618329838, 0.23350238800048828);
var markerLatLng = new google.maps.LatLng(51.49757618329838, 0.23350238800048828);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image = new google.maps.MarkerImage('/img/location/marker.png',
// This marker is 125 pixels wide by 109 pixels tall.
new google.maps.Size(125, 109),
// The origin for this image is 0,0 (left,top).
new google.maps.Point(0,0),
// The anchor for this image is towards the bottom left of the image (left,top).
new google.maps.Point(4, 105));
var CustomMarker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: image,
animation: google.maps.Animation.DROP
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
What I'd like to do is add a list of cities (not in a form <select> tag) below the map:
<ul>
<li>Leeds</li>
<li>York</li>
<li>Wakefield</li>
<li>Harrogate</li>
</ul>
When the user clicks on a city link, I'd like the Google Map to plot the driving route from my marker to the city and zoom out to fit the route.
When the user clicks on a different city afterwards, a new driving route should be plotted from my marker to the city clicked on.
I'm using jQuery on the page already, so perhaps it could be used for this?
I have no idea where to start I'm afraid! Any help or advice would be very much appreciated.
Thanks a lot.
You can use the directions service to get directions from a google.maps.LatLng (the position of your marker) to an address (the text of your <li> tags.
use JQuery to get the text of the <li>'s and pass that into the directions service (you need to give the unordered list an id to do that)
$("#citylist").on("click", "li", function () {
getDirections($(this).text());
});
HTML:
<ul id="citylist">
<li>Leeds</li>
<li>York</li>
<li>Wakefield</li>
<li>Harrogate</li>
</ul>
<div id="map_canvas"></div>
code:
var map = null;
var CustomMarker = null;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
function initialize() {
$("#citylist").on("click", "li", function () {
getDirections($(this).text());
});
var myLatlng = new google.maps.LatLng(51.49757618329838, 0.23350238800048828);
var markerLatLng = new google.maps.LatLng(51.49757618329838, 0.23350238800048828);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
CustomMarker = new google.maps.Marker({
position: markerLatLng,
map: map,
icon: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
animation: google.maps.Animation.DROP
});
directionsDisplay.setMap(map);
}
function getDirections(destination) {
var start = CustomMarker.getPosition();
var dest = destination;
var request = {
origin: start,
destination: dest,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
working fiddle
I am trying to get the directions services working on google maps api v3.
It is a webapp for smartphones where the user can get directions from where they are (GeolocationMarker) to a static (hardcoded) location defined by a lat and long.
The map centres on the hard coded lat and long, and then I have an icon (gps.png) that onclick should calculate and plot the directions between the two points.
I am not overly strong in javascript and this is essentially a mashup of code...can anyone see what I have done wrong and why this wont work?
Javascript is:
<code>
var map, GeoMarker;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var arena = new google.maps.LatLng(43.684782688659126,-79.2992136269837);
var mapOptions = {
zoom: 12,
center: arena,
panControl: false,
zoomControl: false,
streetViewControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
directionsDisplay.setMap(map);
var marker1 = new MarkerWithLabel({
position: arena,
draggable: false,
raiseOnDrag: false,
map: map,
icon: "images/lax-pin1.png",
labelContent: "Ted Reeve Arena",
labelAnchor: new google.maps.Point(25, 0),
labelClass: "pin", // the CSS class for the label
labelStyle: {opacity: 0.95}
});
GeoMarker = new GeolocationMarker();
GeoMarker.setCircleOptions({fillColor: '#808080'});
google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function(e) {
map.setCenter(e.latLng);
map.fitBounds(e.latLngBounds);
});
google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) {
alert('There was an error obtaining your position. Message: ' + e.message);
});
GeoMarker.setMap(map);
}
function calcRoute() {
var request = {
origin: GeoMarker,
destination: marker1,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</code>
The html is an onclick div tag for the calcRoute function
Thanks for any help....
There is an error reported:
TypeError: e is undefined
for line
map.setCenter(e.latLng);
Event listener
google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function(e) {
map.setCenter(e.latLng);
map.fitBounds(e.latLngBounds);
});
should be changed to
google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function(e) {
//map.setCenter(e.latLng);
//map.fitBounds(e.latLngBounds);
map.setCenter(GeoMarker.getPosition());
map.fitBounds(GeoMarker.getBounds());
});
request should be changed to:
var request = {
origin: GeoMarker.getPosition(),
destination: marker1.getPosition(),
travelMode: google.maps.TravelMode.DRIVING
};
because origin/destination expects string or valid LatLng
Update: I forgot this change: marker1 has to be changed to global:
var map, GeoMarker;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var marker1;
Okay, I got it to work, but not pretty. This is what I did
function calcRoute() {
var arena1 = new google.maps.LatLng(43.684782688659126,-79.2992136269837);
var request = {
origin: GeoMarker.getPosition(),
destination: arena1,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
I have a function that determines if the users broswer is geo-location enabled and if the user has geo-location enabled it is to display a Google map, if it isn't it then displays a different map.
function init_maps() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoInfo, noGeoInfo, { timeout: 20000 });
} else {
noGeoInfo();
}
function geoInfo(position) {
navigator.geolocation.getCurrentPosition(function (position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var coords = new google.maps.LatLng(latitude, longitude);
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 15,
center: coords,
mapTypeControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions);
directionsDisplay.setMap(map);
var request = {
origin: coords, //start point for directions
destination: '54.861283, -6.326805', //end point for directions
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
});
//}
function noGeoInfo() {
var location = new google.maps.LatLng(54.861283, -6.326805);
var mapOptions = {
center: location,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions);
marker = new google.maps.Marker({
position: location,
map: map
});
}
}
}
The function init_maps() is called when the user clicks on a link. The problem is that nothing is displayed in the div when the page loads, if I remove:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoInfo, noGeoInfo, { timeout: 20000 });
} else {
noGeoInfo();
}
function geoInfo(position) {
the map then loads as expected. Why is it not being displayed if I have the if else to determine if geo-location is enabled?