how would I go about adding additional markers to this set up? There are currently three and I've been messing around with it, but I'm not sure how to continue adding markers to it
I've been trying things on this JS Bin as well http://jsbin.com/agemuw/2/edit but haven't got it working
JS:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var locations = [
[
"850 Boylston Street",
"Chestnut Hill, MA 02467",
"42.326435",
"-71.149499"
],
[
"Subway Brookline Village",
"Green Line, D",
"42.33279",
"-71.11630"
],
[
"Shuttle Brookline Village",
"10 Brookline Place",
"42.33262",
"-71.116439"
]
];
gmarkers = [];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(42.326435, -71.149499),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
function createMarker(latlng, html) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
return marker;
}
for (var i = 0; i < locations.length; i++) {
/* alert("location:"+
locations[i][0]+":"+locations[i][2]+","+locations[i][3]);
*/
gmarkers[locations[i][0]]=
createMarker(new google.maps.LatLng(locations[i][2], locations[i][3]), locations[i][0]
+ "<br>" + locations[i][1]);
}
/*
$(function() {
$('#locations h3 a').each(function() {
$(this).on('click', function() {
google.maps.event.trigger(marker, 'click');
})
});
});
*/
});//]]>
html:
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<div id="locations">
<h3><a href="javascript:google.maps.event.trigger(gmarkers['850 Boylston
Street'],'click');">850 Boylston Street</a></h3>
<p>Arbitrary content about 1</p>
<h3><a href="javascript:google.maps.event.trigger(gmarkers['Subway Brookline
Village'],'click');">Brookline Village T Stop</a></h3>
<p>Arbitrary content about 2</p>
<h3><a href="javascript:google.maps.event.trigger(gmarkers['Shuttle Brookline
Village'],'click');">Shuttle - 10 Brookline Place</a></h3>
<p>Arbitrary content about 3</p>
</div>
</body>
you have a Javascript error
after the 3rd location you are missing a comma , after the square bracket ]
///....snip
"10 Brookline Place",
"42.33262",
"-71.116439"
], //right here
[
"Subway Chestnut Hill",
"Green Line, D",
///...snip
EDIT
adding custom markers to the map
Add the icon property like below - easy way is to just put a url in - hard way if you want to define shadows and anchor points is to build one - see the Google Maps API for the in depth stuff
var marker = new google.maps.Marker({
icon : "http://urlofmymarker.png", //comma is important
position: latlng,
map: map
});
Related
I am using the google maps API and I am displaying polygons on a map using a GeoJSON file. When the user presses inside the polygon, I would like an InfoWindow to appear and display data that is stored in the properties. Seems easy enough but when I am clicking on the polygons, nothing is popping up. Can anyone explain what I am doing wrong?
Below is what I am currently attempting:
map.data.loadGeoJson('plant_bounds_2011.json');
map.data.setStyle({
fillColor: 'red',
strokeWeight: 1
});
var infowindow = new google.maps.InfoWindow({
content: "hello"
});
map.data.addListener('click', function(event) {
let id = event.feature.getProperty('ID');
let name = event.feature.getProperty('HORZ_ORG');
let html = id + " " + name;
infowindow.setContent(html); // show the html variable in the infowindow
infowindow.setPosition(event.feature.getGeometry().get()); // anchor the infowindow at the marker
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)}); // move the infowindow up slightly to the top of the marker icon
infowindow.open(map);
});
There is a javascript error with the posted code: Uncaught TypeError: event.feature.getGeometry(...).get is not a function on the line:
infowindow.setPosition(event.feature.getGeometry().get()); // anchor the infowindow at the marker`
A Data.Polygon geometry doesn't have a .get() method. It has a .getArray() method (which returns an array of LineStrings)
One location to place the InfoWindow at would be the point clicked (which is in the polygon):
infowindow.setPosition(event.latLng);
(if you want to either add an fixed point for the infowindow to the GeoJson or you want to compute a fixed point from the polygon you can do that as well)
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
zoom: 4,
center: {
lat: -28,
lng: 137
},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json');
map.data.setStyle({
fillColor: 'red',
strokeWeight: 1
});
var infowindow = new google.maps.InfoWindow({
content: "hello"
});
map.data.addListener('click', function(event) {
let id = event.feature.getProperty('ID');
let name = event.feature.getProperty('HORZ_ORG');
if (typeof id == "undefined") id = event.feature.getProperty('letter');
if (typeof name == "undefined") name = event.feature.getProperty('color');
let html = id + " " + name;
infowindow.setContent(html); // show the html variable in the infowindow
infowindow.setPosition(event.latLng);
infowindow.setOptions({
pixelOffset: new google.maps.Size(0, 0)
}); // move the infowindow up slightly to the top of the marker icon
infowindow.open(map);
});
}
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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
I am new to this forum (this is my first post) and a beginner in using google map with javascript. I hope I apologize if the question is silly.
I have an arrangement with several cities and want to focus the map according to the result of a random number. I'm using the attached code, but does not work me. Can anyone see what I am doing wrong? Thank you.
<script>
var myrand=0
function initialize() {
var i;
var Locations = [
{
lat: 40.7127837,
lon: -74.00594130000002,
title: "New york",
description: "I'm number 1"
},
{
lat: 23.634501,
lon: -102.55278399999997,
title: "Mexico",
description: "I'm number 2"
},
{
lat: 36.778261,
lon: -119.41793239999998,
title: "California",
description: "I'm number 3"
}
];
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(30.011902,-98.48424649999998),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
var infowindow = new google.maps.InfoWindow({
content: ''
});
// loop over our array
for (i = 0; i < Locations.length; i++) {
// create a marker
var marker = new google.maps.Marker({
title: Locations[i].title,
position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon),
map: map
});
// add an event listener for this marker
bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].description + "</p>");
//bindInfoWindow(marker, map, infowindow, Locations[i].description);
}
}
function bindInfoWindow(marker, map, infowindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
//alert("seleccionado el "+html);
});
}
function aleatorio(min,max)
{
myrand = Math.floor(Math.random()*(max-min+1)+min);
alert('salió '+ myrand);
map.setCenter({lat: Locations[myrand].lat, lng: Locations[myrand].lon});
return Math.floor(Math.random()*(max-min+1)+min);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
You have typos in your code:
the random number function in javascript is Math.random, not Math.myrandom.
the function aleatorio depends on the array Locations being in scope. Currently that array is local to the initialize function. You either need to move aleatorio inside the initialize function or move the Locations array into the global namespace.
proof of concept fiddle
code snippet:
var myrand = 0
function initialize() {
var i;
var Locations = [{
lat: 40.7127837,
lon: -74.00594130000002,
title: "New york",
description: "I'm number 1"
}, {
lat: 23.634501,
lon: -102.55278399999997,
title: "Mexico",
description: "I'm number 2"
}, {
lat: 36.778261,
lon: -119.41793239999998,
title: "California",
description: "I'm number 3"
}];
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(30.011902, -98.48424649999998),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
var infowindow = new google.maps.InfoWindow({
content: ''
});
// loop over our array
for (i = 0; i < Locations.length; i++) {
// create a marker
var marker = new google.maps.Marker({
title: Locations[i].title,
position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon),
map: map
});
// add an event listener for this marker
bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].description + "</p>");
}
aleatorio(0, 2);
function aleatorio(min, max) {
myrand = Math.floor(Math.random() * (max - min + 1) + min);
map.setCenter({
lat: Locations[myrand].lat,
lng: Locations[myrand].lon
});
return Math.floor(Math.random() * (max - min + 1) + min);
}
}
function bindInfoWindow(marker, map, infowindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
//alert("seleccionado el "+html);
});
}
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>
<div id="map-canvas"></div>
I have a simple test site to show google map here:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places,geometry"></script>
<script src="js/GoogleMap/GoogleMap_thread_view.js"></script>
<link href="js/GoogleMap/GoogleMap.css" rel="stylesheet" />
<script type="text/javascript">$(document).ready(function () {
$("#googlemap").GoogleMap({addr: "105K Ho Thi Ky Phuong 1 Quan 10 Ho Chi Minh", lat: 43.37049234, lng: 30.3480382});
/*var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('googlemap'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});*/
});</script>
</head>
<body style="width: 1000px; height: 600px;">
<div id="googlemap" style="width: 1000px; height: 600px; ">abc</div>
</body>
</html>
The page just shows grey div without map.
I searched around on this site but nothing works (resize window event, overflow: visible, width: 100% ... etc ...)
The thing is when I uncomment the Google's sample code, it works. So there must be something wrong with my script, file GoogleMap_thread_view.js
(function ($) {
var map, place, myMarker;
$.widget('4phuong.GoogleMap', {
options: {
addr: 'unknown',
lat: 0,
lng: 0,
zoom: 2
},
_create: function () {
var $widget = this;
$widget.element.children().hide();
$widget._$container = $('<div class="googlemap-container"><div class="map-canvas"></div></div>');
$widget.element.append($widget._$container);
var mapOptions = {
center: new google.maps.LatLng($widget.options.lat, $widget.options.lng),
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_BOTTOM
},
mapTypeControl: false,
streetViewControl: false
};
map = new google.maps.Map(document.getElementsByClassName('map-canvas')[0], mapOptions);
myMarker = new google.maps.Marker({
map: map,
title: $widget.options.addr,
position: new google.maps.LatLng($widget.options.lat, $widget.options.lng)
});
},
destroy: function () {
this._$container.remove();
$.Widget.prototype.destroy.apply(this, arguments);
this.element.show();
},
control: function () {
return this._$control;
}
});
}(jQuery));
Could someone please tell me where I am wrong?
I know the reason. It's because I didn't give value to the field "zoom" when creating map. It should look like below
var mapOptions = {
center: new google.maps.LatLng($widget.options.lat, $widget.options.lng),
zoom: $widget.options.zoom,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_BOTTOM
},
mapTypeControl: false,
streetViewControl: false
};
It's really stupid as Google should make default value for it.
I have been trying to implement markerclusterer into my website for the past few weeks and everything I have tried has failed. I have no experience with code at all so everything I've been doing is trial and error.
The website I'm trying to add markerclusterer to is rfmaps.com.au.
I'm unsure as to what I'm doing wrong, and what needs to be fixed and really just need some good advice and help.
Here is the html code that I've been trying to get working. This code is simply all the bits and pieces I've been able to find from forums, all stuck together, and slightly edited (what I could figure out from help from forums)
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-25, 133),
zoom: 5,
mapTypeId: google.maps.MapTypeId.HYBRID
});
for (var i = 0; i < 1000; ++i) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
var marker = new google.maps.Marker({
position: latLng,
draggable: true,
icon: markerImage
});
markers.push(marker);
}
var map = new google.maps.Map(document.getElementById("map"), options);
var mc = new MarkerClusterer(map);
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'col2'",
from: '1UxncvVQSGcSvuN3t686sNuDQUsn8vQ6mws3zsvk'
},
map: map,
styleId: 4,
templateId: 1
});
}
function changeMapl0() {
var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
layerl0.setOptions({
query: {
select: "'col2'",
from: '1UxncvVQSGcSvuN3t686sNuDQUsn8vQ6mws3zsvk',
where: "'Location' CONTAINS IGNORING CASE '" + searchString + "'"
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label>Location</label><input type="text" id="search-string-l0">
<input type="button" onClick="changeMapl0()" value="Search">
</div>
</body>
</html>
I think you have not added the 'map' object while creating the markers inside the map.
This is your code:
var marker = new google.maps.Marker({
position: latLng,
draggable: true,
icon: markerImage
});
Please add map: map while generating your markers, like this:
var marker = new google.maps.Marker({
map: map,
position: latLng,
draggable: true,
icon: markerImage
});
Regarding marker cluster you need to add this js file- markerclusterer.js
markerCluster = new MarkerClusterer(map, marker);
I have a custom google map which i have added styling to, its an event map with dynamic markers, i have got the map working where it loads all the dynamic markers and info, on my page there are results underneath the map, i would like to be able to click on a link in the results which will open the relevant infowindow on the map. I have been using Raymond Camdens demo which is from this article, i cannot get the last part to work with the links on the page(i had to take the geocoding part of the script out as i dont need it to geocode addresses, im using coordinates.)
Here is my code:
var map;
var lastinfowindow;
function initialize() {
// Create an array of styles.
var styles = [
{
stylers: [
{ hue: "#0b9cc1" },
{ saturation: -20 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "administrative.country",
elementType: "labels",
stylers: [
{ visibility: "on" }
]
},
{ featureType: "water",
elementType: "geometry",
stylers: [ { visibility: "on" }, { lightness: -10 }] },
{ featureType: "poi",
stylers: [ { visibility: "on" } ] }
];
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var latlng = new google.maps.LatLng(38, -90);
var mapOptions = {
zoom: 3,
center: latlng,
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var image = 'sp-mark.png';
latLng = new google.maps.LatLng ('23.00593', '12.65287');
var marker1 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 1 - 38',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 1</h3><p>Location: here</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 38;
marker.infowindow = infowindow;
markers[markers.length] = marker;
latLng = new google.maps.LatLng ('57.19173', '-1.7083');
var marker2 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 2 - 30',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 2</h3><p>Location: here</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 30;
marker.infowindow = infowindow;
markers[markers.length] = marker;
latLng = new google.maps.LatLng ('56.98083', '1.30056');
var marker3 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 3 - 32',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 3</h3><p>Location: here, Ibiza</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 32;
marker.infowindow = infowindow;
markers[markers.length] = marker;
latLng = new google.maps.LatLng ('58.96', '1.39861');
var marker4 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 4 - 41',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 4</h3><p>Location: here</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 41;
marker.infowindow = infowindow;
markers[markers.length] = marker;
latLng = new google.maps.LatLng ('-43.92528', '28.42389');
var marker5 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 5 - 47',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 5</h3><p>Location: Here</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 47;
marker.infowindow = infowindow;
markers[markers.length] = marker;
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
$(".order").click(function() {
var thisgig = $(this).data("gigid");
for(var i=0; i<markers.length; i++) {
if(markers[i].gigid == thisgig) {
console.log("found my match");
//get the latlong
if(lastinfowindow instanceof google.maps.InfoWindow) lastinfowindow.close();
console.dir(markers[i]);
map.panTo(markers[i].getPosition());
markers[i].infowindow.open(map, markers[i]);
lastinfowindow = markers[i].infowindow;
}
}
});
}
here is the body section where the links will go:
<body onload="initialize()">
<div id="map_canvas"></div>
<div id="orders">
<p class="order" data-gigid="38">
<b>Order 38</b><br/>
Event 1
</p>
<p class="order" data-gigid="30">
<b>Order 30</b><br/>
Event 2
</p>
<p class="order" data-gigid="32">
<b>Order 32</b><br/>
Event 3
</p>
<p class="order" data-gigid="41">
<b>Order 41</b><br/>
Event 4
</p>
<p class="order" data-gigid="47">
<b>Order 47</b><br/>
Event 5
</p>
</div>
</body>
Please can someone help me with this issue.
Thanks
Google maps will generally fail to load if you have any javascript errors in your page. You have many.
You have a syntax error here:
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 4</h3><p>Location: here</p>
});
Should be:
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 4</h3><p>Location: here</p>"
});
LatLng takes two floats, not two strings:
latLng = new google.maps.LatLng ('23.00593', '12.65287');
Javascript is case-sensitive. So when you say:
latLng = new google.maps.LatLng ('23.00593', '12.65287');
var marker1 = new google.maps.Marker({
...
position: LatLng
});
It doesn't recognise LatLng because your variable was called latLng
The problem here:
marker.gigid = 38;
is that you don't have a variable called marker; you have a variable called marker1:
var marker1 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 1 - 38',
icon:image
});
For completeness, here's how one of your markers should be done (there are better ways, but this should work):
latLng = new google.maps.LatLng (23.00593,12.65287);
var marker1 = new google.maps.Marker({
map: map,
position: latLng ,
title: 'Event 1 - 38',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 1</h3><p>Location: here</p>"
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow.open(map,marker1);
});
marker1.gigid = 38;
marker1.infowindow = infowindow;
markers[markers.length] = marker1;