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>
Related
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.
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, I know Google has documentation on how to complete all of these features, but even when I add the exact coding, the map no longer shows up, or it simply does not work.
I'm completely new to development, but the project I'm trying to complete is a Game of Thrones map, where other users may visit and add a marker, name the marker ( not a simple one-character label, more like an actual name, several characters long ), and delete their marker. If someone else adds a marker, I'd like to be able to see it. And vice versa, I want everyone's markers on the map to be visible.
So far, as a first step, all I'm trying to complete right now is creating markers and making them draggable. The map shows up fine, until I add the value "draggable:true" to the markers options. even though that's what the google documentation suggests.
Here's the google documentation: https://developers.google.com/maps/documentation/javascript/markers
And here's the page i'm trying to get the project to work on:http://jamie-jabbours-fabulous-project.webflow.io/
and here's the exact code i'm using:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
draggable: true
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB55_iwgWvg1_NjoIEqqXgeQOeDBrq8p5o&callback=initMap">
</script>
</body>
</html>
I'm sure there is something very simple I'm doing wrong, but I can't see it.
Just add a comma..after map and before draggable
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
draggable: true
});
}
Watch out for syntax bugs next time :)
What I want to achieve:
I want to display a search box in google map. When a user search a location, result is displayed in map box. On the map, when a user RightClick, I want to store the marker in database.
Resource I tried to implement
storing marker to database:
https://www.sanwebe.com/2013/10/google-map-v3-editing-saving-marker-in-database
displaying search box in map
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
I tried to implement these two as one: here is my minimal code
var mapCenter = new google.maps.LatLng(27.7172, 85.3240);
var map;
google.maps.event.addDomListener(window, 'load', map_initialize);
function map_initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
center: mapCenter,
zoom: 13,
mapTypeId: 'roadmap'
});
google.maps.event.addListener(map, 'rightclick', function(event) {
create_marker(event.latLng);
});
}
function create_marker(MapPos) {
var marker = new google.maps.Marker({
position: MapPos,
map: map
});
}
#map {
height: 200px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
With this code when I right click on the map, nothing happens i.e. neither the marker shows nor any error.
The map variable needs to be accessible from your create_marker function, therefore you declared it outside of your other functions. But also inside the map_initialize function. Remove the var declaration from there and it will work.
I have edited your original question to include a MCVE which means that I removed 90% of your code to keep only what you were after: adding a marker on right click.
Please take that as a suggestion for how to write your next questions.
var mapCenter = new google.maps.LatLng(27.7172, 85.3240);
google.maps.event.addDomListener(window, 'load', map_initialize);
function map_initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: mapCenter,
zoom: 13,
mapTypeId: 'roadmap'
});
google.maps.event.addListener(map, 'rightclick', function(event) {
create_marker(event.latLng);
});
}
function create_marker(MapPos) {
var marker = new google.maps.Marker({
position: MapPos,
map: map
});
}
#map {
height: 200px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
i have multiple google map instances on my website,now there are two different google map on a same page, what happens is the first one works and other doesn't now i know the logical issue let me show you my code first
<script>
function initMap() {
var myLatLng = {lat: 43.6222102, lng:-79.6694881};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=my_key&callback=initMap"
async defer></script>
now as i defined a callback method it always initializes the method named initMap whereas what i want to do is there can be multiple google maps lets suppose initMap2 how can i load them without callback method?
To load the map without a callback, load the API synchronously/inline (without the async defer), then call your initMap function on the load event.
(Note: FYI: Google changed all their examples to using asynchronous loading to improve the load times)
(Note2: Google has added a "sample" to their documentation describing synchronous loading)
proof of concept fiddle
code snippet:
function initMap() {
var myLatLng = {
lat: 43.6222102,
lng: -79.6694881
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<!-- added 1/21/2023 to prevent:
Loading the Google Maps JavaScript API without a callback is not supported: https://developers.google.com/maps/documentation/javascript/url-params#required_parameters
-->
<script>
function dummy() {}
window.dummy=dummy;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=dummy"></script>
<div id="map"></div>