Multiple Markers With Info Windows Map Error

I have this working map https://jsfiddle.net/m9ugbc7h/4/ then i tryed to integrate multiple markers with info windows following step by step this tutorial http://wrightshq.com/play

Solution 1:

You have few issues with the code:

First

Console error google is not defined caused by:

var bounds = new google.maps.LatLngBounds();

at the top of the file before google js is loaded. Move it inside jQuery(document).ready(function($){:

jQuery(document).ready(function($){
    bounds = new google.maps.LatLngBounds();

Second

// Loop through our array of markers & place each one on the map 

Why? They are already placed on the map, you just want to attach them InfoWindow:

//marker = new google.maps.Marker({//    position: position,//    map: map,//     title: markers[i][0]//});var marker = markers[i];

In the above code is the root of your problem (info windows not showing up): you are creating newMarker object instead of using the existing one from the markers array.

Third

Console error: too much recursion

caused by:

// Automatically center the map fitting all markers on the screenmap.fitBounds(bounds);

The issue with this one is most probably that bounds are undefined at this moment. Not sure why, but too much recursion is usualy caused by that. I have commented that out, so you will have to take a look how to pass valid value in fitBounds.

Fourth

You have sintax error here:

var infoWindow = new google.maps.InfoWindow(), marker, i;

You probably meant:

var infoWindow = new google.maps.InfoWindow();

Working fiddle: https://jsfiddle.net/m9ugbc7h/7/