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>
Related
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 want to display a Google map - however, the latter isn't filled (no Google's logo is shown, neither the cities, streets, etc.). There's no error in the console. Here is an illustration of the problem:
Sources
The following code is an extract. Tags like <body>, etc. are not shown.
<div style="width: 500px; height: 500px;">
<div style="width: 500px; height: 500px;" id="page-gaz-de-ville-map"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var map;
$.getScript('https://maps.googleapis.com/maps/api/js?key=XYZ', initMap);
function initMap() {
var clusterStyles = [];
var mapstyles = [];
map = new google.maps.Map(document.getElementById('page-gaz-de-ville-map'), {
styles : mapstyles
});
}
});
</script>
Question
It is a fake API key.
Why is the map empty and how can I fix the problem?
I would recommend loading the js file as:
<script async defer src=".....key=XYZ&callback=initMap"></script>
This should ensure the deferred loading which I guess you were trying to achieve through the getScript call.
And define the initMap function at a script element in the head tag. Did the trick for me.
Please take the below code,
<!--- First of all need to add below script --->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=Your Key&v=3&libraries=places,visualization"></script>
<!--- Below code is used to invoke the google map --->
<script type="text/javascript">
$(document).ready(function() {
myLatlng = new google.maps.LatLng(64485, 2674827.909);
var myOptions = {
zoom: 18,
zoomControl: true,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
myMarker = new google.maps.Marker({
position: myLatlng
});
myMarker.setMap(map);
});
</script>
<!--- Html code --->
<div style="width: 600px; height: 400px;" id="map_canvas"></div>
Let me know if you have any questions.
This is actually You Want. 1st You Must Add HTML, BODY Tags, then Must Import JQuery Plugin ($(document) is JQuery)
$(document).ready(function () {
var map;
$.getScript('https://maps.googleapis.com/maps/api/js?key=XYZ', initMap);
function initMap() {
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(9.981496491854426, 76.30557754516597),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('page-gaz-de-ville-map'), myOptions);
}
});
You need to generate an api key.
and replace the XYZ, in javascript call, by your key.
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>
I have a contact page that fetches the coordinates from localstorage
like this
localStorage.getItem("jc")
I have used eval to convert string to variable
var thecoords = eval(localStorage.getItem("jc"));
and used the coordinates to center on those coordinates like
var center = new google.maps.LatLng(thecoords); and pan'ed to that location
map.panTo(center);
However i get this error
Uncaught RangeError: Maximum call stack size exceeded
I have checked my coordinates and they are in the right order of lat,lng
Why could i be getting this error?.
The google.maps.LatLng constructor takes two Numbers as an argument, not whatever you are passing it:
var center = new google.maps.LatLng(thecoords); // and pan'ed to that location
examples using google.maps.LatLngLiteral objects.
proof of concept fiddle
code snippet: (from jsfiddle, doesn't actually work due to sandboxing)
localStorage.setItem('jc', JSON.stringify({lat: 40.7127837, lng: -74.0059413}));
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
console.log(localStorage.getItem('jc'));
console.log()
var marker = new google.maps.Marker({
map: map,
position: JSON.parse(localStorage.getItem('jc'))
});
map.panTo(JSON.parse(localStorage.getItem('jc')));
}
google.maps.event.addDomListener(window, "load", initialize);
html, body, #map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="clear" value="clear store" type="button" onclick="clearLocalStorage()" />
<div id="panel">
<div id="color-palette"></div>
</div>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
No, you don't need to use eval(). Items stored in local storage are already a variable. Don't use evil eval() at all.
Start off by console logging the coords and compare it to the Google Maps API docs.
So I have this:
<iframe src="https://mapsengine.google.com/map/embed?mid=zkXLRR9SQKDQ.kfLF9HxBaALo&z=15" width="100%" height="100%"></iframe>
I managed to find the zoom code on here, however I couldn't find a way to remove the grey bar that appears at the top of the map with my google account stuff.
A screenshot can be found here.
Is there a way to remove this using a URL parameter?
I don't think it's possible to remove the bar. Instead you could use the Google Maps Javascript API. It's fairly easy to use and gives you much more control. Here's an example that loads your location with the right zoom level: plnkr.co.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js">
</script>
<script type="text/javascript">
function initialize() {
var latLng = new google.maps.LatLng(51.4893169, -2.1182648);
var mapOptions = {
center: latLng,
zoom: 15,
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var image = 'http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png';
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Documentation for the API.
If you need a specific style for your map, you can use the Styled Maps Wizard.
Depending on where you put your map on your page, it might conflict with scrolling. If that is the case, then set the scrollwheel option to false. That allows you to scroll over the map without it highjacking the scroll event for it's zoom functionality. I've updated the plnkr to use scrollwheel: false.