Trying to get gmaps to open at my location but its not working for me:
Edited: there was supposed to be nothing at the lat and lng, also added the div where this map is presented. I thought I could create a map with no coordinates, but have it go to my location right after creation using the geolocation function. How can i write this so that the map is created at my location without hardcoding the coordinates?
<div id="outputMap"></div>
<script>
var map;
map = new GMaps({
div: '#outputMap',
lat: 0,
lng: 0,
});
GMaps.geolocate({
function(position) {
map.setCenter(position.coords.latitude, position.coords.longitude);
}});
map.zoomOut();
When using the official JS API, an initial zoom value is required:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
<div id="map"></div>
<script>
var map = new google.maps.Map(document.getElementById('map'), {zoom: 14});
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map.setCenter(pos);
});
</script>
</body>
</html>
Related
I need to, using gmaps.js, grab marker information from a .json file and display the marker locations on my local html page.
I have been able to do this successfully with the standard Google Maps Platform API using the example given here:
https://developers.google.com/maps/documentation/javascript/importing_data
My geojson file is in the same format as the one in the example above.
However I would like to use gmaps.js because of its simplicity and ease of use.
How can the above code be adapted and used with gmaps.js?
Here is my very basic code so far:
var mapObj = new GMaps({
el: '#map',
lat: 30.267283,
lng: -90.554560,
zoom: 2,
minZoom: 2
})
/*attempting to place markers from geojson file*/
/*managed to add markers manually*/
mapObj.addMarker({
lat: 30.267283,
lng: -90.554560,
title: 'Marker with InfoWindow',
infoWindow: {
content: '<p>HI!</p>'
},
click: function(e) {
mapObj.map.panTo(e.position);
}
});
I have attempted to use: https://hpneo.dev/gmaps/examples/json.html
However my webpage seems to result in a blank white screen.
The gmaps example on Working with JSON works fine; you just need to modify it based off of your own JSON file. If it looks like the one from Google's documentation then you can just load it directly with getJSON like gmaps.js does.
Take a look at this jsbin for demonstration and guidance. Full code below. Hope it helps!
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key="></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.25/gmaps.js"></script>
<script>
var map;
function loadResults(data) {
var markers_data = [];
for (var i = 0; i < data.features.length; i++) {
var coords = data.features[i].geometry.coordinates;
markers_data.push({
lat: coords[1],
lng: coords[0],
infoWindow: {
content: '<p>HI!</p>'
},
click: function(e) {
map.map.panTo(e.position);
}
});
}
map.addMarkers(markers_data);
}
$(document).on('click', '.pan-to-marker', function(e) {
e.preventDefault();
var position, lat, lng, $index;
$index = $(this).data('marker-index');
position = map.markers[$index].getPosition();
lat = position.lat();
lng = position.lng();
map.setCenter(lat, lng);
});
$(document).ready(function() {
map = new GMaps({
el: '#map',
lat: 30.267283,
lng: -90.554560,
zoom: 2,
minZoom: 2
});
map.on('marker_added', function(marker) {
var index = map.markers.indexOf(marker);
if (index == map.markers.length - 1) {
map.fitZoom();
}
});
var xhr = $.getJSON('https://api.myjson.com/bins/11fqjv');
xhr.done(loadResults);
});
</script>
</body>
</html>
I'm fairly new to coding, and am experimenting on creating my own personal project. I was able to get a simple map up and running.
How would I create just for example all of the breweries in your area. Would I need to access an API and then create a marker for each one? OR just create a search bar within the map and Google "breweries"?
<div id="container">
<div id="googleMap" style="width:100%;height:400px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?
key="KEYHERE"&callback=myMap">
</script>
</div>
function myMap() {
var myCenter = new google.maps.LatLng(39.742043,-104.991531)
var mapCanvas = document.getElementById('googleMap');
var mapOptions = {center: myCenter, zoom: 9};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({content: "Denver" });
infowindow.open(map,marker);
}
If you have websites with examples or examples yourselves to help me out to learn I'd greatly appreciate it. I just don't know how it works. Thanks
i will share link which gives guidelines using this you create API key and just copy in the following script,
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
var uluru = {lat: -104.991531, lng: 39.742043};
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: uluru});
// The marker, positioned at your location
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Follow the following link,
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
I tried embedding Google Maps javascript API to my website. Tried it local and it worked fine but as soon as i try it on my webserver the tiles wont load.
Heres the simple code im using:
#map { height: 250px; }
<div id="map"></div>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 49.101670, lng: 9.212140},
zoom: 15
});
var marker = new google.maps.Marker({
position: {lat: 49.101670, lng: 9.212140},
map: map,
title: 'OPTIKHAUS FLEIN'
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrIgqoG8GX88lnjBFX_H_UH6VpK90khSA&callback=initMap">
</script>
Here is how it looks like on the website
Image
even the marker is showing up.
thanks in advance
You have extra spaces in url - js?key. Check my snippet. I update this line "https://maps.googleapis.com/maps/api/js?key=AIzaSyCrIgqoG8GX88lnjBFX_H_UH6VpK90khSA&callback=initMap" only
#map { height: 250px; }
<div id="map"></div>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 49.101670, lng: 9.212140},
zoom: 15
});
var marker = new google.maps.Marker({
position: {lat: 49.101670, lng: 9.212140},
map: map,
title: 'OPTIKHAUS FLEIN'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrIgqoG8GX88lnjBFX_H_UH6VpK90khSA&callback=initMap">
</script>
I should warn you that I am very new to website creation and Javascript. With that out of the way. Because of that I have a google map widget on a website I am creating. It has made the map creation really easy, but if I really need to I guess I could try at coding it myself. That aside, I would like to add buttons on the side of the map that will go to some markers I have created.
I am having difficulties getting the map object to manipulate it after its created. I can't seem to find what the widget calls the map object and so I just can't use the idea of making my map variable a global object.
I am just trying to change the default zoom to start with. Below is what what I am basically trying to do but whenever the code is executed, but my map turns into a gray box on my screen.
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
margin: 0 auto 0 auto;
}
</style>
</head>
<script type="text/javascript"src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE"></script>
<script type="text/javascript"charset="utf-8">google.load("maps","2.x"); google.load("jquery","1.3.1");</script>
<body>
<div id="map"></div>
<script>
function initMap() {
var map;
var myOptions = {
center: {lat: 40, lng: 50},
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, myOptions);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<script>
function newLocation(newLat, newLng) {
//var mymap = new google.maps.Map(document.getElementById('map'));
var mymap = document.getElementById('map');
mymap.setZoom(4);
}
</script>
<INPUT TYPE="button" NAME="myButton" VALUE="Press This" onclick="newLocation(45,88)">
<body>
</html>
Looking at the google developer tools I get this error
"Uncaught TypeError: mymap.setZoom is not a function." I think this means I am getting the map area not the map itself.
Therefore is it possible to grab an instance of the map so I could manipulate it?
Your not referencing the correct map variable that you create in initMap()
What I would change is make the map variable global, so all of your functions including newLocation() can access this map variable.
Your implementation is using mymap in the newLocation() function, this has access to the div container of the map, not the actual map object itself, which is why you can not change properties such as zoom.
Try structuring it something like so, so you have the correct reference to the map variable.
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
margin: 0 auto 0 auto;
}
</style>
</head>
<script type="text/javascript"src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE"></script>
<script type="text/javascript"charset="utf-8">google.load("maps","2.x"); google.load("jquery","1.3.1");</script>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
var myOptions = {
center: {lat: 40, lng: 50},
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, myOptions);
}
google.maps.event.addDomListener(window, 'load', init_map);
function newLocation(newLat, newLng) {
map.setZoom(4);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<INPUT TYPE="button" NAME="myButton" VALUE="Press This" onclick="newLocation(45,88)">
<body>
</html>
Good afternoon,
I am developping a javaFX application and now I want to include on it a map using google maps
I have successfully dispaly the map on javaFX using this code on a html file
<!DOCTYPE html>
<html>
<head>
<title>Java-Buddy: Google Maps</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>#mapcanvas { height: 360px; width: 100%}</style>
</head>
<body>
<h1>Java-Buddy: Google Maps</h1>
<div id="mapcanvas">
<script type="text/javascript">
var latlng = new google.maps.LatLng(35.857908, 10.598997);
var Options = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), Options);
//var carMarkerImage = new google.maps.MarkerImage('resources/images/car.png');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.857908, 10.598997),
map: map,
draggable: false,
//icon: carMarkerImage,
title: "",
autoPan: true
});
</script>
</div>
</body>
</html>
I want to set the postition of the map using the controller class
I can do it with this event code
public void handle(ActionEvent actionEvent) {
webEngine.executeScript("document.myFunction(longitude, latitude)");}
I am new on javascript, and I want to know how to write the javascript function that allow me to set or to change the current position on the map
Thank you
function myFunction(longitude, latitude){
map.setCenter(new google.maps.LatLng(latitude, longitude));
}