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);
Related
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 working java script Google Map Api v3 with Geocoding.
When I type for example post code in search box I can select address from list. If I will do same thing and press ENTER nothing is happening. How to modify code?
<input id="address" type="textbox">
Java script code:
var geocoder;
var map;
var marker;
function initialize(){
//MAP
var latlng = new google.maps.LatLng(51.469186, -0.361166);
var options = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), options);
//GEOCODER
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,
draggable: false
});
//CIRCLE
var circle = new google.maps.Circle({
map: map,
center: new google.maps.LatLng(51.469186, -0.361166),
fillColor: '#204617',
fillOpacity: 0.2,
strokeColor: '#6DE953',
strokeOpacity: 0.4,
strokeWeight: 2
});
circle.setRadius(10000);
}
$(document).ready(function() {
initialize();
$(function() {
$("#address").autocomplete({
//This bit uses the geocoder to fetch address values
source: function(request, response) {
geocoder.geocode( {'address': request.term }, function(results, status) {
response($.map(results, function(item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
}
}));
})
},
//This bit is executed upon selection of an address
select: function(event, ui) {
var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
marker.setPosition(location);
map.setCenter(location);
}
});
document.getElementById("address").focus();
});
});
I have try adding search button:
<input id="search" type="button" value="Search" onclick="codeAddress()">
and adding function codeAddress() to Java Script but I must have done something wrong as that didn't worked.
Working (without ENTER) jsfiddle
you can try this maybe you'll get some ideas. https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
they are also using geocode, so you can refer the code.
I'm not a 100% certain what you are doing wrong, since you did not post all the code. But this example works (I tested in FF):
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <!-- Google Maps API -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
var geocoder;
var map;
var marker;
function initialize(){
//MAP
var latlng = new google.maps.LatLng(51.469186, -0.361166);
var options = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), options);
//GEOCODER
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,
draggable: false
});
//CIRCLE
var circle = new google.maps.Circle({
map: map,
center: new google.maps.LatLng(51.469186, -0.361166),
fillColor: '#204617',
fillOpacity: 0.2,
strokeColor: '#6DE953',
strokeOpacity: 0.4,
strokeWeight: 2
});
circle.setRadius(10000);
}
</script>
<script>
$(document).ready(function() {
initialize();
$(function() {
$("#address").autocomplete({
//This bit uses the geocoder to fetch address values
source: function(request, response) {
geocoder.geocode( {'address': request.term }, function(results, status) {
response($.map(results, function(item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
}
}));
})
},
//This bit is executed upon selection of an address
select: function(event, ui) {
var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
marker.setPosition(location);
map.setCenter(location);
}
});
document.getElementById("address").focus();
});
});
</script>
<style>
/* style settings for Google map */
#map_canvas
{
width : 500px; /* map width */
height: 500px; /* map height */
}
</style>
</head>
<body onload="initialize()">
<!-- Dislay Google map here -->
<div id='map_canvas' ></div>
<input id="address" type="textbox">
</body>
</html>
Hi this is my first post here..
I have been playing around with google maps trying to make a list of campsites in France.
I have got to the point of reading an xml file of the data
Loading the map and clustering the results and it all works but very slow.
Q1 Is there a limit on the number of markers you can render even using the clusterer (there are >7000 records at the moment)
Q2
Is there anything obviously wrong with the code I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Read XML in Microsoft Browsers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false&language=en®ion=GB" type="text/javascript"></script>
<script src="scripts/markerclusterer.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/style_1024.css" />
<script type="text/javascript">
var xmlDoc;
function loadxml() {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.onreadystatechange = readXML;
xmlDoc.load("xml_files/France_all.xml");
}
function readXML() {
if (xmlDoc.readyState == 4) {
//alert("Loaded");
//set up map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(0, 0),
mapTypeControl: true,
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow({ maxWidth: 100 });
var marker, i
var markers = [];
var html = [];
var x = (xmlDoc.getElementsByTagName("placemark").length);
//for (i = 0; i < x; i++) {
for (i = 0; i < x; i++) {
//document.write(xmlDoc.documentElement.childNodes[1].firstChild.tagName) + '<br>';
desc = xmlDoc.getElementsByTagName("description")[i].text;
lat = parseFloat((xmlDoc.getElementsByTagName("latitude")[i].text));
lon = parseFloat((xmlDoc.getElementsByTagName("longitude")[i].text));
myicon = (xmlDoc.getElementsByTagName("icon")[i].text);
//create new point
var point = new google.maps.LatLng(lat, lon);
//create new marker
marker = new google.maps.Marker({
position: point,
panControl: false,
map: map,
icon: myicon
});
//increae map bounds
bounds.extend(point);
//fit to bounds
map.fitBounds(bounds);
//add reference to arrays
markers.push(marker);
html.push(desc);
//add listener
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(html[i]);
infowindow.open(map, marker);
}
})(marker, i));
//alert(i + " " + desc +" added!");
};
//var mc = new MarkerClusterer(map);
var mcOptions = {gridSize: 50, maxZoom: 15 };
var mc = new MarkerClusterer(map, markers, mcOptions);
}
}
</script>
</head>
<body onload="loadxml()">
<div style="height:100%; width:100%">
<div id="map" style="float:left; width:50%; height:100%">
<!--filled via script-->
</div>
<div style="float:left; width:50%; height:100%">
<h4>Select Region</h4>
<select>
<option value="Alsace" onclick="loadxml()">Alsace</option>
</select>
</div>
</div>
</body>
</html>
This article may help. A tile based solution (FusionTables, KmlLayer, or a server based custom map) will render more quickly than native Google Maps API v3 objects, even with clustering. You may be seeing the transfer and processing time of the xml file.
I developed many websites using the same google maps code, but this time my marker is not showing and I can't figure out why.
This is the code:
<link href="<%= Page.ResolveUrl("~/Assets/Styles/map.css") %>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initializeMap() {
var latitude = 45.483995;
var longitude = 9.181769;
var latlng = new google.maps.LatLng(latitude, longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image = '<%= Page.ResolveUrl("~/Assets/Images/Contacts/Baloon.png") %>';
var myLatLng = new google.maps.LatLng(45.4530, 9.2115);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
</script>
And this is map.css file:
#map_canvas
{
height: 300px;
width: 400px;
text-align: center;
}
Picture is correctly on server and I can open it via browser url..
Here is a link: LINK
I think the problem is simply that the coordinates you give for the marker are out of the map boundaries. You can see it if you zoom out a bit.
Here's an example using using the coordinates used to initialize the map as the marker's coordinates: http://jsfiddle.net/Dn7Rf/1/
Or rather one centering the map around the marker: http://jsfiddle.net/Dn7Rf/2/
dear professionals.
I want to make info window for each markers on google maps.
My code:
google.maps.event.addListener(marker, 'click', function() {
new google.maps.InfoWindow({content: content}).open(map, marker);
});
show infowindow only for last marker.
Please, give me example or link to tutorial.
This is a modification of my answer to this question: Maps API Javascript v3 how to load markers with a mouse click
It loads an array of markers with info windows, and displays the last one added.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>boats</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
</script>
</head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow = null;
var map = null;
function initialize() {
var washington = new google.maps.LatLng(47.7435, -122.1750);
var myOptions = {
zoom: 7,
center: washington,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
infowindow = new google.maps.InfoWindow({ content: "loading..." });
boats(map, seller);
}
var seller = [
['joe boat', 48.0350,-122.2570, 4, 'This is in good shape.'],
['bobs boat', 48.7435, -122.1750, 2, 'This is in bad shape.'],
['bubas boat', 47.3435, -122.1750, 1, 'This is in ok shape'],
['daveys boat', 47.7435, -122.1750, 3, 'dont buy this one.']
];
function boats(map, markers) {
for (var i = 0; i < markers.length; i++) {
var seller = markers[i];
var sellerLatLng = new google.maps.LatLng(seller[1], seller[2]);
var marker = new google.maps.Marker({
position: sellerLatLng,
map: map,
title: seller[0],
zIndex: seller[3],
html: seller[4]
});
var contentString = "content";
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
// display the last marker infowindow
infowindow.setContent(marker.html);
infowindow.open(map,marker);
}
</script>
<body onLoad="initialize()">
<div id="map_canvas" style="width: 450px; height: 350px;">map div</div>
</body>
</html>