Zoom option is not working for google map

Zoom option is not working for google map - google-maps

i am using google map api for the development in the map options i am setting the zoom level of map but there is no change in view
<!DOCTYPE html>
<html>
<head lang="en">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var markers = [{
"title": 'point4',
"lat": '1.355333',
"lng": '103.987305',
"description": 'uuu'
}, {
"title": 'point3',
"lat": '1.354432',
"lng": '103.987262',
"description": 'zzz'
}, {
"title": 'point3',
"lat": '1.354432',
"lng": '103.987262',
"description": 'zzz'
},{
"title": 'point3',
"lat": '1.353199',
"lng": '103.986908',
"description": 'zzz'
},{
"title": 'point3',
"lat": '1.353199',
"lng": '103.986908',
"description": 'zzz'
}, {
"title": 'point4',
"lat": '1.352389',
"lng": '103.986538',
"description": 'zzz'
},{
"title": 'point1',
"lat": '1.353751',
"lng": '103.986688',
"description": 'xxxx'
}, {
"title": 'point2',
"lat": '1.352657',
"lng": '103.986184',
"description": 'yyyy'
}, {
"title": 'point3',
"lat": '1.352657',
"lng": '103.986184',
"description": 'zzz'
}, {
"title": 'point4',
"lat": '1.351477',
"lng": '103.985701',
"description": 'uuu'
}, {
"title": 'point4',
"lat": '1.351477',
"lng": '103.985701',
"description": 'uuu'
}, {
"title": 'point4',
"lat": '1.350265',
"lng": '103.985165',
"description": 'uuu'
}];
var gmarkers = [];
var colorVariable = ["yellow", "green", "red", "saffron","yellow", "green", "red","yellow", "green", "red"];
var map;
var degree = 0;
function autoRotate() {
var $elie = $("#dvMap");
degree = degree + 65;
rotate(degree);
function rotate(degree) {
// For webkit browsers: e.g. Chrome
$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
$elie.css({ '-ms-transform': 'rotate(' + degree + 'deg)'});
$elie.css({ '-o-transform': 'rotate(' + degree + 'deg)'});
for (var i= 0; i < gmarkers.length; i++) {
gmarkers[i].setIcon(icon48.png("red", -degree));
}
}
}
window.onload = function() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
heading: 90,
tilt: 45,
styles: [
{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
}
]
};
map = new google.maps.Map(document.getElementById("dvMap"), 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,
icon:'icon48.png',
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);
gmarkers.push(marker);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < lat_lng.length; i++) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
var k=i;
i=i+1;
getDirections(src, des, colorVariable[k], map);
}
/*autoRotate();*/
}
function getDirections(src, des, color, map) {
//Intialize the Direction Service
var service = new google.maps.DirectionsService();
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
//Intialize the Path Array
var path = [];
for (var i = 0; i < result.routes[0].overview_path.length; i++) {
path.push(result.routes[0].overview_path[i]);
}
//Set the Path Stroke Color
var polyOptions = {
strokeColor: color,
strokeOpacity: 1.0,
strokeWeight: 8,
path: path,
map: map
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
}
});
}
function pinSymbol(color, rotation) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 1,
rotation: rotation,
scale: 1
};
}
</script>
</head>
<body>
<div id="dvMap" style="width:1000px;height:1000px"></div>
</body>
</html>
I tried to explicitly set the option has map.setZoom(15);
and i tired to set the preserve Viewport option of the map to true no luck please help

Remove the call to map.fitBounds if you want to control the zoom level of the map. The google.maps.Map.fitBounds method zooms and centers the map on its argument (a google.maps.LatLngBounds object).
fitBounds(bounds:LatLngBounds|LatLngBoundsLiteral)
Return Value: None
Sets the viewport to contain the given bounds.
Then set the center and zoom level of the map to whatever you desire.
code snippet:
var gmarkers = [];
var colorVariable = ["yellow", "green", "red", "saffron", "yellow", "green", "red", "yellow", "green", "red"];
var map;
var degree = 0;
function autoRotate() {
var $elie = $("#dvMap");
degree = degree + 65;
rotate(degree);
function rotate(degree) {
// For webkit browsers: e.g. Chrome
$elie.css({
WebkitTransform: 'rotate(' + degree + 'deg)'
});
$elie.css({
'-moz-transform': 'rotate(' + degree + 'deg)'
});
$elie.css({
'-ms-transform': 'rotate(' + degree + 'deg)'
});
$elie.css({
'-o-transform': 'rotate(' + degree + 'deg)'
});
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setIcon(icon48.png("red", -degree));
}
}
}
window.onload = function() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
heading: 90,
tilt: 45,
styles: [{
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}]
};
map = new google.maps.Map(document.getElementById("dvMap"), 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,
icon: 'icon48.png',
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);
gmarkers.push(marker);
}
map.setCenter(latlngbounds.getCenter());
//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < lat_lng.length; i++) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
var k = i;
i = i + 1;
getDirections(src, des, colorVariable[k], map);
}
/*autoRotate();*/
}
function getDirections(src, des, color, map) {
//Intialize the Direction Service
var service = new google.maps.DirectionsService();
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
//Intialize the Path Array
var path = [];
for (var i = 0; i < result.routes[0].overview_path.length; i++) {
path.push(result.routes[0].overview_path[i]);
}
//Set the Path Stroke Color
var polyOptions = {
strokeColor: color,
strokeOpacity: 1.0,
strokeWeight: 8,
path: path,
map: map
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
}
});
}
function pinSymbol(color, rotation) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 1,
rotation: rotation,
scale: 1
};
}
var markers = [{
"title": 'point4',
"lat": '1.355333',
"lng": '103.987305',
"description": 'uuu'
}, {
"title": 'point3',
"lat": '1.354432',
"lng": '103.987262',
"description": 'zzz'
}, {
"title": 'point3',
"lat": '1.354432',
"lng": '103.987262',
"description": 'zzz'
}, {
"title": 'point3',
"lat": '1.353199',
"lng": '103.986908',
"description": 'zzz'
}, {
"title": 'point3',
"lat": '1.353199',
"lng": '103.986908',
"description": 'zzz'
}, {
"title": 'point4',
"lat": '1.352389',
"lng": '103.986538',
"description": 'zzz'
}, {
"title": 'point1',
"lat": '1.353751',
"lng": '103.986688',
"description": 'xxxx'
}, {
"title": 'point2',
"lat": '1.352657',
"lng": '103.986184',
"description": 'yyyy'
}, {
"title": 'point3',
"lat": '1.352657',
"lng": '103.986184',
"description": 'zzz'
}, {
"title": 'point4',
"lat": '1.351477',
"lng": '103.985701',
"description": 'uuu'
}, {
"title": 'point4',
"lat": '1.351477',
"lng": '103.985701',
"description": 'uuu'
}, {
"title": 'point4',
"lat": '1.350265',
"lng": '103.985165',
"description": 'uuu'
}];
html,
body,
#dvMap {
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="dvMap"></div>

i have tried like this check once it's working by setZoom() why your not getting because your setting bounds so after bounds setup zoom changing related to bounds,if you want all markers at zoom level 15 then don't set bounds,if not can you tell me where you want set zoom exactly...
<!DOCTYPE html>
<html>
<head lang="en">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var markers = [{
"title": 'point4',
"lat": '1.355333',
"lng": '103.987305',
"description": 'uuu'
}, {
"title": 'point3',
"lat": '1.354432',
"lng": '103.987262',
"description": 'zzz'
}, {
"title": 'point3',
"lat": '1.354432',
"lng": '103.987262',
"description": 'zzz'
},{
"title": 'point3',
"lat": '1.353199',
"lng": '103.986908',
"description": 'zzz'
},{
"title": 'point3',
"lat": '1.353199',
"lng": '103.986908',
"description": 'zzz'
}, {
"title": 'point4',
"lat": '1.352389',
"lng": '103.986538',
"description": 'zzz'
},{
"title": 'point1',
"lat": '1.353751',
"lng": '103.986688',
"description": 'xxxx'
}, {
"title": 'point2',
"lat": '1.352657',
"lng": '103.986184',
"description": 'yyyy'
}, {
"title": 'point3',
"lat": '1.352657',
"lng": '103.986184',
"description": 'zzz'
}, {
"title": 'point4',
"lat": '1.351477',
"lng": '103.985701',
"description": 'uuu'
}, {
"title": 'point4',
"lat": '1.351477',
"lng": '103.985701',
"description": 'uuu'
}, {
"title": 'point4',
"lat": '1.350265',
"lng": '103.985165',
"description": 'uuu'
}];
var gmarkers = [];
var colorVariable = ["yellow", "green", "red", "saffron","yellow", "green", "red","yellow", "green", "red"];
var map;
var degree = 0;
function autoRotate() {
var $elie = $("#dvMap");
degree = degree + 65;
rotate(degree);
function rotate(degree) {
// For webkit browsers: e.g. Chrome
$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
$elie.css({ '-ms-transform': 'rotate(' + degree + 'deg)'});
$elie.css({ '-o-transform': 'rotate(' + degree + 'deg)'});
for (var i= 0; i < gmarkers.length; i++) {
gmarkers[i].setIcon(icon48.png("red", -degree));
}
}
}
window.onload = function() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
heading: 90,
tilt: 45,
styles: [
{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
}
]
};
map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
console.log(map.getZoom());
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,
icon:'icon48.png',
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);
gmarkers.push(marker);
}
map.setZoom(15);
console.log(map.getZoom());
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
map.addListener('zoom_changed', function() {
console.log(map.getZoom());
});
//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < lat_lng.length; i++) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
var k=i;
i=i+1;
getDirections(src, des, colorVariable[k], map);
}
/*autoRotate();*/
}
function getDirections(src, des, color, map) {
//Intialize the Direction Service
var service = new google.maps.DirectionsService();
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
//Intialize the Path Array
var path = [];
for (var i = 0; i < result.routes[0].overview_path.length; i++) {
path.push(result.routes[0].overview_path[i]);
}
//Set the Path Stroke Color
var polyOptions = {
strokeColor: color,
strokeOpacity: 1.0,
strokeWeight: 8,
path: path,
map: map
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
}
});
}
function pinSymbol(color, rotation) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 1,
rotation: rotation,
scale: 1
};
}
</script>
</head>
<body>
<div id="dvMap" style="width:1000px;height:1000px"></div>
</body>
</html>

Related

Can't get listener to open infoWindow on click with drop down animation

<!doctype html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="style.css">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<style>
html, body height: 100%;}
body {font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif; font-size: 16px; margin: 0; padding: 0;}
img { vertical-align: text-bottom; }
#map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
<code> remove to run
var json = [
{
"title": "Aamodt's Apple Farm",
"lat": 45.0421379,
"lng": -92.8657445,
"color": "red",
"description": "6428 Manning Ave N<br />Stillwater, MN<br />651-439-3127"
},
{
"title": "American Legion Post 643",
"lat": 44.7776140,
"lng": -93.3410110,
"color": "green",
"description": "12375 Princeton Ave.<br />Savage, MN<br />612-270-3519"
},
{
"title": "Wilderness Bar & Grill, Elysian",
"lat": 44.197934,
"lng": -93.681275,
"color": "green",
"description": "505 W Highway 60<br />Elysian, MN<br />507-267-4455"
},
{
"title": "Winjum`s Shady Acres Restaurant & Resort",
"lat": 44.3301350,
"lng": -93.3608110,
"color": "green",
"description": "17759 177th St W<br />Faribault, MN<br />507-334-6661"
}]
</code> remove to run
var map;
var color;
var markers = [];
// create map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(44.7776140, -93.3410110),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// create infoWindow
var infoWindow = new google.maps.InfoWindow();
for (var i = 0; i < json.length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
if (data.color == "green") {
color = "#015982";
}
if (data.color == "red") {
color = "#FF0000";
}
title = data.title;
description = data.description;
addMarkerWithTimeout(latLng, i * 200, color, title, description);
}
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description) {
window.setTimeout(function() {
marker=markers.push(new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
}));
attachContent(marker, data);
}, timeout);
}
// open infor window on click
function attachContent(marker, data) {
marker.addListener('click', function() {
var content = data.title + "<br />" + data.description;
infoWindow.setContent(content);
infoWindow.open(map, marker);
})(marker, data);
}
</script>
</body>
</html>
I can make this drop markers with a working rollover that displays the title, but with the drop in animation I can not get the 'click' listener for the infoWindow to work. I really need another set of eye on this one. The only examples I can find either show drop animation, or the infoWindow working but not both at the same time.

Your code mistakes at here.
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description) {
window.setTimeout(function() {
var marker = new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
});
markers.push(marker);
attachContent(marker, data);
}, timeout);
}

I get a javascript error with your code Uncaught TypeError: marker.addListener is not a function on this line (inside the attachContent function):
marker.addListener('click', function() {
The marker you are passing in to that function, is not a google.maps.Marker object, it is the return value of Array.push (the length of the array). Change addMarkerWithTimeout from:
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description) {
window.setTimeout(function() {
marker=markers.push(new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
}));
attachContent(marker, data);
}, timeout);
}
To:
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description) {
window.setTimeout(function() {
var marker = new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
});
markers.push(marker);
attachContent(marker, data);
}, timeout);
}
proof of concept fiddle
code snippet:
var color;
var markers = [];
function initialize() {
// create map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(44.7776140, -93.3410110),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// create infoWindow
var infoWindow = new google.maps.InfoWindow();
for (var i = 0; i < json.length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
if (data.color == "green") {
color = "#015982";
}
if (data.color == "red") {
color = "#FF0000";
}
title = data.title;
description = data.description;
addMarkerWithTimeout(latLng, i * 200, color, title, description, data);
}
// add marker with delay
function addMarkerWithTimeout(position, timeout, color, title, description, data) {
window.setTimeout(function() {
var marker = new google.maps.Marker({
position: position,
map: map,
title: title,
info: description,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7.5,
fillColor: color,
fillOpacity: 0.8,
strokeWeight: 0.4
},
animation: google.maps.Animation.DROP
});
markers.push(marker);
attachContent(marker, data);
}, timeout);
}
// open infor window on click
function attachContent(marker, data) {
marker.addListener('click', function(evt) {
var content = data.title + "<br />" + data.description;
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
}
}
google.maps.event.addDomListener(window, "load", initialize);
var json = [{
"title": "Aamodt's Apple Farm",
"lat": 45.0421379,
"lng": -92.8657445,
"color": "red",
"description": "6428 Manning Ave N<br />Stillwater, MN<br />651-439-3127"
}, {
"title": "American Legion Post 643",
"lat": 44.7776140,
"lng": -93.3410110,
"color": "green",
"description": "12375 Princeton Ave.<br />Savage, MN<br />612-270-3519"
}, {
"title": "Wilderness Bar & Grill, Elysian",
"lat": 44.197934,
"lng": -93.681275,
"color": "green",
"description": "505 W Highway 60<br />Elysian, MN<br />507-267-4455"
}, {
"title": "Winjum`s Shady Acres Restaurant & Resort",
"lat": 44.3301350,
"lng": -93.3608110,
"color": "green",
"description": "17759 177th St W<br />Faribault, MN<br />507-334-6661"
}];
html,
body {
height: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
font-size: 16px;
margin: 0;
padding: 0;
}
img {
vertical-align: text-bottom;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Google Maps API v3 Info Window setContent syntax error

I am trying to set the content of an info window but I am having syntax errors accessing the JSON object.
Example from elsewhere on Stack Overflow I am following
JavaScript snippet:
var localLayer = new google.maps.Data();
localLayer.loadGeoJson('JSON/local.geojson');
localLayer.setMap(map);
var localInfoWindow = new google.maps.InfoWindow({
var address = localLayer.features.properties.Address;
content: "<h3>" + address + "</h3>"
});
google.maps.event.addListener(localLayer, 'click', function(event){
localInfoWindow.setPosition(event.feature.getGeometry().get());
localInfoWindow.open(map, localLayer);
});
What am I doing wrong?
JSON snippet:
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "OBJECTID": 1, "Address": "14300 McMullen Highway SW", "City": "Cumberland", "State": "MD", "Zip_Code": 21502, "Type": "Detention Center", "Agency_Nam": "Allegany County Detention Center", "County": "Allegany" }, "geometry": { "type": "Point", "coordinates": [ -78.823195987258302, 39.598971947812366 ] } },
{ "type": "Feature", "properties": { "OBJECTID": 2, "Address": "131 Jennifer Road", "City": "Annapolis", "State": "MD", "Zip_Code": 21401, "Type": "Detention Center", "Agency_Nam": "Anne Arundel County Detention Center", "County": "Anne Arundel" }, "geometry": { "type": "Point", "coordinates": [ -76.530041483218611, 38.988903980495373 ] } }, . . .
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maryland Prisoner Map</title>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--Google Maps API-->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<!--Stamen Basemaps-->
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<!--CSS-->
<link href="style.css" rel="stylesheet" type="text/css">
<!--JavaScript-->
<script src="script.js" type="text/javascript"></script>
</head>
<body class="page-wrap">
<h1 id="header">Maryland Prisoner Map</h1>
<p></p>
<div id="map"></div>
</body>
</html>
CSS:
#header {
text-align: center;
}
#map {
height: 450px;
width: 80%;
margin: 0 auto;
border: 1px solid black;
box-shadow: 2px 2px 1px 2px gray;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
JavaScript:
$(document).ready(function() {
var layer = "toner-lite";
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(39.290385, -76.612189),
zoom: 10,
mapTypeId: layer,
mapTypeControlOptions: {
mapTypeIds: [layer, google.maps.MapTypeId.HYBRID]
}
});
map.mapTypes.set(layer, new google.maps.StamenMapType(layer));
//load data into map
var localLayer = new google.maps.Data();
localLayer.loadGeoJson('JSON/local.geojson');
localLayer.setMap(map);
var localInfoWindow = new google.maps.InfoWindow({
var address = localLayer.features.properties.Address;
content: "<h3>" + address + "</h3>"
});
google.maps.event.addListener(localLayer, 'click', function(event){
localInfoWindow.setPosition(event.feature.getGeometry().get());
localInfoWindow.open(map, localLayer);
});
var stateLayer = new google.maps.Data();
stateLayer.loadGeoJson('JSON/state.geojson');
stateLayer.setMap(map);
var stateInfoWindow = new google.maps.InfoWindow({
content: "I am a state level jail or prison"
});
google.maps.event.addListener(stateLayer, 'click', function(event){
stateInfoWindow.setPosition(event.feature.getGeometry().get());
stateInfoWindow.open(map, stateLayer);
});
var federalLayer = new google.maps.Data();
federalLayer.loadGeoJson('JSON/federal.geojson');
federalLayer.setMap(map);
var federalInfoWindow = new google.maps.InfoWindow({
content: "I am a federal level jail or prison"
});
google.maps.event.addListener(federalLayer, 'click', function(event){
federalInfoWindow.setPosition(event.feature.getGeometry().get());
federalInfoWindow.open(map, federalLayer);
});
var marylandLayer = new google.maps.Data();
marylandLayer.loadGeoJson('JSON/maryland.geojson');
//give the map style
marylandLayer.setStyle(function(feature) {
return {
fillColor: getColor(feature.getProperty('Difference')), // call function to get color for state based on the COLI (Cost of Living Index)
fillOpacity: 0.9,
strokeColor: '#FFFFFF',
strokeWeight: 1,
zIndex: 1
};
});
//set layer to map
marylandLayer.setMap(map)
//get some color
function getColor(Difference) {
return Difference >= 94 ? '#b10026' :
Difference > 76 ? '#e31a1c' :
Difference > 58 ? '#fc4e2a' :
Difference > 38 ? '#fd8d3c' :
Difference > 20 ? '#feb24c' :
Difference > 7 ? '#fed976' :
Difference > 1 ? '#ffffb2' :
Difference > -1 ? '#FFFFFF' :
'#000000';
};
// Add mouseover and mouse out styling for the GeoJSON Maryland data
marylandLayer.addListener('mouseover', function(e) {
marylandLayer.overrideStyle(e.feature, {
strokeColor: '#2a2a2a',
strokeWeight: 2,
zIndex: 2
});
});
marylandLayer.addListener('mouseout', function(e) {
marylandLayer.revertStyle();
});
var polygonInfoWindow = new google.maps.InfoWindow({
content: marylandLayer.features.properties.Difference
});
google.maps.event.addListener(marylandLayer, 'click', function(event){
polygonInfoWindow.setPosition(event.feature.getGeometry().get());
polygonInfoWindow.open(map, marylandLayer);
});
});

You need to load the content into the infowindow inside the layer 'click' listener. Inside that function evt is a reference to the feature and you can call the getProperty method to access that feature's properties:
localLayer.addListener('click', function (evt) {
var address = evt.feature.getProperty("Address");
localInfoWindow.setContent("<h3>" + address + "</h3>");
localInfoWindow.setPosition(evt.feature.getGeometry().get());
localInfoWindow.open(map);
});
proof of concept fiddle

How to add multiple styles of Google Maps using StyledMapType?

I have added one additional style to a Google Map, following Google's instructions.
However I have had no sucess adding more than one style. Can this be achieved? If so, how?
Here is an example: http://jsfiddle.net/mikegoodstadt/A9zwa/3/
Many thanks for any suggestions,
Mike
var geocoder;
var map;
var MAPTYPE_1;
var MAPTYPE_2;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlngLondon = new google.maps.LatLng(51.507335, -0.127683);
var latlngMarrakech = new google.maps.LatLng(34.02590, -6.83640);
var style1 = [
{
"stylers": [
{ "visibility": "on" },
{ "weight": 0.9 },
{ "gamma": 0.99 },
{ "lightness": -4 },
{ "hue": "#ffc300" },
{ "saturation": -14 }
]
}
];
var style2 = [
{
"stylers": [
{ "visibility": "on" },
{ "weight": 0.9 },
{ "gamma": 0.99 },
{ "lightness": -4 },
{ "hue": "#ff6e00" },
{ "saturation": -14 }
]
}
];
var mapOptions = {
zoom: 12,
center: latlngLondon,
mapTypeControl: 1,
panControl: 0,
streetViewControl: 0,
zoomControl: 0,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MAPTYPE_1, MAPTYPE_2]
},
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var mapType1 = new google.maps.StyledMapType(style1, {name: 'London'});
var mapType2 = new google.maps.StyledMapType(style2, {name: 'Marrakech'});
map.mapTypes.set(MAPTYPE_1, mapType1);
map.mapTypes.set(MAPTYPE_2, mapType2);
}
function codeAddress() {
var address = document.getElementById("search-address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Buscedad sin exito: " + status);
}
});
}

You need to declare/set the setMapTypeIDs
map.mapTypes.set('MAPTYPE_1', mapType1);
map.setMapTypeId('MAPTYPE_1');
map.mapTypes.set('MAPTYPE_2', mapType2);
map.setMapTypeId('MAPTYPE_2');

Google Maps API v3 multiple clickable markers

I'm trying to put multiple markers on Google Maps but making them each refers to an URL. I put all the markers in a loop but only the last one is executed. I want all of them to work.
Here is my code:
<script type="text/javascript">
function initialize() {
var json = [
{
"title": "title1",
"lat": 46.077428,
"lng": 18.229837
},
{
"title": "title2",
"lat": 46.042229,
"lng": 18.227134
},
{
"title": "title3",
"lat": 46.082831,
"lng": 18.225911
},
{
"title": "title4",
"lat": 46.092058,
"lng": 18.185645
},
{
"title": "title5",
"lat": 46.075493,
"lng": 18.22885,
"description": "some description to the 5th element",
"url": "http://www.pannon-home.hu/"
},
{
"title": "title6",
"lat": 46.075344,
"lng": 18.227713,
"description": "some description to the 6th element",
"url": "http://www.pannon-home.hu/"
}
]
var latlng = new google.maps.LatLng(46.071325, 18.233185);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var firstmap = new google.maps.Map(document.getElementById("allmap"),myOptions);
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: firstmap,
title: data.title,
url: data.url,
icon: 'home.png'
});
}
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "mouseover", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(firstmap, marker);
});
google.maps.event.addListener(marker, "mouseout", function() {
infoWindow.setContent("");
infoWindow.close();
});
google.maps.event.addListener(marker, "click", function() {
location.assign(marker.url);
});
}
</script>

create a new marker object
and marker.setMap(map);

Too much of your logic lies outside of your for loop, causing much of your logic to only be applied to the last marker. Try this adjustment:
<script type="text/javascript">
function initialize() {
var json = [
{
"title":"title1",
"lat":46.077428,
"lng":18.229837
},
{
"title":"title2",
"lat":46.042229,
"lng":18.227134
},
{
"title":"title3",
"lat":46.082831,
"lng":18.225911
},
{
"title":"title4",
"lat":46.092058,
"lng":18.185645
},
{
"title":"title5",
"lat":46.075493,
"lng":18.22885,
"description":"some description to the 5th element",
"url":"http://www.pannon-home.hu/"
},
{
"title":"title6",
"lat":46.075344,
"lng":18.227713,
"description":"some description to the 6th element",
"url":"http://www.pannon-home.hu/"
}
]
var latlng = new google.maps.LatLng(46.071325, 18.233185);
var myOptions = {
zoom:12,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var firstmap = new google.maps.Map(document.getElementById("allmap"), myOptions);
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position:latLng,
map:firstmap,
title:data.title,
url:data.url,
icon:'home.png'
});
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "mouseover", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(firstmap, marker);
});
google.maps.event.addListener(marker, "mouseout", function () {
infoWindow.setContent("");
infoWindow.close();
});
google.maps.event.addListener(marker, "click", function () {
location.assign(marker.url);
});
}
}
</script>

Why google map is not drawing a polylines?

I am making a Polyline on google maps. But i can't see it. Following is the code:
$('#mapdiv').html('<div id="map_convas" style="width:640px; height:427px; margin-left:auto; margin-right:auto"></div>');
var centerLatLng = new google.maps.LatLng(obj[i].centerlat, obj[i].centerlong);
var myOptions = {
center: centerLatLng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: true
};
var map_polyline;
var map = new google.maps.Map(document.getElementById("map_convas"),
myOptions);
var marker = new google.maps.Marker({
clickable: true,
position: centerLatLng,
map: map,
zIndex: 1
});
marker.setIcon('http://localhost:8888/images/marker.png');
var locations = obj[0].locations;
// in my current case locations.length is 1
for(var p=0; p<locations.length; p++){
var triangleCoords = new Array();
var markerArray = locations[p];
for(var x=0;x<markerArray.length;x++){
triangleCoords.push(new google.maps.LatLng(markerArray[x].latitude, markerArray[x].longitude));
}
map_polyline = new google.maps.Polyline({
path: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
map_polyline.setMap(map);
}
// doing some stuff
google.maps.event.trigger(map, "resize");
Json which i am parsing and making obj is following:
[
{
"centerlat": 55.68369272317236,
"centerlong": 13.176000376097194,
"locations": [
[
{
"longitude": 13.17480473780369,
"latitude": 13.17480473780369
},
{
"longitude": 13.17456847989296,
"latitude": 13.17456847989296
},
{
"longitude": 13.17426541821395,
"latitude": 13.17426541821395
},
{
"longitude": 13.1741324253503,
"latitude": 13.1741324253503
},
{
"longitude": 13.17386236043011,
"latitude": 13.17386236043011
},
{
"longitude": 13.17352138460909,
"latitude": 13.17352138460909
}
]
]
}
]
and i am parsing it using following line of code:
var obj = jQuery.parseJSON(result);
Everything else like center of map, marker and size is working fine. The only thing is that i can not see any polyline on the map. i put some alert to check values of markerArray and triangleCoords. They are fine. Can anybody tell me why can't i see the polylines? I am using more maps intances before. Is there any problem because of them? Thanks in advance.

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Zoom option is not working for google map - google-maps

Related

Can't get listener to open infoWindow on click with drop down animation

Google Maps API v3 Info Window setContent syntax error

How to add multiple styles of Google Maps using StyledMapType?

Google Maps API v3 multiple clickable markers

Why google map is not drawing a polylines?

Categories

Resources