Google Maps API v3 Info Window setContent syntax error - json

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

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>

Zoom option is not working for google map

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>

How to layer polygons and points in Fusion Tables

This has something to do with the Fusion Table Layer with polygons AND markers question. I have tried (below) the idea to overlay a layer of polygons with a layer of points/icons. However, I get only the polygons.
function initialize() {
var MAP = {
zoom : 5,
center : new google.maps.LatLng(-25.610111, 134.354806),
mapTypeId : google.maps.MapTypeId.ROADMAP
},
MAP = new google.maps.Map(document.getElementById("map-canvas"), MAP);
var L1 = new google.maps.FusionTablesLayer({
query : {
select : "geometry",
from : "1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ"
},
suppressInfoWindows : false,
styles : [{
where : "birds > 300",
polygonOptions : {
fillColor : "#FF0000",
fillOpacity : .4
}
}, {
where : "birds <= 300",
polygonOptions : {
fillColor : "#0000FF",
fillOpacity : .4
}
}
]
});
var L2 = new google.maps.FusionTablesLayer({
query : {
select : "geometry",
from : "1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ"
},
suppressInfoWindows : false,
styles : [{
where : "population > 5",
markerOptions : {
iconName : "snowflake_simple"
}
}, {
where : "population <= 5",
markerOptions : {
iconName : "sunny"
}
}
]
});
L1.setMap(MAP);
L2.setMap(MAP);
}
google.maps.event.addDomListener(window, "load", initialize);
I have tried a variety of different approaches, including specifying the map within the FusionTablesLayer call. Either I get the polygons or I get the points but not both.
Where am I going wrong with this?
The HTML framework I'm running this in is as follows:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Fusion Tables layers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script src="coldfusion.js"></script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
LATER
"Note: Styles can only be applied to a single Fusion Tables layer per map. You may apply up to five styles to that layer." -- FusionTablesLayer documentation
And there I am trying to have style on the polygons and style on the points. Sigh.

How to get the marker been clicked after loading with loadGeoJson call?

I have a long list of points in a GeoJson file, and I'm loading it with:
map.data.loadGeoJson() call.
Each point has an icon on google maps.
I have a click listener to trap when a user click one of those points, and then display an info window. I'm not sure how to get the marker that's been clicked inside the listener, in order to tell the infoWindow where to post, do you guys know?

You can get the position of the clicked marker using (where event is the DataMouseEvent object):
event.feature.getGeometry().get()
working code snippet:
// global variables
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
function initialize() {
// Create a simple map.
features = [];
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 4,
center: {
lat: -28,
lng: 137.883
}
});
google.maps.event.addListener(map, 'click', function() {
infowidow.close();
});
// process the loaded GeoJSON data.
google.maps.event.addListener(map.data, 'addfeature', function(e) {
if (e.feature.getGeometry().getType() === 'Point') {
bounds.extend(e.feature.getGeometry().get());
map.fitBounds(bounds);
}
});
map.data.addGeoJson(data);
// Set click event for each feature.
map.data.addListener('click', function(event) {
infowindow.setContent('<div style="width:50px;">' + event.feature.getProperty('htmlContent') + '</div>');
infowindow.setOptions({
pixelOffset: new google.maps.Size(0, -36)
});
infowindow.setPosition(event.feature.getGeometry().get());
infowindow.open(map);
google.maps.event.addListenerOnce(infowindow, 'domready', function() {
infowindow.close();
infowindow.open(map);
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
var data = {
"type": "FeatureCollection",
"features":
[
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-73.563032, 45.495403]
},
"properties": {
"htmlContent": "point 0"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-73.549762, 45.559673]
},
"properties": {
"htmlContent": "point 1"
}
}
]
};
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

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>