Embedded Google Map Code not showing for IE

Embedded Google Map Code not showing for IE - javascript

I am trying to embedded google map code. It is designed to use geolocation and show traffic around your area live. It works in Chrome and Firefox. But does not with IE. It wont even show an error message. Any ideas how to solve this? Thank you.
Here is the code...
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script>
<article>
</article>
<script>
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '350px';
mapcanvas.style.width = '100%';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 12,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
</script>
</head>
</html>

Related

Centering google maps from address

I would like to center a google map from an address I get from a database with laravel. However the map isn't showing. Where is the problem?
<script>
function initMap() {
getLocations();
}
function getLocations() {
var http = new XMLHttpRequest();
http.open('GET', 'https://maps.googleapis.com/maps/api/geocode/json?address=' + {{ $address }} + '&key=AIzaSyCkCcwU02g9AlDkBzL6S6MbRBUNi8Z7atI', true);
http.onload = function() {
var coordinates = JSON.parse(http.responseText);
coordinates = coordinates['results'][0]['geometry']['location'];
var event = {lat: coordinates['lat'], lng: coordinates['lng']};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: event
});
var marker = new google.maps.Marker({
position: event,
map: map
});
};
http.send();
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkCcwU02g9AlDkBzL6S6MbRBUNi8Z7atI&callback=initMap">
</script>

you should show a bit more of your code, and give error codes returned.
Anyhow I think it's either the way you pass the address or the way you have your html setup. A quick way to check if it's a good address is placing an alert. Or you could test for a 200 response from the server.
Look at the following code that works
and here is the snippet
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
getLocations();
}
function getLocations() {
var http = new XMLHttpRequest();
http.open('GET', 'https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&&key=AIzaSyCkCcwU02g9AlDkBzL6S6MbRBUNi8Z7atI', true);
http.onload = function() {
var coordinates = JSON.parse(http.responseText);
coordinates = coordinates['results'][0]['geometry']['location'];
var event = {lat: coordinates['lat'], lng: coordinates['lng']};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: event
});
var marker = new google.maps.Marker({
position: event,
map: map
});
};
http.send();
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkCcwU02g9AlDkBzL6S6MbRBUNi8Z7atI&callback=initMap">
</script>
</body>
</html>

google map not load using javascript

I have posted my code but map is not load.please suggestion to this question.
i will also use google map js but can't load.
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap">
if($('.map-container:visible').length >= 0)
{
initMap();
}
function initMap(){
google.maps.visualRefresh = true;
var myLatlng = new google.maps.LatLng('24.980832' ,'55.092480');
var mapOptions = {
zoom: 10,
center: myLatlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('dubaiTradeNew'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Dubai Trade'
});
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}

Please try adding height width once
<div class="map-container" id="dubaiTradeNew" style="height:100px;width:100px">
</div>
And Set different scripts
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<script>
//Code here
</script>

Google Map get current location that can be changed by dragging the pin

This is my first post so i'm sorry if it has been asked before.
I have a form users fill out on mobile devices which captures there longitude and latitude using JavaScript geolocation. this isn't always the most accurate so I am trying to combine geolocation and google map draggable pin.
So the user opens the page, geolocation enters the current lon and lat in the script below, if its wrong they can then drag the pin to the right location which updates the text fields.
I have tried every thing and have had mixed results...if someone could help me out that would be great.
I hope this makes sense...if not im happy to explain more
The script below enables you to drag the pin and updates the two text field with the lon and lat.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<input type="text" id="latitude" placeholder="latitude">
<input type="text" id="longitude" placeholder="longitude">
<div id="map" style="width:500px; height:500px"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var $latitude = document.getElementById('latitude');
var $longitude = document.getElementById('longitude');
var latitude = 50.715591133433854
var longitude = -3.53485107421875;
var zoom = 7;
var LatLng = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: zoom,
center: LatLng,
panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map'),mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: 'Drag Me!',
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function(marker){
var latLng = marker.latLng;
$latitude.value = latLng.lat();
$longitude.value = latLng.lng();
});
}
initialize();
</script>
</body>
</html>

<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
function initialize() {
var map;
var position = new google.maps.LatLng(50.45, 4.45); // set your own default location.
var myOptions = {
zoom: 15,
center: position
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
// We send a request to search for the location of the user.
// If that location is found, we will zoom/pan to this place, and set a marker
navigator.geolocation.getCurrentPosition(locationFound, locationNotFound);
function locationFound(position) {
// we will zoom/pan to this place, and set a marker
var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// var accuracy = position.coords.accuracy;
map.setCenter(location);
var marker = new google.maps.Marker({
position: location,
map: map,
draggable: true,
title: "You are here! Drag the marker to the exact location."
});
// set the value an value of the <input>
updateInput(location.lat(), location.lng());
// Add a "drag end" event handler
google.maps.event.addListener(marker, 'dragend', function() {
updateInput(this.position.lat(), this.position.lng());
});
}
function locationNotFound() {
// location not found, you might want to do something here
}
}
function updateInput(lat, lng) {
document.getElementById("my_location").value = lat + ',' + lng;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<div id="map-canvas"></div>
Location:<br>
<input id="my_location" readonly="readonly">

You can get the user location from the navigator.geolocation:
navigator.geolocation.getCurrentPosition(function (position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
latPosition = position.coords.latitude;
longPosition = position.coords.longitude;
});
Then you can use these values to fill in your coordinates inputs and/or to place a marker on the map, as in my demo below.
JSFiddle demo

The Google Maps Api 3 Example Not working on Jsfiddle

Can you please take a look at following link and let me know why this google map working neither on my computer not on jsfiddle. I just got the code from [Google Maps API. Do I have to add something more to that?
As I said i tried both on my computer and on jsfiddle site with this link
Thanks for you comments and help
3]2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Overlays within Street View</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>
var map;
var panorama;
var astorPlace = new google.maps.LatLng(40.729884, -73.990988);
var busStop = new google.maps.LatLng(40.729559678851025, -73.99074196815491);
var cafe = new google.maps.LatLng(40.730031233910694, -73.99142861366272);
var bank = new google.maps.LatLng(40.72968163306612, -73.9911389350891);
function initialize() {
// Set up the map
var mapOptions = {
center: astorPlace,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Setup the markers on the map
var cafeMarker = new google.maps.Marker({
position: cafe,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
title: 'Cafe'
});
var bankMarker = new google.maps.Marker({
position: bank,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
title: 'Bank'
});
var busMarker = new google.maps.Marker({
position: busStop,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
title: 'Bus Stop'
});
// We get the map's default panorama and set up some defaults.
// Note that we don't yet set it visible.
panorama = map.getStreetView();
panorama.setPosition(astorPlace);
panorama.setPov(/** #type {google.maps.StreetViewPov} */({
heading: 265,
pitch: 0
}));
}
function toggleStreetView() {
var toggle = panorama.getVisible();
if (toggle == false) {
panorama.setVisible(true);
} else {
panorama.setVisible(false);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel" style="margin-left:-100px">
<input type="button" value="Toggle Street View" onclick="toggleStreetView();"> </input>
</div>
<div id="map-canvas"></div>
</body>
</html>

You need to set a height and width for the map-canvas. I've cleaned up the code some and it should be working here: http://jsfiddle.net/Zuds3/3/
HTML
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'> </script>
<div id="panel" style="margin-left:-100px">
<input type="button" value="Toggle Street View" onclick = "toggleStreetView();" ></input>
</div>
<div id="map-canvas"></div>
CSS
#map-canvas{
height: 400px;
width: 400px;
}
JavaScript
var map;
var panorama;
var astorPlace = new google.maps.LatLng(40.729884, -73.990988);
var busStop = new google.maps.LatLng(40.729559678851025, -73.99074196815491);
var cafe = new google.maps.LatLng(40.730031233910694, -73.99142861366272);
var bank = new google.maps.LatLng(40.72968163306612, -73.9911389350891);
function initialize() {
// Set up the map
var mapOptions = {
center: astorPlace,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Setup the markers on the map
var cafeMarker = new google.maps.Marker({
position: cafe,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
title: 'Cafe'
});
var bankMarker = new google.maps.Marker({
position: bank,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
title: 'Bank'
});
var busMarker = new google.maps.Marker({
position: busStop,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
title: 'Bus Stop'
});
// We get the map's default panorama and set up some defaults.
// Note that we don't yet set it visible.
panorama = map.getStreetView();
panorama.setPosition(astorPlace);
panorama.setPov(/** #type {google.maps.StreetViewPov} */({
heading: 265,
pitch: 0
}));
}
function toggleStreetView() {
var toggle = panorama.getVisible();
if (toggle == false) {
panorama.setVisible(true);
} else {
panorama.setVisible(false);
}
}
google.maps.event.addDomListener(window, 'load', initialize);

Geolocation: moving only google maps marker without reload the map

I need to update only the marker when the device is moving or when the device is getting more accuracy. When the position change also reload the map and I need to move only the maker. I have the following code:
if (navigator.geolocation) {
navigator.geolocation.watchPosition(
function(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var coords = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 20,
center: coords,
streetViewControl: false,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var capa = document.getElementById("capa");
capa.innerHTML = "latitud: " + latitude + " longitud: " + " aquesta es la precisio en metres : " + accuracy;
map = new google.maps.Map(
document.getElementById("mapContainer"), mapOptions
);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "ok"
});
},function error(msg){alert('Please enable your GPS position future.');
}, {maximumAge:0, timeout:5000, enableHighAccuracy: false});
}else {
alert("Geolocation API is not supported in your browser.");
}
Thanks!

I believe that the problem is that you create a new map inside the watchPosition function. You only need to create one marker and then update its position inside the watchPosition function.
navigator.geolocation.watchPosition(
function (position) {
setMarkerPosition(
currentPositionMarker,
position
);
});
function setMarkerPosition(marker, position) {
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
}
Maybe this example will help you:
<!doctype html>
<html lang="en">
<head>
<title>Google maps</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script type="text/javascript">
var map,
currentPositionMarker,
mapCenter = new google.maps.LatLng(40.700683, -73.925972),
map;
function initializeMap()
{
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 13,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
function locError(error) {
// the current position could not be located
alert("The current position could not be found!");
}
function setCurrentPosition(pos) {
currentPositionMarker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
),
title: "Current Position"
});
map.panTo(new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
));
}
function displayAndWatch(position) {
// set current position
setCurrentPosition(position);
// watch position
watchCurrentPosition();
}
function watchCurrentPosition() {
var positionTimer = navigator.geolocation.watchPosition(
function (position) {
setMarkerPosition(
currentPositionMarker,
position
);
});
}
function setMarkerPosition(marker, position) {
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
}
function initLocationProcedure() {
initializeMap();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
} else {
alert("Your browser does not support the Geolocation API");
}
}
$(document).ready(function() {
initLocationProcedure();
});
</script>
</head>
<body>
<div id="map_canvas" style="height:600px;"></div>
</body>
</html>

one easy way to do is, simply call map.clearOverlays(); then read add new positions with map.addOverlay(<marker>)

Develop Reference

JavaScript is the programming language of the Web.

Embedded Google Map Code not showing for IE - javascript

Related

Centering google maps from address

google map not load using javascript

Google Map get current location that can be changed by dragging the pin

The Google Maps Api 3 Example Not working on Jsfiddle

Geolocation: moving only google maps marker without reload the map

Categories

Resources