I'm trying to make a map adding a marker on the users location (accompanied by a searchbox) but even though my Javascript seems legit I can't figure out what seems to be the problem.
Background info:
I'm in the beginning of my learning, explaining all of the many and unnecessary divs with accompanying CSS. There seems to be no problem with the code, either the CSS or the Javascript, but still the map doesn't show up on the screen. The map has worked, unfortunatly the code is gone, when there was a standard center (set with cordinates).
If more info is requiered and/or presented in a different way, please let me know. There is a working snippet for testing. Just click "Run code snippet".
function initialize(position) {
var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var setting = {
center: location,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), setting);
var marker = new google.maps.Marker({
position: location,
map: map,
title: 'Marker'
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(initialize);
}
google.maps.event.addDomListener(window, 'load', initialize);
.mapContent {
padding: 0;
height: 500px;
padding: 0;
margin: 60px auto;
}
.mapContainer {
width: 830px;
padding: 0;
margin: 0 auto;
}
div #googleMap {
height: 500px;
width: 500px;
float: left;
border-radius: 250px;
margin-right: 30px;
}
div #searchbox {
float: left;
height: 400px;
width: 300px;
background: white;
margin-top: 50px;
}
#floating-panel {
z-index: 5;
background-color: darkred;
padding: 5px;
text-align: center;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
border-radius: 5px;
}
<div class="mapContent">
<div class="mapContainer">
<div id="searchbox">
<div id="floating-panel">
<input id="address" type="textbox" value="">
<input id="submit" type="button" value="Sök">
</div>
</div>
<div id="googleMap"></div>
</div>
</div>
You have the following error on your page:
“Uncaught ReferenceError: google is not defined”
Remember that the API can not be loaded after the document has finished loading you'll need to do that asynchronously.
Also, you may have forgotten to add the api URL reference: https://maps.googleapis.com/maps/api/js
Check out this fiddle, everything works perfectly:
https://jsfiddle.net/eugensunic/wexd3spp/6/
Code to enable the navigation:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(initialize);
}
google.maps.event.addDomListener(window, 'load', initialize);
Related
Hey I'm trying to integrate Google Maps into a website. Embedding Google Maps at a certain map location is quite easy, since you can generate the code for embedding on google maps itself through the share button, but this hides the search bar which I need for my game.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.15830869428!2d-74.119763973046!3d40.69766374874431!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%20City%2C%20New%20York%2C%20USA!5e0!3m2!1sde!2sde!4v1573800931555!5m2!1sde!2sde" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
Throughout the website players get coodrinates which you can enter into google maps to be shown the right location. Though what i would like to do is use the default google maps within an iframe for example so people can read and enter these coordinates without having to switch pages constantly.
Is there a way to do this, or do i have to pay for that? I'm currently looking into alternative map providers.
As was noted in the comments this is probably not possible via the simple iframe embed.
However, if you use the Google Maps API, there is ample documentation for that found here.
A quick example from the docs:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Places Search Box</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#description {
font-family: Roboto;
font-size: 15px;
font-weight: 300;
}
#infowindow-content .title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
.pac-card {
margin: 10px 10px 0 0;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #fff;
font-family: Roboto;
}
#pac-container {
padding-bottom: 12px;
margin-right: 12px;
}
.pac-controls {
display: inline-block;
padding: 5px 11px;
}
.pac-controls label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
#title {
color: #fff;
background-color: #4d90fe;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}
#target {
width: 345px;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<script>
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13,
mapTypeId: 'roadmap'
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"
async defer></script>
</body>
</html>
Also, I accidently revoked my flag but I noticed that this question could be closed as a duplicate of a number of questions, for example: here, here, and here.
Most of the issues were solved by switching to open street maps. I can just use an iframe with a link to their website. It's not quite perfect yet but I may be able to customize it enough to work smoothly.
Using ArcGis Javascript 3.17 API from this example, I'm trying to set up a "hideable" web map from the bottom, but it is behaving far from expected, it won't load properly and keeps expanding non stop
Jsfiddle : https://jsfiddle.net/ppgab/83jdovv6/7
Libs :
https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js
https://js.arcgis.com/3.17
Html :
<div>
<h1 class="big-text">
Test Application
</h1>
</div>
<div id="map" class="down">
<i><img id="up_button" src="https://upload.wikimedia.org/wikipedia/commons/0/01/Arrow-up-navmenu.png"></i>
</div>
Javascript :
var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
map = new Map("map", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
});
$('#row').click(function() {
if ($("#row").hasClass("down")) {
$("#row").removeClass("down");
$("#row").animate({
height: "50%"
}, 600);
} else {
$("#row").animate({
height: 28
}, 350);
$("#row").addClass("down");
}
});
CSS :
body {
margin: 0;
background: url(https://pcbx.us/beoh.jpg);
background-attachment: fixed;
background-size: cover;
}
.big-text {
text-align: center;
color: #2C2C2C;
font-family: pt sans narrow;
font-weight: 100;
font-size: 4em;
}
h2 {
font-family: pt sans narrow;
text-transform: uppercase;
text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.85);
}
#container {
background: #303030;
text-align: center;
color: #FFF;
font-size: 2em;
height: 50%;
width: 100%;
bottom: 0;
}
.hidden {
display: none;
}
#map {
background: #303030;
width: 100%;
text-align: center;
height: 28;
bottom: 0;
position: fixed;
}
It's worth nothing that I'm a begginer web developer, most of this code I found online
Or alternatively, if someone could recommend a JQuery sliding sidebar plugin that would work in this situation
Well, I figured out few things in your jsfiddle...
Esri CSS was not added because of that map was not loading properly
Id and classes were not used properly.
Below is the proper working solution:
JSFiddle: https://jsfiddle.net/vikash2402/83jdovv6/11/
Hoping this will help you :)
I am trying to get travel time with traffic between two locations.
I have followed the documentation guide with all details, but I always get a fixed traveltime between two points regardless to trafficmodel: (best_guess, pessimistic or optimistic).
Also, I tried to change the value of departure time to different dates in future but I always get the same result.
Edit:
I am using a standard API key.
Also, I have tried to change date format for [departureTime:] but did not help.
My main goal is to get travel time on links with traffic.
Thanks for helping.
Here is my HTML and Javascriptcode:
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Displaying text directions with <code>setPanel()</code></title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#right-panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#right-panel select, #right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}
#right-panel {
height: 100%;
float: right;
width: 390px;
overflow: auto;
}
#map {
margin-right: 400px;
}
#floating-panel {
background: #fff;
padding: 5px;
font-size: 14px;
font-family: Arial;
border: 1px solid #ccc;
box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
display: none;
}
#media print {
#map {
height: 500px;
margin: 0;
}
#right-panel {
float: none;
width: auto;
}
}
</style>
</head>
<body>
<div id="floating-panel">
<strong>Get TravelTime in Traffic</strong>
</div>
<div id="right-panel"></div>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]&callback=initMap">
</script>
<script>
function initMap() {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 30.114114, lng: 31.420595}
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('right-panel'));
var control = document.getElementById('floating-panel');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
calculateAndDisplayRoute(directionsService, directionsDisplay);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: "11 The Ring Road, Al Khosous, Al Khankah, Al Qalyubia Governorate, Egypt",
destination: " El-Shams Sporting Club, Al Matar, Qism El-Nozha, Cairo Governorate, Egypt",
travelMode: google.maps.TravelMode.DRIVING,
drivingOptions: {
departureTime: new Date("June 14, 2016 11:13:00"),
trafficModel: google.maps.TrafficModel.PESSIMISTIC
}
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
</body>
</html>
It seems this has nothing to do with your code. Instead, it is a matter of licensing. Your are using Driving Options (BEST_GUESS, OPTIMISTIC,PESSIMISTIC) which is a feature that belongs to Premium Plan clients. The way I see it, you need to buy the license first and use the Premium clientID before you can use this.
"You must supply a Google Maps APIs Premium Plan client ID when
loading the API if you want to include a drivingOptions field in the
DistanceMatrixRequest."
Your client ID
Upon purchasing your Google Maps APIs Premium Plan license, you will receive a welcome email from Google that contains your client ID. Your client ID is used to access the special features of Google Maps APIs Premium Plan. All client IDs begin with a gme- prefix.
This client ID is not a key. It will only work from URLs which you authorize, so you don't need to worry about keeping it secret.
Maybe your date format is not correct ?
Try :
departureTime: new Date("2016-06-14T11:13:00");
I would like to modify my google map in the following way:
so I would like to have 2 (or more) couples of buttons (with custom icon) on the bottom left of the map BUT on the top of the standard buttons of google that is streetview and zoom..
Do you think is possible?
So far i was only able to move my custom buttom on the BOTTOM_LEFT, BOTTOM_RIGHT, BOTTOM and so on..
Also as you can see I would like to have a VERTICAL Drawing Manager and not a horizontal one.
This is what I did: example
In particular when I do this
map.controls[google.maps.ControlPosition.BOTTOM].push(customControlDiv);
i would like to add instead some coordinate or pixel positions..
You can't define coordinates or pixel positions, but you may control the position via CSS.
e.g. for controls placed at the BOTTOM use margin-bottom to move them upwards from the position that has been set by the API
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 0,
lng: 0
},
noClear: true,
disableDefaultUI:true
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('ctrl1'));
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('ctrl2'));
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
#ctrls {
display: none;
}
#ctrl1 {
margin: 10px;
margin-bottom: 20px;
background: red;
}
#ctrl1::before {
content: '#ctrl1';
display: block;
}
#ctrl2 {
margin: 10px;
margin-bottom: 5px;
background: yellow;
}
#ctrl2::before {
content: '#ctrl2';
display: block;
}
.ctrl {
border: 1px solid #818181;
border-radius: 5px;
}
.ctrl strong{
border: 1px solid #818181;
border-radius: 3px;
background:#fff;
display:block;
}
<div id="map">
<div id="ctrls">
<div id="ctrl1" class="ctrl">
<strong>Button 1-1</strong>
<strong>Button 1-2</strong>
</div>
<div id="ctrl2" class="ctrl">
<strong>Button 2-1</strong>
<strong>Button 2-2</strong>
</div>
</div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
I'm trying to implement text search fields in the Google Places API, I created text fields as well as a click event that leads to the 'calcRoute()' function. I'm having trouble setting the in the text fields to the variable 'start' and 'end' (at least I think that's the porblem). Can anyone help me out? The directions list should appear on the right of the map.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Displaying text directions with <code>setPanel()</code></title>
<style>
html, body, #map-canvas {
height: 80%%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<style>
#directions-panel {
height: 80%%;
float: right;
width: 390px;
overflow: auto;
}
#map-canvas {
margin-right: 400px;
}
#control {
background: #fff;
padding: 5px;
font-size: 14px;
font-family: Arial;
border: 1px solid #ccc;
box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
display: none;
}
#media print {
#map-canvas {
height: 500px;
margin: 0;
}
#directions-panel {
float: none;
width: auto;
}
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"> </script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(41.850033, -87.6500523)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
var control = document.getElementById('control');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.TRANSIT
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="control">
<strong>Start:</strong>
<input type="text" data-bind="value:start"/>
<strong>End:</strong>
<input type="text" data-bind="value:end"/>
<button onclick="calcRoute()">Get Directions</button>
</div>
<div id="directions-panel"></div>
<div id="map-canvas"></div>
</body>
</html>
I think you're using getElementById without setting any IDs in your HTML
<!-- Elements don't have IDs -->
<input type="text" data-bind="value:start"/>
<input type="text" data-bind="value:end"/>
Try this:
<input id="start" type="text" data-bind="value:start"/>
<input id="end" type="text" data-bind="value:end"/>
Now when this code gets called, the elements should be found
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;