Here is the code I have written to add a marker to the google map by providing latitude and longitude. The problem is that I get a very highly zoomed google map. I have tried setting the zoom level to 1 but this has no effect to the very highly zoomed map.
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",new google.maps.Size(32, 32), new google.maps.Point(0, 0),new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
icon: icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});
addMarker(27.703402,85.311668,'New Road');
center = bounds.getCenter();
map.fitBounds(bounds);
}
</script>
</head>
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
</body>
</html>
How can i decrease the level of zoom for this case?
Your code below is zooming the map to fit the specified bounds:
addMarker(27.703402,85.311668,'New Road');
center = bounds.getCenter();
map.fitBounds(bounds);
If you only have 1 marker and add it to the bounds, that results in the closest zoom possible:
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
}
If you keep track of the number of markers you have "added" to the map (or extended the bounds with), you can only call fitBounds if that number is greater than one. I usually push the markers into an array (for later use) and test the length of that array.
If you will only ever have one marker, don't use fitBounds. Call setCenter, setZoom with the marker position and your desired zoom level.
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
map.setCenter(pt);
map.setZoom(your desired zoom);
}
html,
body,
#map {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
<html>
<head>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" type="text/javascript"></script>
<script type="text/javascript">
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png", new google.maps.Size(32, 32), new google.maps.Point(0, 0), new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
map.setCenter(pt);
map.setZoom(5);
var marker = new google.maps.Marker({
position: pt,
icon: icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});
addMarker(27.703402, 85.311668, 'New Road');
// center = bounds.getCenter();
// map.fitBounds(bounds);
}
</script>
</head>
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
</body>
</html>
map.setZoom(zoom:number)
https://developers.google.com/maps/documentation/javascript/reference#Map
What you're looking for are the scales for each zoom level. The numbers are in metres. Use these:
20 : 1128.497220
19 : 2256.994440
18 : 4513.988880
17 : 9027.977761
16 : 18055.955520
15 : 36111.911040
14 : 72223.822090
13 : 144447.644200
12 : 288895.288400
11 : 577790.576700
10 : 1155581.153000
9 : 2311162.307000
8 : 4622324.614000
7 : 9244649.227000
6 : 18489298.450000
5 : 36978596.910000
4 : 73957193.820000
3 : 147914387.600000
2 : 295828775.300000
1 : 591657550.500000
For zooming in your map two levels, add this small line of code,
map.setZoom(map.getZoom() + 2);
Here is a function I use:
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(52.2, 5),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 7
});
function zoomTo(level) {
google.maps.event.addListener(map, 'zoom_changed', function () {
zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function (event) {
if (this.getZoom() > level && this.initialZoom == true) {
this.setZoom(level);
this.initialZoom = false;
}
google.maps.event.removeListener(zoomChangeBoundsListener);
});
});
}
These methods worked for me, it maybe useful for anyone:
MapOptions interface
set min zoom: mMap.setMinZoomPreference(N);
set max zoom: mMap.setMaxZoomPreference(N);
where N can equal to:
20 : 1128.497220
19 : 2256.994440
18 : 4513.988880
17 : 9027.977761
16 : 18055.955520
15 : 36111.911040
14 : 72223.822090
13 : 144447.644200
12 : 288895.288400
11 : 577790.576700
10 : 1155581.153000
9 : 2311162.307000
8 : 4622324.614000
7 : 9244649.227000
6 : 18489298.450000
5 : 36978596.910000
4 : 73957193.820000
3 : 147914387.600000
2 : 295828775.300000
1 : 591657550.500000
Related
So I have the following in my HTML which represents regions in the UK:-
<h4 id="google-ne" class="active">The North East</h4>
<h4 id="google-nw">The North West</h4>
<h4 id="google-ea">East Anglia</h4>
<h4 id="google-em">East Midlands</h4>
<h4 id="google-tm">The Midlands</h4>
<h4 id="google-wm">West Midlands</h4>
<h4 id="google-ld">London</h4>
<h4 id="google-se">South East</h4>
<h4 id="google-sw">South West</h4>
<h4 id="google-ws">Wales</h4>
<h4 id="google-sl">Scotland</h4>
and then the marker lat / long and region are displayed in HTML as follows:-
<div class="marker" data-lat="52.559437" data-lng="-2.1493073" data-region="West Midlands"></div>
<div class="marker" data-lat="51.646145" data-lng="-0.45614472" data-region="South East"></div>
and so on, there are about 400 markers.
I am currently using the following code to display all markers on the map which is working fine:-
var center = new google.maps.LatLng(51.5280359,-0.1304897);
function initialize_map() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
var markerBounds = new google.maps.LatLngBounds();
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var isDraggable = w > 480 ? true : false;
var mapOptions = {
zoom: 8,
center: center,
//draggable: isDraggable,
//mapTypeControl: false,
//draggable: false,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
scrollwheel: true,
navigationControl: true,
streetViewControl: true,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
// Multiple Markers
// Loop through our array of markers & place each one on the map
$('.marker').each(function() {
var location = {
latLng: new google.maps.LatLng(
$( this ).data( 'lat' ),
$( this ).data( 'lng' )
),
//title: $( this ).find( 'h2' ).html()
};
new google.maps.Marker( {
map: map,
position: location.latLng,
//title: $( this ).data( 'desc' )
} );
markerBounds.extend( location.latLng );
});
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
var styles = [
/* Black & White {"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]} */
/* Colour*/ {"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"saturation":"-63"},{"lightness":"23"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"saturation":"-100"},{"lightness":"25"}]},{"featureType":"landscape.natural.terrain","elementType":"geometry.fill","stylers":[{"saturation":"0"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"saturation":"0"},{"color":"#95bf97"},{"lightness":"59"}]},{"featureType":"poi.school","elementType":"geometry.fill","stylers":[{"lightness":"5"},{"hue":"#ff0000"},{"saturation":"-100"}]},{"featureType":"poi.sports_complex","elementType":"geometry.fill","stylers":[{"lightness":"5"},{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"saturation":"-85"},{"lightness":"12"}]}
];
map.setOptions({styles: styles});
}
initialize_map();
}
What I want to do now is on click of say 'West Midlands' #google-wm, it removes all markers currently on the map and then only shows markers where the data-region == 'West Midlands'
How is it possible to do this?
Thanks in advance.
You could do something like that. Code is commented for the parts that I have added/changed.
var markers = [];
var map;
function initialize() {
var myLatLng = new google.maps.LatLng(52, -1);
var mapOptions = {
zoom: 6,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
$('.marker').each(function() {
var location = {
latLng: new google.maps.LatLng(
$(this).data('lat'),
$(this).data('lng')
),
};
var marker = new google.maps.Marker({
map: map,
position: location.latLng,
});
// Register click event
$(this).on('click', function() {
clickMarker($(this).data('region'));
});
// Push marker and region to markers array
markers.push({
'marker': marker,
'region': $(this).data('region')
});
});
}
function clickMarker(region) {
// Loop through markers array
for (var i = 0; i < markers.length; i++) {
// If marker region = selected region, display it
if (markers[i].region === region) {
markers[i].marker.setMap(map);
} else {
// Hide marker from different region
markers[i].marker.setMap(null);
}
}
}
initialize();
#map-canvas {
height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map-canvas"></div>
<div class="marker" data-lat="52.5" data-lng="-2.1" data-region="West Midlands">Marker 1 - WM</div>
<div class="marker" data-lat="52.6" data-lng="-2.2" data-region="West Midlands">Marker 2 - WM</div>
<div class="marker" data-lat="51.6" data-lng="-0.4" data-region="South East">Marker 3 - SE</div>
<div class="marker" data-lat="51.7" data-lng="-0.5" data-region="South East">Marker 4 - SE</div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
I have got four markers which will be shown when i zoom in till the last .
The issue i am facing is that the markers one and four are overlapping with each other , and i cannot zoom zoom in further to click on them ?
Is there any solution for this without using Marker cluster??
some part of my code
function addMarker(response, lator, lonor, infowindow) {
if (response.length > 0) {
var global_markers = [];
for (var i = 0; i < response.length; i++) {
var lat = parseFloat(response[i].latitude);
var lng = parseFloat(response[i].longititude);
var dealername = response[i].name;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: "Dealer name: " + dealername,
icon: 'http://maps.google.com/mapfiles/marker.png'
});
global_markers[i] = marker;
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
}
}
}
This is my fiddle
http://jsfiddle.net/3VXTL/13/
Please let me know how to resolve this ??
One option is to make the markers smaller (use the "measle" little red do).
updated fiddle
code snippet:
var response = [{
"longititude": "78.377665",
"latitude": "17.439669",
"name": "one"
}, {
"longititude": "78.377617",
"latitude": "17.439692",
"name": "two"
}, {
"longititude": "78.377644",
"latitude": "17.439674",
"name": "three"
}, {
"longititude": "78.377665",
"latitude": "17.439667",
"name": "four"
}]
initializeCalllater(18.1124372, 79.01929969999999, response);
function initializeCalllater(lator, lonor, response) {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(lator, lonor);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.trigger(map, 'resize');
map.setCenter(new google.maps.LatLng(lator, lonor));
var infowindow = new google.maps.InfoWindow({});
addMarker(response, lator, lonor, infowindow);
}
function addMarker(response, lator, lonor, infowindow) {
if (response.length > 0) {
var global_markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < response.length; i++) {
var lat = parseFloat(response[i].latitude);
var lng = parseFloat(response[i].longititude);
var dealername = response[i].name;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: "Dealer name: " + dealername,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(3.5, 3.5)
}
});
bounds.extend(marker.getPosition());
global_markers[i] = marker;
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
}
map.fitBounds(bounds);
}
}
body,
html,
#map_canvas {
height: 100%;
width: 100%;
}
<script src="http://maps.google.com/maps/api/js"></script>
<div id="map_canvas" "></div>
If that is not enough, you could change the zIndex of the markers that overlap when you click on one of them (like this question: allow user to move marker position back (z-index?) in google maps custom map).
I've been stuck on this issue for a while now and could really use some help. In a Google Map, I have a list of markers which are being treated as a markerArray, with their own custom icons. But along with displaying those markers, I would like for it to create a marker which is placed at the users geotagged location. I have tried merging the suggestions I've come across here on stack overflow, and have successfully gotten the users browser to center the map based off of geolocation, but whenever I try to add a marker outside of the standard var=locations, all of the markers disappear. I am providing my working code, which simply lacks the feature to add the "current location" marker. If anyone has any input, I'd be thrilled.
var map = null;
var markerArray = [];
function initialize() {
var myOptions = {
zoom: 13,
center: new google.maps.LatLng(40.746613, -73.990109),
mapTypeControl: false,
navigationControl: false,
streetViewControl: false,
zoomControl: false,
styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"off"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"}]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#ffff00"},{lightness:-25},{saturation:-97}]}]
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(initialLocation);
});
}
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var locations = [
['90 West Apartment', 40.709943, -74.014430, 7, 'images/pin2.png'],
['Caffe Vita', 40.719652, -73.988411, 6, 'images/pin1.png'],
['Croxleys Ale House', 40.722480, -73.983386, 5, 'images/pin1.png'],
['Grays Papaya', 40.778291, -73.981829, 4, 'images/pin2.png'],
['The Back Room', 40.718723, -73.986913, 3, 'images/pin1.png'],
['MUD Coffee', 40.729912, -73.990678, 2, 'images/pin1.png'],
['Nurse Bettie', 40.718820, -73.986863, 1, 'pin2.png']];
for (var i = 0; i < locations.length; i++) {
createMarker(new google.maps.LatLng(locations[i][1], locations[i][2]),locations[i][0], locations[i][3], locations[i][4]);
}
mc.addMarkers(markerArray, true);
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
function createMarker(latlng, myTitle, myNum, myIcon) {
var contentString = myTitle;
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: myIcon,
zIndex: Math.round(latlng.lat() * -100000) << 5,
title: myTitle
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
markerArray.push(marker);
}
window.onload = initialize;
Let's try this.
Put this in your initialize(): navigator.geolocation.getCurrentPosition(showPosition);
Then define showPosition:
var showPosition = function (position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Do whatever you want with userLatLng.
var marker = new google.maps.Marker({
position: userLatLng,
title: 'Your Location',
map: map
});
}
I have a v3 Google Maps working fine with dynamic markers but I am trying to add the MarkerCluster feature as detailed in the google docs:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html
<script type="text/javascript">
var center = null;
var image = new google.maps.MarkerImage(
'combined.png',
new google.maps.Size(31,25),
new google.maps.Point(0,0),
new google.maps.Point(16,25)
);
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
icon: image,
map: map
});
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
// map.panTo(center);
currentPopup = null;
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
});
var mcOptions = {gridSize: 50, maxZoom: 15};
var markers = [];
<?php
do {
$name=$row_rsCity['PARKNAME'];
$lat=$row_rsCity['lat'];
$lon=$row_rsCity['lng'];
$desc=$row_rsCity['PARKADDR'];
$city=$row_rsCity['PARKCITY'];
$spaces=$row_rsCity['SPACE_CNT'];
$phone=$row_rsCity['PHONE'];
echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc<br/>$city , CA<br /><br />Phone: $phone <br />Space Count: $spaces');\n");
} while ($row_rsCity = mysql_fetch_assoc($rsCity));
?>
var mc = new MarkerClusterer(map, markers, mcOptions);
center = bounds.getCenter();
map.fitBounds(bounds);
}
</script>
I believe the key is wrapping the var markers = []; around the addMarkers but when I do this
Example :
var markers = [
<?php
do {
$name=$row_rsCity['PARKNAME'];
$lat=$row_rsCity['lat'];
$lon=$row_rsCity['lng'];
$desc=$row_rsCity['PARKADDR'];
$city=$row_rsCity['PARKCITY'];
$spaces=$row_rsCity['SPACE_CNT'];
$phone=$row_rsCity['PHONE'];
echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc<br/>$city , CA<br /><br />Phone: $phone <br />Space Count: $spaces');\n");
} while ($row_rsCity = mysql_fetch_assoc($rsCity));
?>];
Firebug returns the following error:
missing ] after element list
Can anyone help with the proper syntax ?
Update your addMarker function to return the marker and accept map as a param:
function addMarker(map, lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
icon: image,
map: map
});
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
currentPopup = null;
});
return marker;
}
then update the marker creation section to be:
var mcOptions = {gridSize: 50, maxZoom: 15};
var markers = [];
<?php
do {
$name=$row_rsCity['PARKNAME'];
$lat=$row_rsCity['lat'];
$lon=$row_rsCity['lng'];
$desc=$row_rsCity['PARKADDR'];
$city=$row_rsCity['PARKCITY'];
$spaces=$row_rsCity['SPACE_CNT'];
$phone=$row_rsCity['PHONE'];
echo ("markers.push(addMarker(map, $lat, $lon,'<b>$name</b><br/>$desc<br/>$city CA<br /><br />Phone: $phone <br />Space Count: $spaces'));\n");
} while ($row_rsCity = mysql_fetch_assoc($rsCity));
?>
var mc = new MarkerClusterer(map, markers, mcOptions);
I have a map_canvas with a width of 225.
I want my infobox to be smaller than this (eg. 150 px).
Is this possible? I tried maxWidth and adding styles, but nothing seemed to work.
A screen (on imgshack) can be found below:
Also,
I'm using v3 of Google Maps
Javascript:
var results_coods;
var map_2;
var marker_2;
var infowindow_2;
function call_gmap()
{
if($('#map_text').attr('lat')){
var lat = Number($('#map_text').attr('lat').replace(",","."));
var lng = Number($('#map_text').attr('long').replace(",","."));
initialize(lat,lng);
/*
var lat= '51.0153389';
var lng = '2.7253832';
*/
}
}
function initialize(lat,lng) {
var latlng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 13,
center: latlng,
disableDefaultUI: true,
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
draggable: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infowindow = new google.maps.InfoWindow({
content: $('#map_text').html(),
maxWidth: 150
});
var image = 'beachflag.png';
var marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.open(map,marker);
google.maps.event.addListener(
marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}
function GcodeAddress()
{
var map;
geocoder = new google.maps.Geocoder();
var address = $('#map_address').html();
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 13,
center: results[0].geometry.location,
navigationControl: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infowindow = new google.maps.InfoWindow({
content: $('#map_text').html()
});
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
results_coods = results[0].geometry.location;
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
infowindow.open(map,marker);
google.maps.event.addListener(
marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.trigger(map, 'resize');
marker_2 = marker;
map_2 = map;
infowindow_2 = infowindow;
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
function resizeMap()
{
//hiervan komt 1 error, de andere van infowindow
google.maps.event.trigger(map_2, 'resize');
map_2.setCenter(results_coods);
infowindow_2.open(map_2,marker_2);
}
Javascript, bottom of html page:
$(document).ready(function($) {
GcodeAddress();
resizeMap();
});
HTML (VB.Net):
'-- Google Map
g_map_text.Text = "<div id=""map_canvas"" style=""width: 225px; height: 225px; position: relative;"" /></div>" & vbCrLf
g_map_text.Text &= String.Format("<div id='map_text' style=""display:none;width:150px;"">{0}</div>", LoadKantoor)
g_map_text.Text &= String.Format("<div id='map_address' style='display:none;' >{0}</div>", Bedrijf.Bedrijf("postalcode") & " " & Bedrijf.Bedrijf("city") & "," & Bedrijf.Bedrijf("address"))
An easier approach is to style using CSS. You need wrap the contents of the infoWindow in a div with your custom CSS.
Javascript:
marker.openInfoWindowHtml('<div class="iwContainer">' + yourContent + '</div>');
CSS:
.iwContainer {
width: 300px;
height: 200px;
}
Are you setting the maxWidth for the infowindow before the call to open as described here
EDIT:
I've looked at this again and it looks fine. I don't understand why it doesn't work.
You could use InfoBox.js instead?
API Reference: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
Download JS: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/
Examples: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/
Let me know how you get on.
Maybe you interested using this infobubble:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/
you can apply css on this and easy to custom with the example