Google Maps Street view Breakage

Google Maps Street view Breakage - javascript

We are using Google street view Api Version 3 for our product. We are facing an issue when the street view is loading for the first time. The view is breaking in to pieces/pix, where as when we see the same view in Google maps it is not breaking but the imaginary is showing Blur effect. How we can give the same blur effect in our product also?`
Click this link to see the breaking effect: http://jsfiddle.net/godwinthaya/4wfLkc3t/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Street View service</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"></script>
<script>
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var mapOptions = {
center: fenway,
zoom: 14
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//marker
var busMarker = new google.maps.Marker({
position: fenway,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
title: 'Bus Stop'
});
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('map-canvas'), panoramaOptions);
map.setStreetView(fenway);
panorama.setPov(/** #type {google.maps.StreetViewPov} */({
heading: 265,
pitch: 0
}));
google.maps.event.addListener(busMarker, 'click', function() {
alert("Hai");
infowindow.open(map,busMarker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<!--<div id="map-canvas" style="width: 400px; height: 300px"></div> -->
<div id="map-canvas" style="position:absolute; width: 1000px; height: 600px;"></div>
</body>
</html>

Are you calling the events correctly? What you are asking could most likely be a part of the API but there is no documentation or reference as to implement the "blurred effect". Although, if you call all the events correctly, it should give you the default behavior. Here's the sample code for the different events:
var cafe = new google.maps.LatLng(37.869085, -122.254775);
function initialize() {
var panoramaOptions = {
position: cafe,
pov: {
heading: 270,
pitch: 0
},
visible: true
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
google.maps.event.addListener(panorama, 'pano_changed', function() {
var panoCell = document.getElementById('pano_cell');
panoCell.innerHTML = panorama.getPano();
});
google.maps.event.addListener(panorama, 'links_changed', function() {
var linksTable = document.getElementById('links_table');
while (linksTable.hasChildNodes()) {
linksTable.removeChild(linksTable.lastChild);
}
var links = panorama.getLinks();
for (var i in links) {
var row = document.createElement('tr');
linksTable.appendChild(row);
var labelCell = document.createElement('td');
labelCell.innerHTML = '<b>Link: ' + i + '</b>';
var valueCell = document.createElement('td');
valueCell.innerHTML = links[i].description;
linksTable.appendChild(labelCell);
linksTable.appendChild(valueCell);
}
});
google.maps.event.addListener(panorama, 'position_changed', function() {
var positionCell = document.getElementById('position_cell');
positionCell.firstChild.nodeValue = panorama.getPosition() + '';
});
google.maps.event.addListener(panorama, 'pov_changed', function() {
var headingCell = document.getElementById('heading_cell');
var pitchCell = document.getElementById('pitch_cell');
headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
});
}
google.maps.event.addDomListener(window, 'load', initialize);
:

Related

Increase size of custom markers while zooming in? Using Google Maps and GeoJSON

I have a map where I call 150 locations through a GeoJSON file and each one is represented by a custom image (22px,17px). The issue comes when zooming in (after zoom 17) where these markers look relatively tiny. I would like to know is there a way to ensure getting the same size on my icons whenever I zoom in.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false &libraries=visualization"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 13,
scrollwheel: true,
panControl: true,
zoomControl: true,
scaleControl: false,
disableDefaultUI: false,
center: new google.maps.LatLng(19.043516, -98.198232),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var script = document.createElement('script');
script.src = 'https://storage.googleapis.com/operations_poligone/datos/Test_JSON11.geojson';
document.getElementsByTagName('head')[0].appendChild(script);
map.data.setStyle(function(feature) {
var mag = 3;
var grd = feature.getProperty('Grd');
var ctgData = feature.getProperty('Ctg');
var ctgColor = {
"Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
"Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
"Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
};
return ({
icon: ctgColor[ctgData]
});
});
}
function eqfeed_callback(results) {
map.data.addGeoJson(results);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I have seen some solutions here but I don't know how to apply it when calling a GeoJSON file from outside. (How to set Google maps marker size dynamically)

You can scale the existing markers up as is done in the question you reference
google.maps.event.addListener(map, 'zoom_changed', function() {
map.data.setStyle(function(feature) {
var mag = 3;
var grd = feature.getProperty('Grd');
var ctgData = feature.getProperty('Ctg');
var ctgColor = {
"Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
"Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
"Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
};
var size;
var zoom = map.getZoom();
if (zoom > 13) {
size = new google.maps.Size(44,34);
} else {
size = new google.maps.Size(22,17);
}
return ({
icon: {url: ctgColor[ctgData],
size: size,
scaledSize: size}
});
});
})
They will get fuzzy, you are better off creating separate markers for the higher zoom levels.
code snippet:
var map;
function initialize() {
var mapOptions = {
zoom: 13,
scrollwheel: true,
panControl: true,
zoomControl: true,
scaleControl: false,
disableDefaultUI: false,
center: new google.maps.LatLng(19.043516, -98.198232),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var script = document.createElement('script');
script.src = 'https://storage.googleapis.com/operations_poligone/datos/Test_JSON11.geojson';
document.getElementsByTagName('head')[0].appendChild(script);
map.data.setStyle(function(feature) {
var mag = 3;
var grd = feature.getProperty('Grd');
var ctgData = feature.getProperty('Ctg');
var ctgColor = {
"Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
"Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
"Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
};
return ({
icon: ctgColor[ctgData]
});
});
google.maps.event.addListener(map, 'zoom_changed', function() {
map.data.setStyle(function(feature) {
var mag = 3;
var grd = feature.getProperty('Grd');
var ctgData = feature.getProperty('Ctg');
var ctgColor = {
"Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
"Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
"Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
};
var size;
var zoom = map.getZoom();
document.getElementById("zoom").innerHTML = zoom;
if (zoom > 13) {
size = new google.maps.Size(44, 34);
} else {
size = new google.maps.Size(22, 17);
}
return ({
icon: {
url: ctgColor[ctgData],
size: size,
scaledSize: size
}
});
});
})
}
function eqfeed_callback(results) {
map.data.addGeoJson(results);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="zoom"></div>
<div id="map-canvas"></div>

How to get Google Maps onclick to get location name?

Anyone please help to achieve to get location name while click google map.
E.g:
If i am going to click on US states like "Texas or Alabama" location marker then need to get exact values while onclick.
If there is any other way to get the location name. If it's possbile then please share you experiece. Awaiting your replay.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"></meta>
<title>Copy of USA Nevada state - City Level data - Google Fusion Tables</title>
<style type="text/css">
html, body, #googft-mapCanvas {
height: 300px;
margin: 0;
padding: 0;
width: 500px;
}
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&v=3"></script>
<script type="text/javascript">
//Fusion Table URL : https://www.google.com/fusiontables/data?docid=1vKMjmiVb3eHCEnQ6j5HpIYGZ3Gttth8ac317nxNg#map:id=3
function initialize() {
google.maps.visualRefresh = true;
var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
(navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
if (isMobile) {
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
}
var mapDiv = document.getElementById('googft-mapCanvas');
mapDiv.style.width = isMobile ? '100%' : '900px';
mapDiv.style.height = isMobile ? '100%' : '900px';
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(32.48632729547162, -108.729549109375),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col3",
from: "1vKMjmiVb3eHCEnQ6j5HpIYGZ3Gttth8ac317nxNg",
where: ""
},
options: {
styleId: 3,
templateId: 4
}
});
google.maps.event.addlistener(layer, 'click', function () {
var selectedPlaceName = event.latlng.place.name;
});
if (isMobile) {
var legend = document.getElementById('googft-legend');
var legendOpenButton = document.getElementById('googft-legend-open');
var legendCloseButton = document.getElementById('googft-legend-close');
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
legendCloseButton.style.display = 'block';
legendOpenButton.onclick = function () {
legend.style.display = 'block';
legendOpenButton.style.display = 'none';
}
legendCloseButton.onclick = function () {
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googft-mapCanvas"></div>
<div class='googft-info-window'>
<b>name:</b> {name}<br>
<b>id:</b> {id}<br>
<b>geometry:</b> {geometry}
</div>
</body>
</html>

Use: place.name
Here is the code that provide the location name onclick event.
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-33.8665433, 151.1956316),
zoom: 15
});
var request = {
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
};
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.getDetails(request, function(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);// Here you can set your place name
infowindow.open(map, this);
});
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
For More details follow this link: Google Map Place Details

Open infowindows by default

I have a problem with Google Maps info windows. I have 2 markers and I want to open both info windows by default. But I can't figure out how to do it.
Here is my code:
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=<key>&sensor=false"></script>
<script type="text/javascript">
var locations = [
['loan 1', 46.166621, 8.853315, '<div style="width:250px">text info 1'],
['loan 2', 46.173000, 8.856315, '<div style="width:250px">text info 2'],
];
function initialize() {
var myOptions = {
center: new google.maps.LatLng(46.166621, 8.853315),
zoom: 15,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("default"), myOptions);
setMarkers(map,locations);
}
function setMarkers(map,locations){
var marker, i
for (i = 0; i < locations.length; i++) {
var loan = locations[i][0]
var lat = locations[i][1]
var long = locations[i][2]
var add = locations[i][3]
latlngset = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
map: map, title: loan , position: latlngset
});
map.setCenter(marker.getPosition())
var content = add
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
}
</script>
</head>
<body onLoad="initialize()">
<div id="default" style="width:100%; height:100%"></div>
</body>
</html>
I tried adding infowindow.open(map,marker); in various place but stil don't work.

Trigger the click-event for the markers.
Put this at the end of the for-loop:
google.maps.event.trigger(marker,'click',{});
working fiddle

Google maps load additional markers when map is dragged

I've created a Google Map where markers are loaded via Json. I have been doing a lot of research to load additional markers when the map is dragged, but the function onClickCallback does not get fired. Would you please help me?
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQmgDjepa9e-ce16YlwjKBD9gJRfnQUEI&sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.ui.map.js"></script>
<style type="text/css">
#map {
width: 800px;
height: 600px;
}
#latlng-control {
background: #ffc;
border: 1px solid #676767;
font-family: arial, helvetica, sans-serif;
font-size: 0.7em;
padding: 2px 4px;
position: absolute;
}
</style>
<script type="text/javascript">
$(function() {
var map;
var infoWindow;
var bounds;
var markers = new Array();
var markers = [];
var lat = 47.2081;
var lon = 10.14175;
var zoom = 11;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(lat, lon),
zoom: zoom,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, mapOptions);
// Define an info window on the map.
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'tilesloaded', function () {
onClickCallback(map);
});
google.maps.event.addListener(map, "dragend", function() {
var bounds = this.getBounds();
onClickCallback(map);
});
}
function onClickCallback(map) {
var bounds = map.getBounds();
// clearOverlays();
$.getJSON( 'http://skiweather.eu/gmap4/markers/index.php', {
swLat: bounds.getSouthWest().lat(), swLon: bounds.getSouthWest().lng(),
neLat: bounds.getNorthEast().lat(), neLon: bounds.getNorthEast().lng()}, function(data) {
$.each( data.markers, function(i, marker) {
// Define Marker properties
var image = new google.maps.MarkerImage(marker.smallimg,
// This marker is 129 pixels wide by 42 pixels tall.
new google.maps.Size(42, 42),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 18,42.
new google.maps.Point(18, 42)
);
$('#map').gmap('addMarker', { 'id' : marker.id,
'position': new google.maps.LatLng(marker.latitude, marker.longitude),
'icon' : image,
'bounds': true
}).click(function() {
$('#map').gmap('openInfoWindow', { 'content': '<h2>' + marker.loc + '</h2><img src="' + marker.smallimg + '" class="my-map-marker" />'
}, this);
});
});
});
return false;
}
google.maps.event.addDomListener(window, 'load', initialize);
});
</script>
</head>
<body>
<div id="map" style="width:500px;height:500px;"></div>
<div id="loading">
</div>
</body>
</html>

I think if you changed it from 'dragend' to 'idle' it would serve two purposes. It would run the search for thumbnails after a zoom event and a pan event.
bounds are updated for both pan and zoom?
See here !Updated

How to fetch KML placement marker value in Google Maps API?

Dear all i am a newbie to Google Maps API. I have a parsed a KML layer in Google Maps API using GeoXML3. Now how do i fetch placement marker value(Name of the place) of KML in Google Maps API onclick. Like when a kml layer gets loaded on google maps and i am clicking on any marker i should be able to fetch the placement value of the marker in an alert box. Please find the code that helps me parse a kml on google maps api. Please guide.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>KML Layer</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript">
function initialize()
{
var chicago = new google.maps.LatLng(75.602836700999987,32.261890444473394);
var myOptions = {
zoom: 2,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//var transitLayer = new google.maps.TransitLayer();
//transitLayer.setMap(map);
var geoXml = new geoXML3.parser({map: map, singleInfoWindow: true});
geoXml.parse('kmload.kml');
var geoXml1 = new geoXML3.parser({map: map, singleInfoWindow: true});
geoXml1.parse('lines.kml');
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

Is this what you are looking for? I have added the alert in the onclick function which displays me the name of the placemark in the alert box. Please check and let me know if you find any issues.
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<title>KML Placement Value Test</title>
<style>
html, body, #map_canvas {
height: 100%;
margin: 0;
padding: 0;
}
#panel {
top: 5px;
left: 85%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
.infowindow * {font-size: 90%; margin: 0}
</style>
<script type="text/javascript" >
geocoder = new google.maps.Geocoder();
var geoXml = null;
var geoXmlDoc = null;
var map = null;
var myLatLng = null;
var myGeoXml3Zoom = true;
var marker = [];
var polyline;
function initialize()
{
myLatLng = new google.maps.LatLng(37.422104808,-122.0838851);
var test;
var lat = 37.422104808;
var lng = -122.0838851;
var zoom = 18;
var maptype = google.maps.MapTypeId.ROADMAP;
if (!isNaN(lat) && !isNaN(lng))
{
myLatLng = new google.maps.LatLng(lat, lng);
}
var myOptions = {zoom: zoom,center: myLatLng,mapTypeId: maptype};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
infowindow = new google.maps.InfoWindow({});
geoXml = new geoXML3.parser({map: map,infoWindow: infowindow,singleInfoWindow: true,zoom: myGeoXml3Zoom, markerOptions: {optimized: false},createMarker: createMarker});
geoXml.parse('test.kml');
};
var createMarker = function (placemark, doc) {
var markerOptions = geoXML3.combineOptions(geoXml.options.markerOptions, {
map: geoXml.options.map,
position: new google.maps.LatLng(placemark.Point.coordinates[0].lat, placemark.Point.coordinates[0].lng),
title: placemark.name,
zIndex: Math.round(placemark.Point.coordinates[0].lat * -100000)<<5,
icon: placemark.style.icon,
shadow: placemark.style.shadow
});
// Create the marker on the map
var marker = new google.maps.Marker(markerOptions);
if (!!doc) {
doc.markers.push(marker);
}
// Set up and create the infowindow if it is not suppressed
if (!geoXml.options.suppressInfoWindows) {
var infoWindowOptions = geoXML3.combineOptions(geoXml.options.infoWindowOptions, {
content: '<div class="geoxml3_infowindow"><h3>' + placemark.name +
'</h3><div>' + placemark.description + '</div></div>',
pixelOffset: new google.maps.Size(0, 2)
});
if (geoXml.options.infoWindow) {
marker.infoWindow = geoXml.options.infoWindow;
} else {
marker.infoWindow = new google.maps.InfoWindow(infoWindowOptions);
}
marker.infoWindowOptions = infoWindowOptions;
// Infowindow-opening event handler
google.maps.event.addListener(marker, 'click', function()
{
alert(placemark.name);
this.infoWindow.close();
marker.infoWindow.setOptions(this.infoWindowOptions);
this.infoWindow.open(this.map, this);
});
}
placemark.marker = marker;
return marker;
};
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="float: left; width: 70%; height: 100%;"></div>
</body>
</html>

If you use the "afterParse" function to add click listeners to the markers, you can access the data (if you use function closure), example accessing the name:
// assign "useTheData" as the after parse function
var geoXml = new geoXML3.parser({map: map, singleInfoWindow: true, afterParse: useTheData});
geoXml.parse('kmload.kml');
// function to retain closure on the placemark and associated text
function bindPlacemark(placemark, text) {
google.maps.event.addListener(placemark,"click", function() {alert(text)});
}
// "afterParse" function, adds click listener to each placemark to "alert" the name
function useTheData(doc) {
for (var i = 0; i < doc[0].placemarks.length; i++) {
var placemark = doc[0].placemarks[i].polygon || doc[0].placemarks[i].marker || doc[0].placemarks[i].polyline;
bindPlacemark(placemark, doc[0].placemarks[i].name);
}
};
working example

hope it can help ;)
/**
* map
*/
var myLatlng = new google.maps.LatLng(39.980278, 4.049835);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById('mapa'), myOptions);
var infoWindow = new google.maps.InfoWindow();
var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];
function makeMarker(options){
var pushPin = new google.maps.Marker({map:map});
pushPin.setOptions(options);
google.maps.event.addListener(pushPin, 'click', function(){
infoWindow.setOptions(options);
infoWindow.open(map, pushPin);
});
markerArray.push(pushPin);
return pushPin;
}
google.maps.event.addListener(map, 'click', function(){
infoWindow.close();
});
function openMarker(i){
google.maps.event.trigger(markerArray[i],'click');
};
/**
*markers
*/
makeMarker({
position: new google.maps.LatLng(39.943962, 3.891220),
title: 'Title',
content: '<div><h1>Lorem ipsum</h1>Lorem ipsum dolor sit amet<div>'
});
openMarker(0);

Develop Reference

JavaScript is the programming language of the Web.

Google Maps Street view Breakage - javascript

Related

Increase size of custom markers while zooming in? Using Google Maps and GeoJSON

How to get Google Maps onclick to get location name?

Open infowindows by default

Google maps load additional markers when map is dragged

How to fetch KML placement marker value in Google Maps API?

Categories

Resources