This below code displaying only the div portion it is not loading the map can one help thank in advance
i reffered to the following page:
https://developers.google.com/maps/documentation/javascript/examples/directions-travel-modes
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://maps.googleapis.com/maps/api/js?key=KEY&sensor=false"></script>
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionService();
var map;
var haight = new google.maps.LatLng(19.20,21.02);
var oceanBeach = new google.maps.LatLng(14.22,18.22);
function initialize(){
directionDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: haight
};
map = new google.maps.Map(document.getElementById('googleMap'),mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute(){
var selectMode = document.getElementById('mode').value;
var request = {
origing: haight,
destination: oceanBeach,
travelMode: google.maps.TravelMode[selectedMode]
};
directionsService.route(request, function(response, status){
if( status === google.maps.setDirectionsStatus.OK){
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div>
<strong>Mode of Travel</strong>
<select id="mode" onchange="calcRoute();">
<option value="DRIVING">DRIVING</option>
<option value="WALKING">WALKING</option>
<option value="BICYCLING">BICYCLING</option>
<option value="TRANSIT">TRANSIT</option>
</select>
</div>
<div id="googleMap" style="width:800px;height:600px; left: 200px; top: 50px "/> </body>
</html>
Related
I am currently creating a website for a school project. I have created a code that should display a map with some markers and some lines that represent borders between countries. The problem is that when I load this map I can display the lines but the markers all disappeared. Any help would be very appreciated. I alredy own a valid key.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=MYKEY" type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 768px; height: 512px"></div>
<form action="#">
<input type="button" value="hide" onclick="map.removeOverlay(kml)" />
<input type="button" value="show" onclick="map.addOverlay(kml)" />
</form>
<script type="text/javascript">
var mapProp= {
center:new google.maps.LatLng(41.8919300, 12.5113300),
zoom:3,
streetViewControl: false,
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
var kml = new GGeoXml("http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml");
map.addOverlay(kml);
var imageitaly = 'https://MYWEBSITE/mypath/wp-content/uploads/2019/02/italyscaled.png';
var Rome = {lat: 41.6500086, lng: 12.5113300};
var markerrm = new google.maps.Marker({
position: Rome,
map: map,
title: 'Italia',
icon: imageitaly
});
markerrm.addListener('click', function() {
window.location.href = ('https://MYWEBSITE/mypath/italia');
});
</script>
</body>
</html>
Below is my code minus the google map key. I do not get an error and I also do not get a map. What have I missed? You will have to add your on map key to try it you can get that here.
https://developers.google.com/maps/documentation/javascript/get-api-key
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<title>Test Map</title>
</head>
<body>
<canvas id="map_canvas" width="800" height="auto"></canvas>
<script >
function initMap() {
var map;var elevator;
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(39.8403, -88.9548),
mapTypeId: 'roadmap',
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var addresses = ['Decatur, Illinois'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x]
+ '&sensor=false', null, function (data) {
var p = data.results[0].geometry.location;
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map,
});
console.log(p.lat);
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=KEY GOES HERE=initMap"></script>
</body>
</html
This is just a quick and silly idea - but have you tried giving it a explicit height? Mine wouldn't show without that.
ie
height="400px"
Change <canvas id="map_canvas" width="800" height="auto"></canvas> to <div id="map_canvas" style="width: 800px; height: 500px;"></div>. You have to set the height auto will not work.
Also you need to run the initMap function by calling initMap();
I tried different approaches which I found on this site and in web but they don't work for me(
This is my code:
<h:panelGroup id="GMWrapper" style="background-color: red">
<p:gmap widgetVar="mainMap" center="49.835, 24.0083" zoom="15"
id="mainGoogleMap" type="HYBRID"
style="width: 600px; height: 400px" model="#{userPlaces.model}"
styleClass="gmappStyle" onPointClick="handlePointClick(event)" />
<p:commandButton onclick="someFunc()"></p:commandButton>
<script type="text/javascript">
function someFunc() {
if (navigator.geolocation) {
alert("Start")
navigator.geolocation
.getCurrentPosition(success);
alert("Successful!")
var elem = document
.getElementById("mainGoogleMap");
alert("Element was find")
elem.setCenter(new google.maps.LatLng(37.4419, -122.1419));
alert("Good done!");
} else {
error('Geo Location is not supported');
currentLat = 0.0;
currentLng = 0.0;
}
}
var currentLat;
var currentLng;
function success(position) {
currentLat = position.coords.latitude;
currentLng = position.coords.longitude;
}
</script>
</h:panelGroup>
Javascript code works to alert("Element was find")
Also I tried:
elem.setAttribute("center", currentLat.toString() + ", " + currentLng.toString());
elem.setAttribute("center", currentLat + ", " + currentLng);
elem.setAttribute("center", "37.4419, -122.1419");
and few other..
From the google maps docs: panTo(latLng:LatLng|LatLngLiteral) - Changes the center of the map to the given LatLng. If the change is less than both the width and height of the map, the transition will be smoothly animated. Below is a snippet that creates a map and centers the map at a location.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map.panTo(new google.maps.LatLng(37.4419, -122.1419));
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Somewhere at stackoverflow I found this (slightly modified by me) to render basic driving instructions from Google maps:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API v3 Directions Example</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=de"></script>
</head>
<body style="font-family: Arial; font-size: 12px;">
<div style="width: 600px;">
<div id="map" style="width: 500px; height: 400px; float: left;"></div>
<div id="panel" style="width: 500px; float: left;"></div>
</div>
<script type="text/javascript">
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('panel'));
var request = {
origin: 'An der Alster 1, Hamburg',
destination: 'Albada 1, Cala Llombards, Mallorca',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
</script>
</body>
</html>
I have modified the example a bit to fit my Kindle screen - now, as my JavaScript is really bad - how do I update this to have two text boxes at the top to ask for origin and destination, and maybe two radio boxes to let me select the value for travelMode (DRIVINGand WALKING)?
Thanks!
Full copy-and-paste answer:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API v3 Directions Example</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=de"></script>
</head>
<body style="font-family: Arial; font-size: 12px;">
Start:<input type="text" id="start"><br>
Ende: <input type="text" id="end"><br>
<div>
<select id="mode" onchange="calcRoute();">
<option value="DRIVING">Auto</option>
<option value="WALKING">zu Fuß</option>
</select><br>
<input type="button" value="Los" onclick="calcRoute();">
</div>
<br>
<div style="width: 600px;">
<div id="map" style="width: 400px; height: 400px; float: left;"></div>
<div id="panel" style="width: 400px; float: left;"></div>
</div>
<script type="text/javascript">
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('panel'));
var request = {
origin: '',
destination: '',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
function calcRoute() {
var selectedMode = document.getElementById("mode").value;
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode[selectedMode]
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
</script>
</body>
</html>
See the below markup and code which takes input from textboxes and also the travelling mode from a dropdownbox-
HTML-
Start:<input type="text" id="start">
End:<input type="text" id="end">
<div>
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute();">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
<option value="TRANSIT">Transit</option>
</select>
</div>
Javascript-
function calcRoute() {
var selectedMode = document.getElementById("mode").value;
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode[selectedMode]
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
I'm trying to create a Gmap to allow people to geocode an address and find the respective lat lng. I would like to see this in the forms I've already created. Also, I would like to have the capability of changing the coordinates as the marker is dragged.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Geocoder 10</title>
<style>
#map_canvas { width:400px; height:450px; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-30.070, -51.190);
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable: true,
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div>
<input id="address" type="textbox" value="">
<input type="button" value="Localizar!" onclick="codeAddress()"><br>
Latitude: <input type="text" id="lat"><br>
Longitude: <input type="text" id="lng"><br>
</div>
</body>
</html>
Inside the geocoder call back do this:
document.getElementById('lat').value = results[0].geometry.location.lat();
document.getElementById('lng').value = results[0].geometry.location.lng();
Working example
Ok... here's the code that makes what I wanted to. It might not be that elegant, but it works. I used the getPosition() method to get the coordinates, just have to click in the geocoded marker!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Geocoder</title>
<style>
#map_canvas { width:400px; height:450px; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-30.070, -51.190);
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable: true,
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
google.maps.event.addListener(marker, 'click', function() {
document.getElementById('coords').value = marker.getPosition();
});
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div id="info"></div>
<div>
<input id="address" type="textbox" value="">
<input type="button" value="Localizar!" onclick="codeAddress()"><br>
<input type="textbox" id="coords">
</div>
</body>
</html>