So I have a list of baseball teams I want to map that each have a custom icon and text window. Since my primary zoom level is at 4, most of the icons, especially in the northeast are very congested.
part of the code is below, sorry for the length. It's what I know to do right now. Had tried adding the markercluster variable, but wasn't sure how to add each team into it, that or make multiple clusters based on the teams I am having issues with.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBblZOVoLgeHeWlv_zt5dR6dlQbRHMUPKo&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.8282, -98.5795),
zoom: 4
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var padres = 'http://s7d2.scene7.com/is/image/Fathead/lgo_mlb_san_diego_padres?layer=comp&fit=constrain&hei=50&wid=200&fmt=png-alpha&qlt=95,0&op_sharpen=1&resMode=bicub&op_usm=0.0,0.0,0,0&iccEmbed=0';
var padresLatLng = new google.maps.LatLng(32.7073, -117.1566);
var padresmarker = new google.maps.Marker({
position: padresLatLng,
map: map,
icon: padres,
title: 'San Diego Padres'
});
var padresString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">San Diego Padres</h1>'+
'<div id="bodyContent">'+
'</div>'+
'</div>';
var padreswindow= new google.maps.InfoWindow({
content: padresString
});
google.maps.event.addListener(padresmarker, 'click', function() {
padreswindow.open(map, padresmarker);
});
var dodgers = 'http://i.cdn.turner.com/si/.element/img/4.0/global/baseball/mlb/logos/dodgers_50.png';
var dodgersLatLng = new google.maps.LatLng(34.0736, -118.2400);
var dodgersmarker = new google.maps.Marker({
position: dodgersLatLng,
map: map,
icon: dodgers,
title: 'Los Angeles Dodgers'
});
var dodgersString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Los Angeles Dodgers</h1>'+
'<div id="bodyContent">'+
'</div>'+
'</div>';
var dodgerswindow= new google.maps.InfoWindow({
content: dodgersString
});
google.maps.event.addListener(dodgersmarker, 'click', function() {
dodgerswindow.open(map, dodgersmarker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
As minimum you have to include markerclusterer.js library and to add
var mc = new MarkerClusterer(map, [dodgersmarker, padresmarker]);
at the end of initialize() function. Marker Clusterer expects as parameters a map, an array of markers and options as optional parameters.
Related
I'm having a problem with my info window of my markers in my google maps. The markers show correctly but whenever you click on a marker it only shows the last marker set's info(above the last marker). Here is my code:
<?php
//Open connection to database to fetch markers from maps table:
require_once("config.php"); // get config
$con = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD); // connect to db
if (!$con) die('Could not connect: ' . mysql_error());
mysql_select_db("drpayne_test", $con); // select db
$q = "SELECT * FROM maps"; // form query
$result = mysql_query($q); // run query
// output the start of the HTML Map Page
echo <<<END
<!DOCTYPE html>
<html>
<head>
<title>Marker database viewer</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var marker=new Array();
var infowindow=new Array();
function initialize() {
var contentString;
var mylatlng;
var latlng = new google.maps.LatLng(34.52867,-83.98645);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
END;
// loop through the rows of map markers
while($row = mysql_fetch_array($result))
echo <<<END
// Marker Code Start
contentString = "<h1> {$row['title']} </h1><p> {$row['descr']} </p>";
mylatlng = new google.maps.LatLng({$row['lat']},{$row['lng']});
infowindow[{$row['id']}] = new google.maps.InfoWindow({
content: contentString
});
marker[{$row['id']}] = new google.maps.Marker({
position: mylatlng,
map: map,
title:" {$row['geo']} "
});
google.maps.event.addListener(marker[{$row['id']}], 'click', function() {
infowindow[{$row['id']}].open(map,marker[{$row['id']}]);
});
// Marker Code End
END;
// Output the end of the HTML page
echo <<<END
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
END;
?>
You have a closure problem, I had the same problem some times ago and I get an answer here
Just adapt it to your case
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 tried to implement the last code at
https://developers.google.com/maps/articles/phpsqlinfo_v3
I want to have a cancel and close button.
So, i modified the code and uploaded it to
http://adsany.com/testclose.htm
(view source)
when i click on the map, a marker appears,
when I click on the marker, infowindow appears.
when I click on the cancel and close button, it closes the window, but a new marker appears.
So, i want to close the infowindow without creating a new marker.
Please suggest.
Thanks.
I hope this link will solve your Problem :-
http://gmaps-samples-v3.googlecode.com/svn/trunk/single-infowindow/single-infowindow.html.
<html>
<head>
<title>Single Info Windows</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(37.789879, -122.390442),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow;
var onMarkerClick = function() {
var marker = this;
var latLng = marker.getPosition();
infoWindow.setContent('<h3>Marker position is:</h3>' +
latLng.lat() + ', ' + latLng.lng());
infoWindow.open(map, marker);
};
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(37.789879, -122.390442)
});
var marker2 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(37.787814,-122.40764)
});
var marker3 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(37.767568,-122.391665)
});
google.maps.event.addListener(marker1, 'click', onMarkerClick);
google.maps.event.addListener(marker2, 'click', onMarkerClick);
google.maps.event.addListener(marker3, 'click', onMarkerClick);
});
</script>
<style type="text/css">
body {
font-family: sans-serif;
}
#map {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<h2>Demonstrates how to share a single info window on a map.</h2>
<ol>
<li>Click a marker to open a single info window containing the marker's position.</li>
<li>Close the opened info window by clicking anywhere on the map.</li>
</ol>
<div id="map"></div>
</body>
</html>
I am using google-maps-utility-library-v3.
I am trying to zoom in and zoom out, if the dot is not in screen anymore, I want to see count 0.
But it doesn't work. If I comment out mgr.addMarkers(markers,5); It works.... But it will always be 0 because no maker is managed by the manager.
Could someone tell me why?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=??????????????&sensor=false">
</script>
<script type="text/javascript" src="downloadxml.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/src/markermanager.js"></script>
<script type="text/javascript">
var map = null;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(42.35428, -71.05525),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map'), myOptions);
//hard code a marker
var lat = 42.35428;
var lng = -71.05525;
var point = new google.maps.LatLng(lat,lng);
var html = "I am a hard-coded dot";
var marker = new google.maps.Marker({
map: map,
position: point,
icon: "http://www.google.com/mapfiles/arrow.png",
shadow: "http://www.google.com/mapfiles/arrowshadow.png"
});
var markers = [];
markers.push(marker);
var mgr = new MarkerManager(map);
mgr.addMarkers(markers,5);
mgr.refresh();
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoomLevel = map.getZoom();
var count = mgr.getMarkerCount(zoomLevel);
document.getElementById("Listing").innerHTML += count + "<BR>";
});
}
</script>
You appear to be using the MarkerManager before it is fully initialized. Here's an updated section of your code to fix the issue:
var markers = [];
markers.push(marker);
var mgr = new MarkerManager(map);
google.maps.event.addListenerOnce(mgr, 'loaded', function(){
mgr.addMarkers(markers, 5);
mgr.refresh();
});
See this example as reference: http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/docs/examples.html
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>