How to make Google Map with Multiple Map Pointers to zoom a particular area/location on opening a page

Question

I'm not able to zoom to a particular area/location in Google maps which has multiple Map Pointers. At present it automatically centers the map covering all locations. But what I need is to zoom to a particular location upon opening the webpage. Here is my code,

<script>
jQuery(function ($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "//maps.googleapis.com/maps/api/js?key=AIzaSyA157quXbUlHHgm4wJJxzD49MivKgPSil8&sensor=false&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    locations = <?php echo json_encode($sl_select_obj) ?>;
    markerdata = JSON.parse('<?php echo json_encode($locations_data) ?>');


    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap',
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);

    // Multiple Markers''
    // $info='';
    var markers = locations;

    <?php
    $total = count($locations_data);
    $markerinfo = '';
    $c = 0;
    foreach ($locations_data as $key => $info):
        if ($c != $total):
            $markerinfo .="['<div class=\"info_content\"><h2>" . $info['loctitle'] . "</h2><h3><a href=" . $info['site'] . ">" . $info['site'] . "</a></h3><h3><a href=" . $info['locpermalink'] . ">View Full Office Details</a></h3></div>'],";
        else:
            $markerinfo .="['<div class=\"info_content\"><h2>" . $info['loctitle'] . "</h2><h3><a href=" . $info['site'] . ">" . $info['site'] . "</a></h3><h3><a href=" . $info['locpermalink'] . ">View Full Office Details</a></h3></div>']";
        endif;
        $c++;
    endforeach;
    ?>



    // Info Window Content                        
    var infoWindowContent = [<?php echo $markerinfo; ?>]; //markerdata; 



    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map  
    for (i = 0; i < markers.length; i++) {
        var position = new google.maps.LatLng(markers[i]["lat"], markers[i]["long"]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i]["address"],
            icon: '<?php bloginfo('template_directory'); ?>/images/venue-direct-icon.png'
        });

        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

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

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
        this.setZoom(7);
        google.maps.event.removeListener(boundsListener);
    });
    map.fitBounds(markerBounds);

}

Just for clarification, you want the map to zoom at a specific location on startup? — el solo lobo, Aug 02 '16 at 07:14
Just some general advice, start as early as possible to avoid mixing JS and php. It´s unreadable and really bad practice. Don´t do that! — el solo lobo, Aug 02 '16 at 07:15
Refer this http://stackoverflow.com/questions/10268033/google-maps-api-v3-method-fitbounds you will came to know to about your answer for reference — black_pottery_beauty, Aug 02 '16 at 07:27

Alberto · Accepted Answer · 2016-08-02T08:05:00.663

Try to add the "center" option like this:

var mapOptions = {
    center: new google.maps.LatLng(51.5287718, -0.2416803),
    mapTypeId: 'roadmap',
    zoom: 15,
    draggable: map_draggable,
    scrollwheel: map_scrollwheel
};

EDIT: To help you this is a code similar that I use in my project: multiple positions, center on the first if only one, else I use google autocenter for all positions.

jQuery( document ).ready( function( $ ) {

if($(window).width()>991){
    var map_draggable = true;
    var map_scrollwheel = false;
} else {
    var map_draggable = false;
    var map_scrollwheel = false;
}

var offices = [];
$('#map-google-container')
    .find('.hidden')
    .each(function(){
        offices[offices.length] = 
        {
            "latitude":$(this).attr('latitude'),
            "longitude":$(this).attr('longitude'),
            "content":$(this).attr('content')
        };
    });
var mapOptions = {
    zoom: 6,
    center: new google.maps.LatLng(offices[0].latitude, offices[0].longitude),
    draggable: map_draggable,
    scrollwheel: map_scrollwheel,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    panControl: true
};
var map = new google.maps.Map(document.getElementById('map-google'), mapOptions);
var map_styles = [
  {
    featureType: "all",
    stylers: [
        { hue: "#F69200" }, 
        { saturation: -50 }
    ]
  },{ 
    featureType: "water", 
    stylers: [ 
        { color: "#efefef" } 
    ] 
  } 
];
map.setOptions({styles: map_styles});
var image = '/include/images/marker.png';

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

for (i = 0; i < offices.length; i++)
{  
    var content = offices[i].content;
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(offices[i].latitude, offices[i].longitude),
        map: map,
        icon: image,
        animation: google.maps.Animation.DROP,
        title: content
    });

    bounds.extend(marker.position);

    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));
}

if (offices.length > 1) { map.fitBounds(bounds); }
});

In my project I have to list all the offices and show a unique map with all of them. So in the HTML I put the information of all offices (hidden for the user). In JavaScript I loop through these properties and populate the map.

Hope it helps

Yes, I tried adding that 'center: new google.maps.LatLng(51.5287718, -0.2416803),' , But it didnt worked out for me. — Dreamerz, Aug 02 '16 at 07:03
The Google Documentation say exactly this https://developers.google.com/maps/documentation/javascript/examples/control-options — Alberto, Aug 02 '16 at 07:34
Yes, and I am stumbling on this for a day by adding this one, but without luck, hoping to find a solution for this, Thanx — Dreamerz, Aug 02 '16 at 07:42
Maybe try to restart writing your procedure using Google Documentation and fixed data and when all works try to add your data. Good luck — Alberto, Aug 02 '16 at 07:45

score 0 · Answer 2 · answered Aug 02 '16 at 09:52

0

Yes, I can able to find the solution, for those who are facing this similar issue may find it helpful,

var map_center_position = new google.maps.LatLng(34.0059657 ,-118.4440441);
        bounds.extend(map_center_position);
map.fitBounds(bounds);

answered Aug 02 '16 at 09:52

Dreamerz

15
5

How to make Google Map with Multiple Map Pointers to zoom a particular area/location on opening a page

2 Answers2