I have the coordinates (Long & Lat) that I'm having PHP insert all of them but I don't know how to change the javascript to correct the over query limit error.
here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="markerclusterer.js"></script>
<script type="text/javascript">
var map;
//marker clusterer
var mc;
var mcOptions = {gridSize: 20, maxZoom: 17};
//global infowindow
var infowindow = new google.maps.InfoWindow();
//geocoder
var geocoder = new google.maps.Geocoder();
var address = new Array(<?php echo(substr($point_str, 0, -2));?>);
var content = new Array(<?php echo(substr($marker_str, 0, -2));?>);
//min and max limits for multiplier, for random numbers
//keep the range pretty small, so markers are kept close by
var min = .999999;
var max = 1.000001;
function createMarker(latlng,text) {
///get array of markers currently in cluster
var allMarkers = mc.getMarkers();
//final position for marker, could be updated if another marker already exists in same position
var finalLatLng = latlng;
//check to see if any of the existing markers match the latlng of the new marker
if (allMarkers.length != 0) {
for (i=0; i < allMarkers.length; i++) {
var existingMarker = allMarkers[i];
var pos = existingMarker.getPosition();
//if a marker already exists in the same position as this marker
if (latlng.equals(pos)) {
//update the position of the coincident marker by applying a small multipler to its coordinates
var newLat = latlng.lat() * (Math.random() * (max - min) + min);
var newLng = latlng.lng() * (Math.random() * (max - min) + min);
finalLatLng = new google.maps.LatLng(newLat,newLng);
}
}
}
var marker = new google.maps.Marker({
position: finalLatLng
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(text);
infowindow.open(map,marker);
});
return marker;
}
function geocodeAddress(address,i) {
geocoder.geocode( {'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
var marker = createMarker(results[0].geometry.location,content[i]); mc.addMarker(marker);
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function initialize(){
var options = {
zoom: 4,
center: new google.maps.LatLng(39.8282,-98.5795),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
//marker cluster
mc = new MarkerClusterer(map, [], mcOptions);
for (i=0; i<address.length; i++) {
geocodeAddress(address[i],i);
}
}
</script>
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body onload='initialize()'>
<div id="map"></div>
</body>
</html>
This is the HTML OUTPUT:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="markerclusterer.js"></script>
<script type="text/javascript">
var map;
//marker clusterer
var mc;
var mcOptions = {gridSize: 20, maxZoom: 17};
//global infowindow
var infowindow = new google.maps.InfoWindow();
//geocoder
var geocoder = new google.maps.Geocoder();
var address = new Array("42.0619,-72.2136",
"28.06,-81.9561",
"30.3375,-81.7686",
"30.3375,-81.7686",
"41.7684,-88.1366",
"28.06,-81.9561",
"40.086,-82.486",
"40.6278,-79.0896",
"39.0197,-84.5914",
"41.8119,-87.6873",
"28.06,-81.9561",
"42.8698,-85.9697",
"42.8358,-85.6644",
"41.0309,-92.4098",
"39.1024,-94.5986",
"33.6115,-84.3745",
"34.84,-115.967",
"33.0807,-81.9868",
"41.7369,-73.7411",
"41.9214,-87.8924");
var content = new Array("UnitNo1",
"UnitNo2",
"UnitNo3",
"UnitNo4",
"UnitNo5",
"UnitNo6",
"UnitNo7",
"UnitNo8",
"UnitNo9",
"UnitNo10",
"UnitNo11",
"UnitNo12",
"UnitNo13",
"UnitNo14",
"UnitNo15",
"UnitNo16",
"UnitNo17",
"UnitNo18",
"UnitNo19",
"UnitNo20");
//min and max limits for multiplier, for random numbers
//keep the range pretty small, so markers are kept close by
var min = .999999;
var max = 1.000001;
function createMarker(latlng,text) {
///get array of markers currently in cluster
var allMarkers = mc.getMarkers();
//final position for marker, could be updated if another marker already exists in same position
var finalLatLng = latlng;
//check to see if any of the existing markers match the latlng of the new marker
if (allMarkers.length != 0) {
for (i=0; i < allMarkers.length; i++) {
var existingMarker = allMarkers[i];
var pos = existingMarker.getPosition();
//if a marker already exists in the same position as this marker
if (latlng.equals(pos)) {
//update the position of the coincident marker by applying a small multipler to its coordinates
var newLat = latlng.lat() * (Math.random() * (max - min) + min);
var newLng = latlng.lng() * (Math.random() * (max - min) + min);
finalLatLng = new google.maps.LatLng(newLat,newLng);
}
}
}
var marker = new google.maps.Marker({
position: finalLatLng
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(text);
infowindow.open(map,marker);
});
return marker;
}
function geocodeAddress(address,i) {
geocoder.geocode( {'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
var marker = createMarker(results[0].geometry.location,content[i]); mc.addMarker(marker);
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function initialize(){
var options = {
zoom: 4,
center: new google.maps.LatLng(39.8282,-98.5795),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
//marker cluster
mc = new MarkerClusterer(map, [], mcOptions);
for (i=0; i<address.length; i++) {
geocodeAddress(address[i],i);
}
}
</script>
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body onload='initialize()'>
<div id="map"></div>
</body>
</html>
Thank you!
If you have the latitude and longitude for the points, don't use the geocoder.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<script type="text/javascript">
var map;
//marker clusterer
var mc;
var mcOptions = {gridSize: 20, maxZoom: 17};
//global infowindow
var infowindow = new google.maps.InfoWindow();
//geocoder
var geocoder = new google.maps.Geocoder();
var address = new Array("42.0619,-72.2136",
"28.06,-81.9561",
"30.3375,-81.7686",
"30.3375,-81.7686",
"41.7684,-88.1366",
"28.06,-81.9561",
"40.086,-82.486",
"40.6278,-79.0896",
"39.0197,-84.5914",
"41.8119,-87.6873",
"28.06,-81.9561",
"42.8698,-85.9697",
"42.8358,-85.6644",
"41.0309,-92.4098",
"39.1024,-94.5986",
"33.6115,-84.3745",
"34.84,-115.967",
"33.0807,-81.9868",
"41.7369,-73.7411",
"41.9214,-87.8924");
var content = new Array("UnitNo1",
"UnitNo2",
"UnitNo3",
"UnitNo4",
"UnitNo5",
"UnitNo6",
"UnitNo7",
"UnitNo8",
"UnitNo9",
"UnitNo10",
"UnitNo11",
"UnitNo12",
"UnitNo13",
"UnitNo14",
"UnitNo15",
"UnitNo16",
"UnitNo17",
"UnitNo18",
"UnitNo19",
"UnitNo20");
//min and max limits for multiplier, for random numbers
//keep the range pretty small, so markers are kept close by
var min = .999999;
var max = 1.000001;
function createMarker(latlng,text) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(text);
infowindow.open(map,marker);
});
return marker;
}
function initialize(){
var options = {
zoom: 4,
center: new google.maps.LatLng(39.8282,-98.5795),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
var gmarkers = [];
for (i=0; i<address.length; i++) {
var ptStr = address[i];
var coords = ptStr.split(",");
var latlng = new google.maps.LatLng(parseFloat(coords[0]),parseFloat(coords[1]));
gmarkers.push(createMarker(latlng,content[i]));
}
//marker cluster
mc = new MarkerClusterer(map, gmarkers, mcOptions);
}
</script>
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body onload='initialize()'>
<div id="map"></div>
</body>
</html>
working example
Related
i am using this src http://maps.googleapis.com/maps/api/js?sensor=false in this how can i change the zoom in my application when i run it automatically shows my pointer can u help
This is what i tried:
<script>
var map = null;
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var markers = [
/*{
"lat": '12.916517',
"lng": '79.132499',
}
,
{
"lat": '12.5904049',
"lng": '78.62851409999999',
},*/
<?php
$long = $rider->lng;
$lat = $rider->lat;
$routes = array("lng" => $long, "lat" => $lat);
$route_points = array($routes);
foreach ($route_points as $points) {
?>
{
"lat": <?php echo "'" . $points['lat'] . "'"; ?>,
"lng": <?php echo "'" . $points['lng'] . "'"; ?>,
},
<?php
}
?>
];
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(
parseFloat(markers[0].lat),
parseFloat(markers[0].lng)),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//***********ROUTING****************//
//Intialize the Path Array
var path = new google.maps.MVCArray();
//Intialize the Direction Service
var service = new google.maps.DirectionsService();
//Set the Path Stroke Color
var poly = new google.maps.Polyline({map: map, strokeColor: '#4986H7'});
//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < lat_lng.length; i++) {
if ((i + 1) < lat_lng.length) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
path.push(src);
poly.setPath(path);
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
}
});
}
}
}
</script>
my output:
enter image description here
If you want to set a different zoom value when creating the map, use the zoom property in the mapOptions object as per the API documentation: google.maps.Map, google.maps.MapOptions
It can not be done by php, you can do it by Javascript:-
<!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: 60%; width:60%; margin:20px auto; border:1px solid; padding-left:100px; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false®ion=AU">
</script>
<script type="text/javascript">
function HomeControl(controlDiv, map) {
google.maps.event.addDomListener(zoomout, 'click', function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 0){
map.setZoom(currentZoomLevel - 1);}
});
google.maps.event.addDomListener(zoomin, 'click', function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 21){
map.setZoom(currentZoomLevel + 1);}
});
}
var map;
var markersArray = [];
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(-33.90224, 151.20215);
var mapOptions = {
zoom: <?php echo $zoom; /* you can set zoom variable according to your need */ ?>,
center: myLatlng,
Marker: true,
panControl: false,
zoomControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="zoomout" style="border:1px solid; width:150px; heoght:50px; cursor:pointer; margin-bottom:20px;">ZOOM ME OUT</div>
<div id="zoomin" style="border:1px solid; width:150px; heoght:50px;cursor:pointer;">ZOOM ME IN</div>
</body>
</html>
I am in the middle of a coding an asset map for one of my customers assets.
The database contain information as below in two tables
tblAssets
AssetID
AssetName
AssetLocation
AssetLat
AssetLng
AssetType
tblAssetLinks
LinkID
LinkType
LinkLat1
LinkLng1
LinkLat2
LinkLng2
tblAssets is used to plot the individual assets, these contain other information (irrelevant to this issue) and tblAssetLinks in their current application draws a line between LinkLat1, LinkLng1 and LinkLat2, LinkLng2
I have managed to get tblAssets to plot loading the db as an xml array as below
<markers>
<marker PrimaryKey="175223" NodeName="TQ88768407" distance="0.0123043158297526" lat="51.455662" lng="0.716716" Type="NODE"/>
<marker PrimaryKey="175221" NodeName="TQ88768405" distance="0.0175958000932205" lat="51.455498" lng="0.716893" Type="NODE"/>
<marker PrimaryKey="175226" NodeName="TQ88768411" distance="0.023174171700034" lat="51.455791" lng="0.716119" Type="NODE"/>
</markers>
This is the javascript i am using to load my points onto my map
<script type="text/javascript">
//<![CDATA[
var customIcons = {
OTHER: {
icon: 'images/other.png'
}
};
function load() {
//map.addMapType(G_SATELLITE_3D_MAP);
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(51.4555503, 0.7164931),
zoom: 18,
mapTypeId: 'hybrid'
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("xmlgen_asset.php?lat=51.4555503&lng=0.7164931", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var primarykey = markers[i].getAttribute("PrimaryKey");
var nodename = markers[i].getAttribute("NodeName");
var ownedby = markers[i].getAttribute("OwnedBy");
var nodeid = markers[i].getAttribute("NodeID");
var type = markers[i].getAttribute("Type");
var lat = markers[i].getAttribute("lat");
var lng = markers[i].getAttribute("lng");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = nodename + "<br/>" + type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
I was wondering if there was a way for me to load another xml with tblAssetLinks to draw polylines as well as the points above onto the map?
To parse that XML, get each link element, retrieve their lat1/lng1 and lat2/lng2 attributes and make polylines from them (per the example in the documentation.
var polydata = xml.getElementsByTagName('link');
for (var i = 0; i < polydata.length; i++) {
var pt1 = {
lat: parseFloat(polydata[i].getAttribute("lat1")),
lng: parseFloat(polydata[i].getAttribute("lng1"))
}
var pt2 = {
lat: parseFloat(polydata[i].getAttribute("lat2")),
lng: parseFloat(polydata[i].getAttribute("lng2"))
}
var polyline = new google.maps.Polyline({
path: [pt1, pt2],
map: map
});
}
proof of concept fiddle
code snippet:
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(51, 0),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
var xml = xmlParse(xmlData);
var polydata = xml.getElementsByTagName('link');
for (var i = 0; i < polydata.length; i++) {
var pt1 = {
lat: parseFloat(polydata[i].getAttribute("lat1")),
lng: parseFloat(polydata[i].getAttribute("lng1"))
}
var pt2 = {
lat: parseFloat(polydata[i].getAttribute("lat2")),
lng: parseFloat(polydata[i].getAttribute("lng2"))
}
var polyline = new google.maps.Polyline({
path: [pt1, pt2],
map: map
});
bounds.extend(polyline.getPath().getAt(0));
bounds.extend(polyline.getPath().getAt(1));
}
map.fitBounds(bounds);
}
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return createElement('div', null);
}
google.maps.event.addDomListener(window, "load", initialize);
var xmlData = '<links><link PrimaryKey="56669" OwnedBy="SWS" AssetID="30757610" distance="0.0161501151649766" lat1="51.455479" lng1="0.716877" lat2="51.455498" lng2="0.716893" Type="COMBINED"/><link PrimaryKey="45827" OwnedBy="SWS" AssetID="1386010" distance="0.024165762230059" lat1="51.455791" lng1="0.716119" lat2="51.455769" lng2="0.716060" Type="COMBINED"/><link PrimaryKey="92131" OwnedBy="SWS" AssetID="30757581" distance="0.0258313521247188" lat1="51.455750" lng1="0.716015" lat2="51.455734" lng2="0.716000" Type="COMBINED"/><link PrimaryKey="55871" OwnedBy="SWS" AssetID="30757590" distance="0.033043902136047" lat1="51.455833" lng1="0.715905" lat2="51.455853" lng2="0.715906" Type="SURFACE_WATER"/><link PrimaryKey="79135" OwnedBy="SWS" AssetID="1386511" distance="0.0387150798069927" lat1="51.455372" lng1="0.715662" lat2="51.455509" lng2="0.715598" Type="COMBINED"/><link PrimaryKey="55870" OwnedBy="SWS" AssetID="30757560" distance="0.039789930528151" lat1="51.455353" lng1="0.715646" lat2="51.455372" lng2="0.715662" Type="COMBINED"/><link PrimaryKey="79136" OwnedBy="SWS" AssetID="1386531" distance="0.0415342089389798" lat1="51.455051" lng1="0.717068" lat2="51.454903" lng2="0.716886" Type="COMBINED"/><link PrimaryKey="79062" OwnedBy="SWS" AssetID="1386001" distance="0.0424351462005461" lat1="51.455944" lng1="0.715768" lat2="51.455917" lng2="0.715723" Type="SURFACE_WATER"/><link PrimaryKey="2812" OwnedBy="SWS" AssetID="1385989" distance="0.042520172377456" lat1="51.455795" lng1="0.715615" lat2="51.455692" lng2="0.715767" Type="COMBINED"/><link PrimaryKey="4041" OwnedBy="SWS" AssetID="1386420" distance="0.043199028781749" lat1="51.456078" lng1="0.717043" lat2="51.455662" lng2="0.716716" Type="COMBINED"/></links>';
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>
Can someone please help me how to bind a custom image marker to this script?
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="scripts/downloadxml.js"></script>
<style type="text/css">
html, body { height: 100%; }
</style>
<script type="text/javascript">
//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
// global "map" variable
var map = null;
var markerclusterer = null;
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
// map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
function initialize() {
// create the map
var myOptions = {
zoom: 7,
center: new google.maps.LatLng(52.13263,5.29127),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Read the data from example.xml
downloadUrl("dataxml.cfm", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var marker_image = parseFloat(markers[i].getAttribute("markerimage"));
var image = {
url: marker_image,
size: new google.maps.Size(71, 132),
origin: new google.maps.Point(0, 0),
scaledSize: new google.maps.Size(71, 132)
};
var point = new google.maps.LatLng(lat,lng);
var id = markers[i].getAttribute("id");
var country = markers[i].getAttribute("country");
var html="<b>"+country+"</b><br><span style='color:white'>"+id+"</span>";
// create the marker
var marker = createMarker(point,country+" "+id,html);
}
markerCluster = new MarkerClusterer(map, gmarkers);
});
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
// from the v2 tutorial page at:
// http://econym.org.uk/gmap/basic3.htm
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width: 752px; height: 600px"></div>
</body>
</html>
The XML is simple:
<markers>
<marker markerimage="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" id="value" lat="value" lng="value" country="value" />
I have tried to add "icon: image" to the create marker part, but I can't figured it out.I have tried to add "icon: image" to the create marker part, but I can't figured it out.
You need to pass the custom icon into the createMarker function:
// create the marker
var marker = createMarker(point, country + " " + id, html, marker_image);
updated createMarker function:
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html, icon) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
icon: icon,
// map: map,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>';
}
proof of concept fiddle
code snippet:
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(40.735657, -74.1723667),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Read the data from dataxml.cfm
// downloadUrl("dataxml.cfm", function(doc) {
var xmlDoc = xmlParse(xmlData);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var marker_image = markers[i].getAttribute("markerimage");
var image = {
url: marker_image,
size: new google.maps.Size(71, 132),
origin: new google.maps.Point(0, 0),
scaledSize: new google.maps.Size(71, 132)
};
var point = new google.maps.LatLng(lat, lng);
var id = markers[i].getAttribute("id");
var country = markers[i].getAttribute("country");
var html = "<b>" + country + "</b><br><span style='color:blue'>" + id + "</span>";
// create the marker
var marker = createMarker(point, country + " " + id, html, marker_image);
}
markerCluster = new MarkerClusterer(map, gmarkers);
// });
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html, icon) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
icon: icon,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>';
}
// global variables
var side_bar_html = "";
var gmarkers = [];
var map = null;
var markerclusterer = null;
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
google.maps.event.addDomListener(window, "load", initialize);
//New York, NY, USA (40.7127837, -74.0059413
//Newark, NJ, USA (40.735657, -74.1723667)
var xmlData = '<markers><marker markerimage="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" id="NYC" lat="40.7127837" lng="-74.0059413" country="USA" /><marker markerimage="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" id="NWK" lat="40.735657" lng="-74.1723667" country="USA" /></markers>';
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return createElement('div', null);
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<div id="map_canvas"></div>
I want to check to see if any of the existing markers match the latlng of the new marker and if so then merge the info window/tooltip text.
This is what I tried to do:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<script type="text/javascript">
var map;
var mc;//marker clusterer
var mcOptions = {gridSize: 10, maxZoom: 8};
var infowindow = new google.maps.InfoWindow();//global infowindow
var geocoder = new google.maps.Geocoder(); //geocoder
var address = new Array("42.3334,-89.1572",
"39.2058,-76.7531",
"39.7751,-86.1322",
"40.4894,-78.3499",
"42.0203,-87.9059",
"36.2673,-86.2912",
"33.6115,-84.3745",
"44.9793,-93.273",
"40.1461,-76.0738",
"32.2911,-90.1927",
"32.9315,-96.6158",
"36.0553,-79.8317",
"41.8397,-88.0887",
"47.8029,-103.267",
"34.106,-83.589",
"41.5907,-87.3199",
"43.0905,-74.3554",
"40.3438,-74.4289",
"40.8651,-96.8231",
"40.8651,-96.8231",
"41.759,-88.1524",
"38.2512,-86.8675",
"41.8119,-87.6873",
"41.3651,-89.0866",
"25.7791,-80.1978",
"41.6404,-88.0696",
"41.7684,-88.1366",
"39.7299,-86.4234",
"41.5234,-81.5996",
"41.6233,-88.0225",
"41.0171,-80.8029",
"40.2899,-82.9811",
"41.8119,-87.6873",
"32.3445,-99.8021",
"41.8119,-87.6873",
"29.8131,-95.3098",
"35.1693,-89.9904",
"33.6115,-84.3745",
"47.7374,-103.298",
"46.3502,-94.1",
"41.9907,-88.4298",
"35.3716,-80.5621",
"38.189,-85.6768",
"41.8119,-87.6873",
"32.7714,-97.2915");
var content = new Array("UnitNo1",
"UnitNo2",
"UnitNo3",
"UnitNo4",
"UnitNo5",
"UnitNo6",
"UnitNo7",
"UnitNo8",
"UnitNo9",
"UnitNo10",
"UnitNo11",
"UnitNo12",
"UnitNo13",
"UnitNo14",
"UnitNo15",
"UnitNo16",
"UnitNo17",
"UnitNo18",
"UnitNo19",
"UnitNo20",
"UnitNo21",
"UnitNo22",
"UnitNo23",
"UnitNo24",
"UnitNo25",
"UnitNo26",
"UnitNo27",
"UnitNo28",
"UnitNo29",
"UnitNo30",
"UnitNo31",
"UnitNo32",
"UnitNo33",
"UnitNo34",
"UnitNo35",
"UnitNo36",
"UnitNo37",
"UnitNo38",
"UnitNo39",
"UnitNo40",
"UnitNo41",
"UnitNo42",
"UnitNo43",
"UnitNo44",
"UnitNo45");
//min and max limits for multiplier, for random numbers //keep the range pretty small, so markers are kept close by
var min = .999999;
var max = 1.000001;
function createMarker(latlng,text) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
///get array of markers currently in cluster
var allMarkers = mc.getMarkers();
//check to see if any of the existing markers match the latlng of the new marker
if (allMarkers.length != 0) {
for (i=0; i < allMarkers.length; i++) {
var existingMarker = allMarkers[i];
var pos = existingMarker.getPosition();
if (latlng.equals(pos)) {
text = text + " & " + content[i];
}
}
}
// WHERE TO ADD: mc.addMarker(marker); //??
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(text);
infowindow.open(map,marker);
});
return marker;
}
function initialize(){
var options = {
zoom: 4,
center: new google.maps.LatLng(39.8282,-98.5795),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
var gmarkers = [];
for (i=0; i<address.length; i++) {
var ptStr = address[i];
var coords = ptStr.split(",");
var latlng = new google.maps.LatLng(parseFloat(coords[0]),parseFloat(coords[1]))
gmarkers.push(createMarker(latlng,content[i]));
}
//marker cluster
mc = new MarkerClusterer(map, gmarkers, mcOptions);
for (i=0; i<address.length; i++) {
geocodeAddress(address[i],i);
}
}
</script>
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body onload="initialize();">
<div id="map"></div>
</body>
</html>
I tired to take this working example found here http://www.geocodezip.com/SO_OverQueryLimitB.html and add the following code into it:
///get array of markers currently in cluster
var allMarkers = mc.getMarkers();
//check to see if any of the existing markers match the latlng of the new marker
if (allMarkers.length != 0) {
for (i=0; i < allMarkers.length; i++) {
var existingMarker = allMarkers[i];
var pos = existingMarker.getPosition();
if (latlng.equals(pos)) {
text = text + " & " + content[i];
}
}
}
So that the final result when you click on a marker that has the same latlng it would display one info window with the merged text like the one found here http://maps.caseypthomas.org/ex/MarkerClustererPlus/exCoincidentMarkers_SharedInfowindow_wGeocoding.html See it shows the number 4 but displays only 3 markers that's because the one on the right side is merged with another one behind it and when you click on it it shows you the text for both. only I would like to use geocodezip's example and work on top of that since I already have the cords and don't need google to go get them for me.
Thank you for just reading this LONG Question if noting else..
and Thank you 1Mill X over if you can help me find a solution.
Thanks again!!!
You need to :
create the marker clusterer first.
add the markers to the MarkerClusterer (and format your code so it is easier to read...).
function createMarker(latlng,text) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
///get array of markers currently in cluster
var allMarkers = mc.getMarkers();
//check to see if any of the existing markers match the latlng of the new marker
if (allMarkers.length != 0) {
for (i=0; i < allMarkers.length; i++) {
var existingMarker = allMarkers[i];
var pos = existingMarker.getPosition();
if (latlng.equals(pos)) {
text = text + " & " + content[i];
}
}
}
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(text);
infowindow.open(map,marker);
});
mc.addMarker(marker);
return marker;
}
working example
I want to check to see if any of the existing markers match the latlng of the new marker and if so then merge the info window/tooltip text.
This is what I tried to do:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<script type="text/javascript">
var map;
var mc;//marker clusterer
var mcOptions = {gridSize: 10, maxZoom: 8};
var infowindow = new google.maps.InfoWindow();//global infowindow
var geocoder = new google.maps.Geocoder(); //geocoder
var address = new Array("42.3334,-89.1572",
"39.2058,-76.7531",
"39.7751,-86.1322",
"40.4894,-78.3499",
"42.0203,-87.9059",
"36.2673,-86.2912",
"33.6115,-84.3745",
"44.9793,-93.273",
"40.1461,-76.0738",
"32.2911,-90.1927",
"32.9315,-96.6158",
"36.0553,-79.8317",
"41.8397,-88.0887",
"47.8029,-103.267",
"34.106,-83.589",
"41.5907,-87.3199",
"43.0905,-74.3554",
"40.3438,-74.4289",
"40.8651,-96.8231",
"40.8651,-96.8231",
"41.759,-88.1524",
"38.2512,-86.8675",
"41.8119,-87.6873",
"41.3651,-89.0866",
"25.7791,-80.1978",
"41.6404,-88.0696",
"41.7684,-88.1366",
"39.7299,-86.4234",
"41.5234,-81.5996",
"41.6233,-88.0225",
"41.0171,-80.8029",
"40.2899,-82.9811",
"41.8119,-87.6873",
"32.3445,-99.8021",
"41.8119,-87.6873",
"29.8131,-95.3098",
"35.1693,-89.9904",
"33.6115,-84.3745",
"47.7374,-103.298",
"46.3502,-94.1",
"41.9907,-88.4298",
"35.3716,-80.5621",
"38.189,-85.6768",
"41.8119,-87.6873",
"32.7714,-97.2915");
var content = new Array("UnitNo1",
"UnitNo2",
"UnitNo3",
"UnitNo4",
"UnitNo5",
"UnitNo6",
"UnitNo7",
"UnitNo8",
"UnitNo9",
"UnitNo10",
"UnitNo11",
"UnitNo12",
"UnitNo13",
"UnitNo14",
"UnitNo15",
"UnitNo16",
"UnitNo17",
"UnitNo18",
"UnitNo19",
"UnitNo20",
"UnitNo21",
"UnitNo22",
"UnitNo23",
"UnitNo24",
"UnitNo25",
"UnitNo26",
"UnitNo27",
"UnitNo28",
"UnitNo29",
"UnitNo30",
"UnitNo31",
"UnitNo32",
"UnitNo33",
"UnitNo34",
"UnitNo35",
"UnitNo36",
"UnitNo37",
"UnitNo38",
"UnitNo39",
"UnitNo40",
"UnitNo41",
"UnitNo42",
"UnitNo43",
"UnitNo44",
"UnitNo45");
//min and max limits for multiplier, for random numbers //keep the range pretty small, so markers are kept close by
var min = .999999;
var max = 1.000001;
function createMarker(latlng,text) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
///get array of markers currently in cluster
var allMarkers = mc.getMarkers();
//check to see if any of the existing markers match the latlng of the new marker
if (allMarkers.length != 0) {
for (i=0; i < allMarkers.length; i++) {
var existingMarker = allMarkers[i];
var pos = existingMarker.getPosition();
if (latlng.equals(pos)) {
text = text + " & " + content[i];
}
}
}
// WHERE TO ADD: mc.addMarker(marker); //??
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(text);
infowindow.open(map,marker);
});
return marker;
}
function initialize(){
var options = {
zoom: 4,
center: new google.maps.LatLng(39.8282,-98.5795),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
var gmarkers = [];
for (i=0; i<address.length; i++) {
var ptStr = address[i];
var coords = ptStr.split(",");
var latlng = new google.maps.LatLng(parseFloat(coords[0]),parseFloat(coords[1]))
gmarkers.push(createMarker(latlng,content[i]));
}
//marker cluster
mc = new MarkerClusterer(map, gmarkers, mcOptions);
for (i=0; i<address.length; i++) {
geocodeAddress(address[i],i);
}
}
</script>
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body onload="initialize();">
<div id="map"></div>
</body>
</html>
I tired to take this working example found here http://www.geocodezip.com/SO_OverQueryLimitB.html and add the following code into it:
///get array of markers currently in cluster
var allMarkers = mc.getMarkers();
//check to see if any of the existing markers match the latlng of the new marker
if (allMarkers.length != 0) {
for (i=0; i < allMarkers.length; i++) {
var existingMarker = allMarkers[i];
var pos = existingMarker.getPosition();
if (latlng.equals(pos)) {
text = text + " & " + content[i];
}
}
}
So that the final result when you click on a marker that has the same latlng it would display one info window with the merged text like the one found here http://maps.caseypthomas.org/ex/MarkerClustererPlus/exCoincidentMarkers_SharedInfowindow_wGeocoding.html See it shows the number 4 but displays only 3 markers that's because the one on the right side is merged with another one behind it and when you click on it it shows you the text for both. only I would like to use geocodezip's example and work on top of that since I already have the cords and don't need google to go get them for me.
Thank you for just reading this LONG Question if noting else..
and Thank you 1Mill X over if you can help me find a solution.
Thanks again!!!
You need to :
create the marker clusterer first.
add the markers to the MarkerClusterer (and format your code so it is easier to read...).
function createMarker(latlng,text) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
///get array of markers currently in cluster
var allMarkers = mc.getMarkers();
//check to see if any of the existing markers match the latlng of the new marker
if (allMarkers.length != 0) {
for (i=0; i < allMarkers.length; i++) {
var existingMarker = allMarkers[i];
var pos = existingMarker.getPosition();
if (latlng.equals(pos)) {
text = text + " & " + content[i];
}
}
}
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(text);
infowindow.open(map,marker);
});
mc.addMarker(marker);
return marker;
}
working example