Can't load Google Maps

JavaScript
1

Hi,
I am struggling into displaying information on a map. To do so I am storing the information on an hidden div of my website and retrieve its contents in the initmap event

var markerList = document.getElementById("divDataMap").innerHTML;

but it seems that this contents is not formatted correctly because the script comes up with an error and its contents says the length of list is 1268 where they are only 2 items to show

alert(markerList.length);

In the div I have got the code shown below. The running website can be seen here

 <div id="divDataMap" style="display:none">{  coords: {lat: -42.85841, lng:-73.65623}, icon: 'images/map_marker.png', content:  '<div class="listing-box__container">' + '<div class="listing__img">' + '<a href="PropiedadDetalles.aspx?Pr_Id=252">' + '<img class="listing__img" src="http://www.inmobiliariapatagonia.cl/fotos/100/c" alt="Maravillosa parcela para navegante">' + '</a>' +  '<span class="listing__close">&times;</span>' + '</div>' + '<div class="listing__content">' + '<h3 class="listing__title"><a href="PropiedadDetalles.aspx?Pr_Id=252">Maravillosa parcela para navegante</a></h3>' + '<p class="listing__price">$$110,000,000 </p>' + '</div>' + '</div>' }, {  coords: {lat: -42.48829, lng:-73.68865}, icon: 'images/map_marker.png', content:  '<div class="listing-box__container">' + '<div class="listing__img">' + '<a href="PropiedadDetalles.aspx?Pr_Id=235">' + '<img class="listing__img" src="http://www.inmobiliariapatagonia.cl/fotos/100/c" alt="Propiedad en Mirador de Coñico, Península de Rilán">' + '</a>' +  '<span class="listing__close">&times;</span>' + '</div>' + '<div class="listing__content">' + '<h3 class="listing__title"><a href="PropiedadDetalles.aspx?Pr_Id=235">Propiedad en Mirador de Coñico, Península de Rilán</a></h3>' + '<p class="listing__price">$$45,000,000 </p>' + '</div>' + '</div>' },</div>
2

The .innerHTML property gets you the HTML as a string, and yours has a length of 1268 characters. You might evaluate that string as JS code first (but you shouldn’t!), but then again why not assign that code to a regular variable in the first place? Just put your JS inside <script> tags, that’s what they are for after all…

3

Originally I didn’t want to use the .innerHTML but to pass it as a parameter to my initMap. I never managed to pass this d… information.

After some time I managed to get something working. Right now my issue is why the grid only shows 1 property whereas several are being passed.

4

Well at the moment the website you linked is throwing an error saying markers is being used without definition on line 653 of custom.js… so that would be my first avenue of fixing…you’re trying to .push to something that hasnt yet been defined as an empty array, or you’ve mis-identified a variable name.

5

Hi, I know that it is throwing an error, if it wouldn’t my issue would be fixed :slight_smile:

On my page I have got this

 <script type="text/javascript">  
 google.maps.event.addDomListener
 (
 window, 'load', 
 initMap
 (
 {  
 coords: {lat: -42.85841, lng:-73.65623}, 
 icon: 'images/map_marker.png', 
 content:  '<div class="listing-box__container">' + '<div class="listing__img">' + '<a href="PropiedadDetalles.aspx?Pr_Id=252">' + '<img class="listing__img" src="http://www.inmobiliariapatagonia.cl/fotos/100/c" alt="Maravillosa parcela para navegante">' + '</a>' +  '<span class="listing__close">&times;</span>' + '</div>' + '<div class="listing__content">' + '<h3 class="listing__title"><a href="PropiedadDetalles.aspx?Pr_Id=252">Maravillosa parcela para navegante</a></h3>' + '<p class="listing__price">$$110.000.000 </p>' + '</div>' + '</div>' 
 }, 
 {  
 coords: {lat: -42.48829, lng:-73.68865}, 
 icon: 'images/map_marker.png', 
 content:  '<div class="listing-box__container">' + '<div class="listing__img">' + '<a href="PropiedadDetalles.aspx?Pr_Id=235">' + '<img class="listing__img" src="http://www.inmobiliariapatagonia.cl/fotos/100/c" alt="Propiedad en Mirador de Coñico, Península de Rilán">' + '</a>' +  '<span class="listing__close">&times;</span>' + '</div>' + '<div class="listing__content">' + '<h3 class="listing__title"><a href="PropiedadDetalles.aspx?Pr_Id=235">Propiedad en Mirador de Coñico, Península de Rilán</a></h3>' + '<p class="listing__price">$$45.000.000 </p>' + '</div>' + '</div>' 
 }, 
 )
 ); 
 </script>

And on my js script this:

function initMap(_Markers) {
    var markerList = [_Markers];
    alert(markerList.length);
6

Right… but if you look at the line I actually mentioned, it says:

    markers.push(marker);

markerList != markers.

7

var markers = ; was missing from my code. Now the map is coming up, still a few issues to brush up but nothing related to the js itself.

Thank you @m_hutley

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.