Im building a site for a friend of mine and im having a hell of time trying to get the map marker to show up, I gotta admit im not much for java coding but Ive done my share of it. Im a designer and 3d motion graphics artist.
Im currently working on this template in Dreamweaver CC and I chose it cause thats how Ive been constructing sites for years.
So he gave me a template that he wanted me to use 427_timeline (its A freebie).
The modified version of this template can be seen here http://johnnybobs3ddesignz.com/
My first time but works the same pretty much. Heres My code, if someone could help me Id appreciate that so much, it would be mighty groovy dude ;)
<script>
function initialize()
{
var mapOptions = {
center: new google.maps.LatLng(34.073809, -118.323371),
zoom: 15,
scrollwheel: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("templatemo-map")
,mapOptions);
var location = new google.maps.LatLng(34.073809, -118.323371);
var contentString = '<h2>Runyon Investment & Realty</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: mylatLng,
title: 'Runyon Investment & Realty',
visible: true
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'resize', function()
{
map.setCenter(center);
});
</script>
I get two javascript errors with your code as is:
Uncaught ReferenceError: mylatLng is not defined
Uncaught ReferenceError: map is not defined
Because mylatLng is not defined in your code (you define location) and map is local to your initialize function
Working code snippet:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(34.073809, -118.323371),
zoom: 15,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("templatemo-map"), mapOptions);
var location = new google.maps.LatLng(34.073809, -118.323371);
var contentString = '<h2>Runyon Investment & Realty</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: location,
title: 'Runyon Investment & Realty',
visible: true
});
marker.setMap(map);
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#templatemo-map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="templatemo-map" style="border: 2px solid #3872ac;"></div>
Just use this link
https://developers.google.com/maps/documentation/javascript/
to get desired informations.
for example use the following snippet.
They use the
map - option
in the init of the marker. Just try that in your code too.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
The title says the question. Now, is it good to use a counter that starts from zero and when it is 1 or more I wouldn't add a marker. Or should I try to make it such that when someone clicks on the map the old marker disappears and the new one is assigned? The following code is what I have so far.. Thanks for any kind of help.
Also, how can I access the longitude and latitude in the next page?
And about capturing the map into a blob, is it a different topic or it is also related?
Thanks
<!DOCTYPE html>
<html>
<head>
<title>Accessing arguments in UI events</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882,131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize();">
<div id="map-canvas"></div>
</body>
</html>
I would say its up to you and your application later how you handle the markers.
You can implement a counter, create a dragable marker, depends how the app will work later on.
How will your next page look like?
One simple way could be something like this:
I use addListenerOnce to call the placeMarker function only one time and during this i write the latitude and longitude in a form field.
now you can add action parameters plus a submit button and you can access the values on your next page.
Thats the fiddle + code:
http://jsfiddle.net/iambnz/LcKy2/
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882,131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListenerOnce(map, 'click', function(e) {
placeMarker(e.latLng, map);
// alert(e.latLng.toString());
document.getElementById("latitude").value = e.latLng.lat();
document.getElementById("longitude").value = e.latLng.lng();
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
I have a question that may sound silly. I wrote javascript code to integrate APEX. The purpose of this part is to show Google map according to address and have infowindow. The infowindow will show name as content, and it is a link which leads to the detail report of that guy. Problem is: infowindow works well for most of names in database, but shows no content (the link) with certain name. I do not find any special for these names, such as "Robert Allan Lockett". Here I attach code as follows:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
function initialize() {
var myOptions = { zoom: 18, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var markerBounds = new google.maps.LatLngBounds();
var point=new google.maps.LatLng(&P3006_TF_GEOCODING.);
markerBounds.extend(point);
map.fitBounds(markerBounds);
var listener = google.maps.event.addListener(map, "idle", function() {
map.setZoom(map.getZoom()-4);
google.maps.event.removeListener(listener);
});
var marker;
marker = new google.maps.Marker({ position: new google.maps.LatLng(&P3006_TF_GEOCODING.), map: map });
var infowindow = new google.maps.InfoWindow({ content: "&P3006_H_OFFENDER_NAME."});
var current_parameter ="&APP_ID.:216:&SESSION.::NO::P216_DETAIL:"+"&P3006_H_OFFENDER_ID.";
var my_URL="http://lsg-solutions.com:9704/apex/f?p="+encodeURIComponent(current_parameter);
infowindow.setContent('<a href='+my_URL+'>&P3006_H_OFFENDER_NAME.</a>');
google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker);});
}
</script>
I'm trying to create my own map using google map.
I want to create a list showing all existing markers on the map. When user clicks on one button/link from the list, the corresponding marker will be centered and its infoWindow will be displayed, i.e. the same effects as the user clicks on the marker.
I have tried a number of solutions, but I could get none of them working. Can anyone please offer me a simple solution for this? Thanks in advance!
My existing code is as follows,
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(19.642588,151.171875),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
});
var infoWindow = new google.maps.InfoWindow;
var onMarkerClick1 = function() {
var marker = this;
infoWindow.setContent('content of infowindow');
infoWindow.open(map, marker);
};
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(19.642588,151.171875),
});
google.maps.event.addListener(marker1, 'click', onMarkerClick1);
this won't center the map on it, but will move so the whole balloon is visible
http://econym.org.uk/gmap/example_map2.htm
as simple as i can get it. yes, please use GMarker etc.
don't forget this in the header <script src="http://maps.google.com/maps?...
you'll need html that includes
<div id="map" style="width: 550px; height: 450px"></div>
<div id="side_bar">Marker One<br /></div>
and then javascript
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(19.642588, 151.171875), 8);
var point = new GLatLng(19.642588, 151.171875);
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml("this marker has been clicked");
});
function myclick(i) {
GEvent.trigger(marker, "click");
}
map.addOverlay(marker);
There's got to be a way to add a listener to ALL MARKERS, currently I'm adding a listener to each one using a loop which feels really wrong...
This feels wrong:
google.maps.event.addListener(unique_marker_id, 'click', function(){
//do something with this marker...
});
In both Marker and MarkerWithLabel case, you might just as well use the this keyword to refer the object to which the event handler is attached:
google.maps.event.addListener(marker, 'click', function () {
// do something with this marker ...
this.setTitle('I am clicked');
});
this here is referring to the particular marker object.
You need to add the listener to each marker, but you can make it easy by e.g. defining a function like
function createMarker(pos, t) {
var marker = new google.maps.Marker({
position: pos,
map: m, // google.maps.Map
title: t
});
google.maps.event.addListener(marker, 'click', function() {
alert("I am marker " + marker.title);
});
return marker;
}
and call it appropriately:
var m1 = createMarker(new google.maps.LatLng(...), "m1");
var m2 = createMarker(new google.maps.LatLng(...), "m2");
or in a loop, etc.
If you're using GoogleMaps v3.16 or later, you can add the event handler to the whole map.data layer.
var map = new google.maps.Map(document.getElementById("map-canvas"), options);
map.data.loadGeoJson('http://yourserver.com/path/to/geojson.json');
map.data.addListener('click', function(e) {
// this - instance of the layer object, in this case - map.data
// e.feature - instance of the feature object that initiated the event
// e.latLng - the position of the event
});
see: https://developers.google.com/maps/documentation/javascript/examples/layer-data-event
I managed to do this using FusionTablesLayer. It's a bit of work setting everything up correctly, but once you're done, it's ultra-fast, even with thousands of markers.
You basically create a public table in Google Docs and query it from your webpage. The map is pre-generated on Googles' servers, which is why it performs so well.
A complete demo page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
html, body, #map_canvas
{
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize()
{
var denmark = new google.maps.LatLng(56.010666, 10.936890);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: denmark,
zoom: 7,
mapTypeId: 'roadmap'
});
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Coordinates',
from: '1234567'
}
});
layer.setMap(map);
google.maps.event.addListener(layer, 'click', function (event) {
alert('Hello World!'); });
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Check out this article for more info, "Too Many Markers!" by Luke Mahe and Chris Broadfoot from the Google Geo APIs Team.
I managed to get an answer here:
Google Maps and Their Markers
and a demo here:
http://jsfiddle.net/salman/bhSmf/
This simplest way is this:
google.maps.event.addListener(marker, 'click', function() {
var marker = this;
alert("Tite for this marker is:" + this.title);
});
To Expand on Jiri answer purley for those searching who also wish to add a custom label etc. In the spirit of Jiri post, in shorthand version:
var m1 = createMarker({lat: -25.363, lng: 131.044}, "m1", "<div id=\"content\"><div id=\"siteNotice\"></div> <h1 id=\"firstHeading\" class=\"firstHeading\">m1</h1> <div id=\"bodyContent\">Some info</div> </div>");
function createMarker(pos, t, d) {
var marker = new google.maps.Marker({
position: pos,
map: map,
title: t
});
google.maps.event.addListener(marker,"click", function() {
alert("I am marker " + marker.title);
new google.maps.InfoWindow({ content: d }).open(map, marker);
});
return marker;
}
Remove alert, just there to show the action etc. as with Jiri's info, you can add m2, m3 etc. I thought this simply finished things off.
/* Note: I have a set of data, and it is named by the variable data.
* The variable data is an array
*/
//Here I get the length of the data
var dataLength = data.length;
//Then I iterate through all my pieces of data here
//NOTICE THAT THE KEYWORD let IS SO IMPORTANT HERE
for(let markerIterator = 0; markerIterator < dataLength; markerIterator++) {
/* This creates a new google maps marker based on my data's latitude and
* longitude
*/
var marker = new google.maps.Marker({
position: { lat: data[markerIterator].latitude, lng:
data[markerIterator].longitude },
map: map
});
google.maps.event.addListener(marker, 'click', function () {
/* This will spit out the unique markerIterator value for each marker when
* clicked. It is a unique value because I defined markerIterator with the
* keyword let!
*/
console.log(markerIterator);
// Use the keyword this to refer to each unique marker, for example:
map.setCenter(this.getPosition());
});
}
What i've Done is, when adding new marker on map and before pushing it into markers = [] array, i just add listener to it marker.addListener('click', () => { // Do Something here});
Complete Code:
// Adds a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
icon: {
url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
},
animation: google.maps.Animation.DROP,
map: map
});
marker.addListener("click",
() => {
console.log("Marker Click Event Fired!");
});
markers.push(marker);
}
LINK i followed!
It was really hard for me to find a specific answer to my need. But this one is working now and everywhere for me!
Regards! :)
var map;
function initialize_map(locations) {
var options = {
zoom: 8,
center: new google.maps.LatLng(59.933688,30.331879),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), options);
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][lat], locations[i][lng]),
map: map,
title: locations[i][title]
});
set_event(marker);
bounds.extend(marker.position);
}
map.fitBounds(bounds);
}
function set_event(marker) {
google.maps.event.addListener(marker, 'click', function() {
// do something with this marker ...
});
}
You can do something like this:
function setMarkers(map, locations) {
var image = ['circle_orange.png','circle_blue .png'];
for (var i = 0; i < locations.length; i++) {
var stations = locations[i];
var myLatLng = new google.maps.LatLng(stations[1], stations[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image[stations[3]],
title: stations[0],
zIndex: stations[3],
optimized: false
});
var infowindow = new google.maps.InfoWindow({
content: "No data available"
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent("We can include any station information, for example: Lat/Long: "+ stations[1]+" , "+stations[2]);
infowindow.open(map, this);
});
}
}