[javascript] Google Maps: Set Center, Set Center Point and Set more points

I am using Google Maps V3 and I want to:

  1. Set the center of the map to a particular latlng. I am using:

    map.setCenter(new google.maps.LatLng(mylat,mylong));
    
  2. Set a point in that center spot. I am currently using:

    var point = new google.maps.LatLng(mylat,mylong);
    
    marker = map_create_marker(point,"My Popup",map_icon_red);
    

    With this function:

    function map_create_marker(point,html,icon) {
        var marker =    new google.maps.Marker({
            position: point,
            map: map,
            icon: icon,
            shadow: map_icon_shadow
        });
    
        if(html!="") {
            var infowindow = new google.maps.InfoWindow({
                    content: html
            });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });
        }
        return marker;
    }
    
  3. Position many more markers using the same method above

The problem is that when I set the center like above, it only ever displays the first marker. But if I don't set a center it displays all the markers. How can I get them to both work?

Here is the full javascript code:

<script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" language="JavaScript">
    var map;

    var map_icon_green = new google.maps.MarkerImage(
        "http://mysite.com/green_pointer.png",
        new google.maps.Size(12,20),
        new google.maps.Point(0,0));

    var map_icon_blue = new google.maps.MarkerImage(
        "http://mysite.com/blue_pointer.png",
        new google.maps.Size(12,20),
        new google.maps.Point(0,0));

    var map_icon_yellow = new google.maps.MarkerImage(
        "http://mysite.com/yellow_pointer.png",
        new google.maps.Size(12,20),
        new google.maps.Point(0,0));

    var map_icon_red = new google.maps.MarkerImage(
        "http://mysite.com/red_pointer.png",
        new google.maps.Size(12,20),
        new google.maps.Point(0,0));

    var map_icon_shadow = new google.maps.MarkerImage(
        "http://mysite.com/shadow.png",
        new google.maps.Size(28,20),
        new google.maps.Point(-6,0));

    var map_crosshair = new google.maps.MarkerImage(
        "http://mysite.com/cross-hair.gif",
        new google.maps.Size(17,17),
        new google.maps.Point(0,0));


    function map_loader() {
        var myOptions = {
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel:false
        }

        map = new google.maps.Map(
                document.getElementById('map_container'), myOptions);

        map.setCenter(new google.maps.LatLng(53.0,-1.0));

        // <![CDATA[
        var point = new google.maps.LatLng(53.0,-4.0755);
        marker = map_create_marker(point,"some html which is OK",map_icon_red);
        // ]]>

        // <![CDATA[
        var point = new google.maps.LatLng(-24.0,25.0);
        marker = map_create_marker(point,"some html which is OK",map_icon_red);
        // ]]>

        // <![CDATA[
        var point = new google.maps.LatLng(54.0,-2.0);
        marker = map_create_marker(point,"some html which is OK",map_icon_red);
        // ]]>

        map.disableDoubleClickZoom = false;
    }


    function map_create_marker(point,html,icon) {
        var marker =    new google.maps.Marker({
            position: point,
            map: map,
            icon: icon,
            shadow: map_icon_shadow
        });

        if(html!="") {
            var infowindow = new google.maps.InfoWindow({
                    content: html
            });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });
        }
        return marker;
    }
    var map_set_center = 0;
    function map_load_resize() {
        if(map_set_center==0) {
             map.setCenter(new google.maps.LatLng(53.0,-1.0));
        }
        map_set_center = 1;
    }

    </script>   

This question is related to javascript google-maps google-maps-api-3

The answer is


Try using this code for v3:

gMap = new google.maps.Map(document.getElementById('map')); 
gMap.setZoom(13);      // This will trigger a zoom_changed on the map
gMap.setCenter(new google.maps.LatLng(37.4419, -122.1419));
gMap.setMapTypeId(google.maps.MapTypeId.ROADMAP);

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to google-maps

GoogleMaps API KEY for testing Google Maps shows "For development purposes only" java.lang.NoClassDefFoundError:failed resolution of :Lorg/apache/http/ProtocolVersion How to import JSON File into a TypeScript file? Googlemaps API Key for Localhost Getting "Cannot call a class as a function" in my React Project ERROR: Google Maps API error: MissingKeyMapError This page didn't load Google Maps correctly. See the JavaScript console for technical details Google Maps API warning: NoApiKeys ApiNotActivatedMapError for simple html page using google-places-api

Examples related to google-maps-api-3

Google Maps shows "For development purposes only" Googlemaps API Key for Localhost ERROR: Google Maps API error: MissingKeyMapError Google Maps API warning: NoApiKeys Google Maps JavaScript API RefererNotAllowedMapError This API project is not authorized to use this API. Please ensure that this API is activated in the APIs Console TypeError: window.initMap is not a function Google maps Marker Label with multiple characters Google Maps how to Show city or an Area outline How to use SVG markers in Google Maps API v3