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.
Related
I'm building a websites, that occupies the Google Maps JS API, but for some reason, the map stays white, but there's no error in the Google Chrome Console.
HTML code:
<div id="map-container-5" class="z-depth-1" style="height: 200px"></div>
<script src="https://maps.google.com/maps/api/js?key"></script>
JS code:
function myMap() {
var mapProp= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map=new google.maps.Map(document.getElementById("map-container- 5"),mapProp);
}
I'm not really getting the point, why this is not working, as there's no error.
My kind of template was: https://www.w3schools.com/graphics/tryit.asp?filename=trymap_intro
If you want to simply show a map with your coordinates using the googleapi then do as follows. This will show the map with your lat and lng.
CSS:
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
The HTML
<div id="map"></div> /* Place on your page
And this BEFORE the /body tag with YOUR key
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap">
</script>
And the JS script which again is places about the /body
<script>
function initMap() {
// The location of Uluru
var uluru = {lat: 51.5087420, lng: -0.120850};
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 10, center: uluru});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
Your code is correct. You just need to call the myMap() function once it is defined.
Try running the snippet below. (Same as your code with an additional line for calling myMap() function.)
function myMap() {
var mapProp = {
center: new google.maps.LatLng(51.508742, -0.120850),
zoom: 5,
};
var map = new google.maps.Map(document.getElementById("map-container-5"), mapProp);
}
myMap();
<div id="map-container-5" class="z-depth-1" style="height: 200px"></div>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyC7q_f_aMi9o-hoSl3PYSVHRlN99AU3nBg"></script>
The API key you used is W3Schools one! API keys are used for Google to ask for money when your map gets lots of views.
You can get your own API key at https://cloud.google.com/maps-platform/ but you also need to register your credit card (or a fake one).
Note that you don't need an API key if your project is local (not served via HTTP).
(Also you didn't call myMap, so be sure to add myMap() to the end of your code.)
first you have to get your own key for google maps api. then you need to correct the tag like this.Also you have to call your "myMap" function.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=myMap" async defer></script>
you then want to replace "YOUR_API_KEY" in the code with your key.
and "myMap" with your function name which in this case is the same (myMap)
In your style try using a valid height and width, and be sure the div is visible at startup
<div id="map-container-5" class="z-depth-1" style="height: 200px; width:200px;"></div>
And try remove the last comma in mapProp
var mapProp= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5
};
Is not cleat how invoke the function myMap().. so try also using the code directly in
<script>
var mapProp= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5
};
var map=new google.maps.Map(document.getElementById("map-container- 5"), mapProp);
</script>
and check in your javascript console .. for error
First of all this is not a duplicate question . Other questions on Stack overflow and other sites don't have the complete thing I am asking for. I do not want a button below the iframe.
I want a button say button like a small red circle over the map in the down right corner of the iframe
Red Circle Button Sample - I want to keep a button like this in bottom right corner of the div/iframe
I have created a fiddle to make you understand the issue.The link is at the last part of the question
Code
HTML
<div id="map"></div>
<script>
var map;
var marker;
var location1 = {
lat: 34.0522,
lng: -118.2437
};
function initMap() {
var myOptions = {
zoom: 13,
center: location1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
marker = new google.maps.Marker({
position: location1,
map: map,
title: 'Click to zoom'
});
}
function changeCenter(center) {
map.setCenter(center);
marker.setPosition(center);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<button type="button" onclick="javascript:changeCenter(location1);">Location 1</button>
CSS
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
#map {
height: 90%;
width: 100%;
}
Also another thing that is not happening - I have kept the default zoom level at 13 , now when I am zooming in 3 times or say zooming out 3 times then when I click on the button I am getting zoom location of my default position as 10 or 16, not that original 13. Please help me with this thing also
#saravana has only solved a little part of my question.
Here is my updated fiddle
updated FIDDLE with zoom issue solved
The major thing is still there - I want to create a custom button over the map. Please help me with that
Please replace your changecenter function to below code
function changeCenter(center) {
map.setCenter(center);
map.setZoom(13);
marker.setPosition(center);
}
You can set zoom level by using map.setZoom() function. Cheers!!!
Update:
Please replace your html code to below code in fiddle
we have to add custom button or image manually in the google map. I hope this will help
<div id="map"></div>
<div><img src="http://www.clker.com/cliparts/X/9/P/m/2/g/transparent-red-circle-md.png" width="25px" style="position: fixed;z-index: 9999; right:10px; top:225px; float: right;" onclick="javascript:changeCenter(location1);"></div>
<script>
var map;
var marker;
var location1 = {
lat: 34.0522,
lng: -118.2437
};
function initMap() {
var myOptions = {
zoom: 13,
center: location1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
marker = new google.maps.Marker({
position: location1,
map: map,
title: 'Click to zoom'
});
}
function changeCenter(center) {
map.setCenter(center);
map.setZoom(13);
marker.setPosition(center);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<button type="button" onclick="javascript:changeCenter(location1);">Location 1</button>
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>
I've looked at several questions that are similar, but I'm still not finding a resolution.
I have this page: http://www.citizensmemorial.com/Test2014/locations/cmh-infectious-disease-and-internal-medicine-clinic/index.html
I'm using this code:
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBs_4MZDYZTCtkoB-Hbo4qQyWy-qHQuEdA"></script>
<script>
var mapExists = document.getElementById('map-canvas'); if(mapExists)
var map;
function initialize() {
var myLatLng = new google.maps.LatLng (37.625387, -93.424350)
var mapOptions = {
zoom: 12,
center: myLatLng
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'CMH Infectious Disease & Internal Medicine Clinic'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Here is the applicable css:
html, body, #map-canvas {
width:100%;
height:100%
}
#map_canvas {
position: relative;
}
.map-holder {
width:500px;
height:270px;
padding: 0px;
display:table;
margin-top:3px;
float:right;
}
I'm assuming that it is something related to the css that is keeping the map from centering, as I've tested the map code by itself at this url and it is working:
http://www.citizensmemorial.com/Temp/mapTest.html
Looks to be you are initializing the map before the map-canvas div is visible. You need to trigger a resize otherwise the map won't know its correct size.
After initializing your map call a map resize
google.maps.event.trigger(map, "resize");
Then set map centre to your marker.
map.setCenter(markerlatlng);
I've checked your code.
Please check this css that apply to the page you've tested. If your problem's about the CSS.
You can use firebug to test the css.
<div id='map-canvas' style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>
and your code it self, it run as normal. and if you want to centered the map based on a marker or infowindow. you can use map.setCenter(map);
as for infowindow you can use position in your opts.
for detail information and references please read this.
Getting stuck on Google Maps
Using ColdFusion - I am populating a list of Arena's...
I want a drop down of the maps if they have one - and link to add map. Links to populate the map and mark it work fine.
When I have multiple entries - I don't get multiple maps - only get map showing of last result.
I've tried some other coding I have used in past - but still no luck with multiple maps - so starting with this easier looking javascript.
Any help is appreciated. Deleting old code - going to what is currently working - just not showing markers
<img src="../images/gps1.png" height=25 border=0 alt="Show Map" onclick="javascript:showElement('g#aid#')">
Also - when I use style="display:none;" with the Google Map Div:
<div id="g#aid#" style="width: 600px; height: 300px;" style="display:none;"></div>
the drop down map is buggered and not centered. Without it - it closes and opens just fine - but is always defaulting to open.
As suggested - Here is Javascript output...
Here is output below for 2 results... Only last one shows map..
Below is some progress - starting at Google API - This is where I'm at...
There is a body onload to make this work...
All maps are showing properly... even added another... Just not getting markers...
I have tried Google Marker code... No luck yet... So just going to code that is displaying maps properly...
Just need to figure map marker out...
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<cfoutput query=arena">
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(#arena.agpslat#,#arena.agpslong#),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('g#arena.aid#'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="g#arena.aid#" style="width: 600px; height: 300px;"></div>
</cfoutput>
Adding this: Does not get me a marker...
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: '#arena.arename#'
});
The problem is you're calling the JS file and defining an identically-named function within your query loop. You need to move this stuff out of your query loop so you only call the file and create the function once.
So instead of having your initialise function recreated each time within the loop, move that out of the loop. And instead have the call to that function from within the loop, passing the different lat/lng values, div ID's and names into it each time.
Get rid of any existing calls to your initialize functions from the body tag and just use the google event listeners for when the window loads, passing different parameters each time to initialize.
Something like the following:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var arenas = []; // array of arenas, to be populated later within the query loop
function initialize() {
var intArena, myLatlng, mapOptions, map, marker;
// loop over all the arenas, creating maps and markers for each
for (intArena = 0; intArena < arenas.length; intArena++) {
myLatlng = new google.maps.LatLng(arenas[intArena].lat, arenas[intArena].lng);
mapOptions = {
zoom: 11,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById(arenas[intArena].id), mapOptions);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: arenas[intArena].name
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<cfoutput query="arena">
<cfif arena.agpslat is not "" and arena.agpslong is not "">
<script>
// add struct of arena data to the array for use later on in the initialize function
arenas.push({
lat: #arena.agpslat#,
lng: #arena.agpslong#,
id: 'g#arena.aid#',
name: '#JsStringFormat(arena.arenaname)#'
});
</script>
<div id="g#arena.aid#" style="width: 600px; height: 300px;"></div>
</cfif>
<div align=center>g#arena.aid#<br><b>[ <font color=cc3300>Change/Add Using Map Function</font> ]</b><br></div>
</cfoutput>
Also please note I've prefixed the references to your query columns with the query name. It's almost always a good idea to correctly scope all your variables.
Got... Thx for suggestions all...
Needs a
<body onload="initialize()">
ColdFusion Coding - used the variable to rename the function and mapoption - so they are always different.
<cfoutput query=arena>
<cfif arena.agpslat is not "" and arena.agpslong is not "">
<script type="text/javascript">
function initialize() {
var #arena.aid#Latlng = new google.maps.LatLng(#arena.agpslat#,#arena.agpslong#);
var #arena.aid#Options = {
zoom: 15,
center: #arena.aid#Latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("g#arena.aid#"), #arena.aid#Options);
var marker = new google.maps.Marker({
position: #arena.aid#Latlng,
map: map,
title: '#arena.arenaname#'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="g#arena.aid#" style="width: 600px; height: 300px;"></div>
<div align=center>g#arena.aid#<br><b>[ <font color=cc3300>Change/Add Using Map Function</font> ]</b><br></div>
</cfif>
</cfoutput>